[TIL] 내일배움캠프 React 과정 2022.12.02_OSI 7계층

OSI 7계층 특강 OSI란? OSI 모형(Open Systems Interconnection Reference Model)은 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. 일반적으로 OSI 7 계층이라 불리기도 한다. 출처 https://namu.wiki/w/OSI%20%EB%AA%A8%ED%98%95 LAN vs WAN LAN (Local Area Network) 사무실이나 빌딩처럼 비교적 좁은 범위의 네트워크를 말한다. WAN (Wide Area Network) 서로 떨어져 있는 LAN 사이를 전용선 등으로 연결한 광역 네트워크를 말한다. 클라이언트 vs 서버 클라이언트 : 네트워크상에서 서버에게 서비스를 요청하는 장비 컴퓨터, ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 2.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.02

Today I Learned javascript 심화 강의 수강 - 클로저 javascript 퀴즈 풀기 OSI 7계층 특강 수강 javascript 심화 강의 - 클로저 함수가 선언된 렉시컬 환경(lexical environment) const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 }; innerFunc(); }; outerFunc(); 중첩 함수 innerFunc의 상위 스코프는 outerFunc의 스코프 → 그래서 x = 10에 [먼저] 접근하는 것 const x = 1; // innerFunc()에서는 outerFunc()의 x에 접근할 수 없다. // Lexical Scope..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 2.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.01_DOM

DOM 기초 특강 나도 DOM 이해할 수 있어~~! 웹 페이지가 뜨는 과정 1. www.naver.com (클 → 서) 2. HTML 문서를 수신(서 → 클) 3. 브라우저가 HTML 파일을 해석(parsing) 브라우저에는 기본적으로 랜더링 엔진이 있는데 랜더링 엔진이 HTML 문서에 코드 한 줄, 한 줄 보면서 ‘해석'한다. 4. DOM Tree를 구성 5. HTML에 CSS가 포함돼있으면 CSSOM Tree를 구성 6. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree … 이하 과정 생략 DOM이란? Document(HTML 파일)를 Javascript가 해석할 수 있는 Object 형태로 Modeling 한 것! DOM은 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 j..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 2.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.01_JS 콜백 함수

Today I Learned javascript 심화 강의 수강 - this, 콜백 함수 DOM 기초 특강 수강 javascript 심화 강의 - THIS NodeList에 배열 메서드를 적용 document.body.innerHTML = `ABC`; var nodeList = document.querySelectorAll('div'); console.log(nodeList) // 유사배열객체 // { // 0: div, // 1: div, // 2: div, // length: 3 // } var nodeArr = Array.prototype.slice.call(nodeList); nodeArr.forEach(function(node) { console.log(node); // A // B // C }..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 1.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.30_JS this

전역 공간에서의 this this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정 전역 공간에서 this는 전역 객체를 가리킴 -> window(브라우저 환경) 메서드로서 호출할 때 그 메서드 내부에서의 this 함수와 메서드의 차이점 : 독립성 -함수 : 그 자체로 독립적인 기능을 수행 ex) obj1.( ) -메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행 ex) obj1.method( ) var func = function (x) { console.log(this, x); }; // 함수로서 호출된 경우 this는 window 전역 객체를 의미한다. func(1); // Window { ... } var obj = { method: func..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 30.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.30_JS 실행 컨텍스트

Today I Learned javascript 심화 강의 수강 - 실행 컨텍스트, this javascript 심화 강의 실행 컨텍스트란? 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간 (함수가 실행되는 시점) 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행 하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 실행 컨텍스트에 담기는 정보 1. Variable Environment a. 현재 컨텍스트 내의 식별자 정보 b. 외부 환경 정보 c. 선언 시점 LexicalEnvironment..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 30.
• textsms

[WIL] 내일배움캠프 넷째 주_기초 프로젝트 결과물 정리

기초프로젝트 내일배움캠프 React B반 3조 The Leaders팀 팀원: 이희령, 이학경, 배성완, 박성환, 박상우 프로젝트 소개 웹페이지 명: 먹을텐데~ 컨셉: 내가 먹은 음식의 사진을 올려서 사용자들과 공유한다. 도메인 http://yourfood.site/ github 링크 https://github.com/baesee0806/the-leaders S.A 및 체크리스트 https://www.notion.so/S-A-Starting-Assignments-5731fd349cc94067b68b5667eb65c0b5 KPT 회고 https://velog.io/@baesee0806/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84-Reate-B%EB%B0%..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 29.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.29

Today I Learned javascript 기초 문법 공부 javascript 심화 강의 수강 javascript 기초 문법 선언되지 않은 변수를 참조한다면? Reference error를 일으키게 된다. console.log(foo); // ReferenceError: foo is not defined javascript 함수 기본 구조 function 함수이름(인자1, 인자2, 인자3) { // 명령문 } 함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다. 인자(Parameter 또는 매개변수)란 함수를 호출할 때 전달받기 위해 지정한 변수를 뜻한다. 인수(Argument)란 인자에 전달하는 값 그 자체를 의미한다. 함수는 return 키워드로 값을 반환할 수 있다. ja..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 29.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.28

Today I Learned 프로젝트 발표 전에 최종 점검, 자잘한 에러 수정 드디어 발표와 함께 기초 프로젝트 마무리! 해결하는 경험 게시물 상세 페이지에 수정, 삭제 버튼이 나타났다가 사라지는 문제 firebase.auth().onAuthStateChanged((user) => { if ( user && user.uid == result.data().uid) { $("#edit").show(); $("#delete").show(); } else { $("#edit").hide(); $("#delete").hide(); } 내가 작성한 글이 아닐 때는 hide 메서드를 이용해서 수정, 삭제 버튼이 보이지 않도록 만들었다. 그런데 로딩 과정에서 내가 작성한 글이 아니더라도 수정, 삭제 버튼이 잠깐 나타났..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 28.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.27

오늘 수정한 부분 메인 페이지 최신순 정렬 게시물 수정, 삭제 기능 구현 내가 작성한 글에만 수정, 삭제 버튼이 보이도록 설정하기 프로필 페이지에 내가 작성한 글만 불러오기 + css 작업 회원가입 후 프로필 이미지를 업로드하지 않고 게시물을 올렸을 때 프로필 이미지가 null로 뜨던 문제 해결 로그인하지 않으면 메인 페이지에 데이터가 불러오지 않던 문제 해결 게시물 수정 페이지에서 이미지를 새로 업로드하면 페이지 안에서 기존 이미지를 새로운 이미지로 교체하기 수정 페이지 css 작업 메인 페이지 css 작업 해결하는 경험 프로필 이미지가 null로 뜨는 문제 회원가입 후 프로필 이미지를 업로드하지 않으면 DB에 저장된 프로필 이미지 URL이 null로 떠서 게시물 상세 페이지에서 프로필 이미지를 불러오..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 28.
• textsms