#15
- React JS는 프레임워크가 아니라 library이다.
- Components로 이루어져서 module과 비슷하고 재사용성이 뛰어나다.
- Virtual DOM 형식이다.
Real DOM은 매번 전부 reload를 하는 반면, Virtual DOM은 바뀐 부분만 Real DOM에서 reload를 한다.
#16
- Babel은 최신 javascript가 구형 javascript에서도 실행될 수 있게 변환시켜준다.
- Webpack은 (복잡하고 설명할 것이 많지만) 간단하게 이야기한다면, 많은 모듈과 라이브러리를 합해서 간단하게 묶어서 정리해주는 것이다.
+(18강)
webpack은 src 폴더 안의 파일들만 관리해주고, public 폴더의 파일은 관리하지 않는다. 따라서 사진같은 것들은 src 폴더에 넣어주는 것이 좋다.
#17
- npm (Node Package Manager)
- package.json에서 보이는 것처럼 라이브러리를 담고 있는 레지스터리 역할을 한다.
- 앱을 시작하거나 배포할 때 빌드를 해야하는데 npm으로 빌드할 수 있다.
- npx를 사용하게된 이유
- 원래 create-react-app을 할 때 npm install -g create-react-app처럼 -g를 사용해서 global 디렉토리(window의 경우에는 컴퓨터의 %AppData%/npm)에 다운을 받았다.
- 그런데, 이제는 npx를 사용해서 그냥 create-react-app을 이용할 수 있다.
- 어떻게 그게 가능하냐면, npx가 npm registry에서 create-react-app을 찾아서(look up) 다운로드 없이 실행시켜 준다.
- npx를 사용할 때의 장점
- Disk Space를 낭비하지 않을 수 있다.
- 항상 최신 버전을 사용할 수 있게 된다.
#18
- clinent 폴더로 이동해서 npm run start를 하면 package.json의 scripts에 있는 start가 실행된 것이다.
- 그렇게 실행되면, src 폴더의 App()가 화면에 보여지게되는데, scr 폴더의 index.js의 다음 코드처럼 App을 보이도록 설정해서 그렇다.
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); - 근데 이 App이 어디에 붙어서 보여지냐면 지금 root라는 곳에 붙어서 보여지게 되는데, public 폴더의 index.html의 코드 중 id가 root인 곳에 붙어서 보여진다.
