프로젝트 1 - 리액트란?

React JS

리액트는 페이스북에서 만든 라이브러리이다

Components로 이루어져 있고, 컴포넌트는 모듈과 비슷하게 재사용성이 뛰어나다

좋아요, 댓글 기능 등 각 기능을 따로 컴포넌트화 해서 각 프로젝트에 사용하고

싶으면 그 파일만 그대로 가져가서 사용하면 된다

또한 Virtual Dom이라는게 있다

이걸 이해하기 위해 Real Dom과 Virtual Dom을 비교해보겠다

예를들어 10개의 리스트가 있다고 하자

리얼돔에서는 한가지의 리스트에서만 업데이트가 일어났다고 해도 전체 리스트를

Reload 해야하는 반면, 버추얼돔에서는 한가지 리스트만 돔에서 바꿔준다

어떻게 진행되냐면 버추얼돔에서 미리 스냅샷을 찍어둔다

그리고 업데이트가 되면 버추얼돔이 하나하나를 살펴보면서 이전에 찍어둔

스냅샷과 비교를 한다

이 과정을 diffing 라고한다

그리고 바뀐부분이 있으면 그 부분만 리얼돔에서 바꿔준다

이게 가능한 이유는 버추얼 돔은 리얼 돔과 같은 프로퍼티들을 갖고있기때문이다

Create-react-app

원래는 리액트 앱을 처음 실행하기 위해선 webpack이나 babel 같은 것을

따로 설정해야 했고, 많은 시간이 걸렸다

그러나 이제는 create-react-app 커맨드로 바로 시작할 수 있게 바뀌었다

Babel

자바스크립트에서는 문법들을 업데이트하고있다

그래서 새로운 ES6문법으로 작성했다고 해도 그것을 지원하지 않는 브라우저가

있기 때문에 구형 브라우저에서 작동할 수 있도록 변환시켜주는 것을 바벨이라고 한다

Webpack

옛날에는 사이트를 만들 때 HTML, CSS, JS등 간단한 파일들만 이용해서 만들었다

그러나 요즘은 많은 라이브러리, 프레임워크 등을 사용하고 파일들이 많이 복잡해졌다

이것들을 번들(Bundle) 시켜주는것이 웹팩이다

웹팩은 깊게 파면 아주 방대한 양이 있고 자세한 정보가 궁금하면 검색하도록 하자!

설치

지금까지는 우리가 서버쪽만 다루었고 이제 클라이언트쪽을 다룰것이기때문에

client 폴더를 만들도록 하자

그리고 server 폴더도 만들어서 지금까지 만들었던 파일들을 넣어주도록 하자

.gitignore, node_modules, package-lock.json, package.json, README.md를

제외한 모든 파일은 server 폴더에 넣으면 된다

그리고 리액트는 클라이언트 폴더안에 다운받을 것이기 때문에 터미널의 디렉토리를

클라이언트로 옮겨주도록 하자

cd client/
npx create-react-app .

라고 치면 된다

.을 붙이는 이유는 현재 폴더에 설치하겠다는 의미이다

제대로 설치가 되었나 확인하기 위해 npm run start를 쳐보도록 하자

클라이언트 디렉토리에서 작성해야한다

클라이언트 폴더와 서버폴더 각각에 package.json 파일이 있기 때문에

어느 디렉토리에서 작성하냐에 따라 다른 결과가 나온다

기본적으로 리액트 package.json 파일을 들어가보면 스크립트에 start가

react-scripts start 로 작성이 돼있는것을 볼 수 있다

처음 나오는화면은 App.js 파일을 렌더링한 화면이다

현재 클라이언트 폴더를 보면 src폴더와 public 폴더가 있다

웹팩이 관리해주는 부분은 src 폴더이다

이미지같은 것들을 넣고싶으면 src 폴더에 넣어야 웹팩이 번들을 해준다