이번 주를 돌아보며 :

동아리에서 나가는 아이디어톤 때문에 강의를 듣는데 시간을 내지 못했다. 틈을 내서 했어야했는데 생각보다 시간을 내지 못했던 것 같다. 강의를 진도표에 턱걸이에 맞춰 항상 듣는 것 같다. 진도표가 없었다면 더욱 진도를 맞추기 어려웠을 것 같다.

중간 점검때 강사님의 질문 답변 시간이 앞으로의 목표나 궁금했던 것을 해결할 수 있는 좋은 시간이 되었다.

다음 주면 끝나가는데 진도를 빨리 빼고 과제를 도전해보는 시간을 가져야겠다.

학습 내용 : JS 센션 8~9, 리액트 섹션 1 ~4

React

Angular와 Vue 는 프레임워크이고 React는 라이브러리이다.

프레임 워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것.

라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것.

가상돔(Virtual Dom)

웹페이지 빌드 과정(Critical Rendering Path)

브라우저는 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러단계가 있다.

웹 브라우저는 HTML 문서를 읽고, 스타일을 입히고, 뷰포트에 표시하는 과정이 있다.

문제점 : 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 RenderTree가 재생성되는데, 즉 모든 요소들의 스타일을 다시 계산하고, Layout, Paint 하데 되므로써 적은 변화로 인해 모든 DOM을 조작하게 되므로 불필요한 비용이 많이 들게 된다. ⇒ 가상돔

가상돔

실제 DOM을 메모리에 복사하여 둔 것

데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교하여 바뀐 부분만 실제 돔에 적용시켜준다. 바뀐 부분을 찾는 과정을 Diffing 이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라고 한다.

React 기본 구조

이름을 수정하면 안되는 파일

1. public/index.html : 페이지 템플릿

2. scr/index.js : 자바스크립트의 시작점

src 폴더

• 리액트와 관련된 소스 코드들을 작성하는 폴더.

• 이곳에 JS 파일과 CSS 파일들을 넣으면 된다.

• Webpack은 src 폴더에 있는 파일만 보고, 이외의 폴더에 넣은 것은 Webpack에 의해 처리되지 않는다.

Package.json 파일

• 필요한 라이브러리와 버전이 명시되어 있다.

• 리액트 앱 실행, 빌드, 테스트 등의 스크립트가 명시되어 있다.

• 프로젝트에서 자주 실행되는 명령어를 scripts 에 작성해두면 명령어로 실행이 가능하다.

• 소스 코드를 입력할때 문법이나 코드 포맷을 체크하는 것에 대해 설정을 명시할 수 있다.

•  

SPA(Single Page Application)

특징

옛날에는 각 페이지마다 html 문서파일을 만들어두고, 각 html 파일을 불러와 해당 페이지를 보여주는 형식인 MPA(Multi Page Application)를 많이 사용했다.

하지만 SPA는 하나의 파일(index.html)의 id가 root인 div 태그 안에 요소들을 동적으로 바꿔주면서 하나의 html 파일로만 여러 페이지를 구성하는 형식이다.

History API

HTML5 의 History API 를 사용해서 현재 페이지 내에서 화면이동이 일어나는 것 처럼 작동하게 해준다.

History API는 React-Router-Dom 라는 라이브러리를 통해 사용한다.