이 포스팅은 [실전 리액트 프로그래밍]을 공부하고 정리한 내용으로, 대부분의 내용이 해당 서적에서 나왔음을 밝힙니다.
챕터1에서는 리액트가 무엇인지 기본적인 정의와 일반적으로 완성되어 있는 강의를 따라하기만 하면서 겪을 수 있는 문제인
'나도 모르게 이미 설치/세팅되어 있는' 것들에 대한 지식 부재를 최소화해주기도 한다.
ex) 외부 패키지 (babel, react-dom 등...)
해당 챕터에서 제대로 이해하고 넘어가야 할 몇 가지만 적어보자면 3가지 정도.
(해당 내용 외의 것들도 중요하지만, 사용하면서 익힐 수 있을듯)
1. 바벨 (Babel)
자바스크립트 코드를 변환해주는 컴파일러로, 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있게 해준다. 리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다.
(동일한 내용을 JSX 문법으로, React.createElement 함수로 작성해보는 것은 리액트에서의 바벨의 편리함을 느끼기에는 좋은 경험인 듯)
2. 웹팩 (Webpack)
서비스를 개발할 때 단일 자바스크립트 파일로만 개발하지 않는 한(심지어 그런 경우에도) 파일 간의 의존성이 발생하게 될 수 있다. 웹팩은 이러한 의존성을 제거해주며, 여러 개의 파일을 한 개 이상의 파일로 분할하여 파일을 관리하여 준다.
웹팩은 ESM 문법을 사용하여 모듈을 내보내고 가져오도록 하는데, 노드(Node)에서의 require/export가 리액트에서의 export/import와 비슷한 느낌이다.
3. create-reacp-app (cra)
cra는 리액트에서 '웹' 애플리케이션을 만들기 위한 환경을 제공한다.
(expo는 리액트 네이티브에서는 개발 환경을 구축해주는 기능을 제공한다.)
또한, 앞서 말한 바벨과 웹팩도 cra에 포함되어 있다.
위 내용 외에도, npm의 명령어들, css 작성 방법 정도가 해당 챕터의 주요 이슈가 된다.
