Frontend

웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다. Critical Rendering Path 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path, CPR이라고 한다. CRP의 6단계 과정 DOM 트리 구축 CSSSOM 트리 구축 JavaScript 실행 렌더 트리 구축 레이아웃 생성 페인팅 위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있다. 첫번째 단계 : 브라우저는 읽어들인 문서를 파..

불변성 클로저(자바스크립트개념) prop-drilling 불변성 (1) 불변성이란? 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다. (2) 변수를 저장하면, 메모리에 어떻게 저장이 될까? 만약 우리가 let number = 1 이라고 선언을 하면, 메모리에는 1 이라는 값이 저장된다. 그리고 number 라는 변수는 메모리에 있는 1의 주소값을 참조한다. 그리고 이어서 let secondNumber = 1 이라고 다른 변수를 선언을 했다고 가정해보자. 이때도 자바스크립트는 이미 메모리에 생성되어 있는 1이라는 값을 참조한다. 즉, number와 secondNumber는 변수의..

웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다. Critical Rendering Path 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path, CPR이라고 한다. CRP의 6단계 과정 DOM 트리 구축 CSSSOM 트리 구축 JavaScript 실행 렌더 트리 구축 레이아웃 생성 페인팅 위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있다. 첫번째 단계 : 브라우저는 읽어들인 문서를 파..

What's React? "A Javascript library for building user interface by facebook(2013)" 리액트는 웹브라우저뿐 아니라, React Natve를 통한 앱어플리케이션, Electron과의 조합으로 데스크탑어플리케이션까지 빌딩할 수 있다. 리액트는 SPA(Single Page Application), CSR(Client Side Rendering)과 연관성이 많은 라이브러리이다. 또한 Gatsby, NEXT와 리액트를 함께 사용하면 SSG(Static-Site-Generation) , SSR(Server-Side-Rendering)도 구현할 수 있다. Frmaworks VS libraries Frmaworks: UI, Routing, HTTP Clie..

JSX 문법 React에서 컴포넌트는 함수로 만들 수 있다. 함수네임의 맨첫글자는 대문자로 해줘야함 component는 return()안에 작성하는데 이때 JSX문법을 사용해야한다. JSX문법 React에서 컴포넌트를 반환할때에는 하나의 태그만 반환해야한다. 다수의 태그를 반환하고싶다면 , , 등 부모태그에 다수의 태그를 상속시키는식으로 작성해야한다. class를 사용하고싶다면, class대신에 className을 사용해야한다. 컴포넌트범위내에 자바스크립트문법을 작성하고싶다면 중괄호{}안에 작성할 것 (아래코드에서는 name, style값, list.map등이 이에 해당함) function App() { const name = "inguk"; const list = ["우유", "딸기", "바나나". '..

시간 정말 빨리간다 벌써 내배캠 본과정에 온지 5주차가 끝났다니.... 이번주에는 react에 들어가기전 준비과정을 탄탄하게 해놓으려고 자바스크립트를 정말 정신없이 공부했다. 시간 엄청 빨리간듯.. 얻게된 것 자바스크립트 심화지식 DOM구조 자바스크립트 이터러블&제네레이터 개념 자바스크립트 Class개념 자바스크립트 set&map 개념 다음주 계획 리액트 기본지식 숙달하기 자바스크립트 복습하기(개발을 하며 어떤순간에 지금보는 이 코드를 쓰면 좋을지 능동적으로 생각하며)

Iterable의 정의 이터레이션(Iteration): 반복, 순회 프로토콜(Protocol): 규격, 약속, 인터페이스 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of, spread, 배열디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜을 따르는 자바스크립트 기본자료구조에는 Array, String, Map, Set등이 있다. iteration protocol에는 iterable protocol과 iterator protocol이 있다. iterable protocol: Symbo..

What's React? "A Javascript library for building user interface by facebook(2013)" 리액트는 웹브라우저뿐 아니라, React Natve를 통한 앱어플리케이션, Electron과의 조합으로 데스크탑어플리케이션까지 빌딩할 수 있다. 리액트는 SPA(Single Page Application), CSR(Client Side Rendering)과 연관성이 많은 라이브러리이다. 또한 Gatsby, NEXT와 리액트를 함께 사용하면 SSG(Static-Site-Generation) , SSR(Server-Side-Rendering)도 구현할 수 있다. Frmaworks VS libraries Frmaworks: UI, Routing, HTTP Clie..