리액트 시작하기
먼저 리액트란?
페이스북에서 개발한 프론트엔드 프레임워크이다. 리액트는 페이스북을 개발할 때도 사용되었다.
리액트의 장점?
원하는 화면을 컴포넌트 단위로 빠르고 효율적으로 구성할 수 있다. 이 때, Virtual DOM(가상 화면)을 이용하여 화면 출력 속도를 높이고 코드 복잡도를 줄였다.
Virtual DOM 에 대해 추가하자면, React는 화면 구성을 Tree 구조로 이루어 "다음에 나타날 화면의 일부(노드)를 미리 그려 놓고 변경된 화면의 일부(노드)만 수정"하도록 하였다.
Webpack이란?
"프로젝트에 사용된 파일을 분석하여 기존 웹 문서파일로 변환하는 도구"이다.
프레임워크에서 사용하는 파일들(예: .css, .sass 등)을 웹 브라우저에서 인식할 수 있도록 transpile(해석)해주는 역할을 한다. 또 웹팩은 불필요한 파일들을 제외하거나 압축해서 용량을 줄여주는 역할도 할 수 있다.
create-react-app 과 npx
"npm과 npx의 차이에 대해서" 에 따르면 create-react-app 과 같은 보일러플레이트(반복되어 자주 사용되는 상용구 코드)는 변경사항이 잦기 때문에 매번 최신 버전으로 업데이트를 해주어야 한다는 불편함이 있다.
npm 5.2부터 npx 를 기본으로 제공하는데, npx는 '매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 모듈이 돌아가기 때문에 create-react-app을 사용할 때 적합하다.'
따라서 npx create-react-app example 이란 명령어를 넣으면 기본적인 리액트 프로젝트 템플릿이 생성된다.
패키지 매니저 yarn을 글로벌에 설치 후 프로젝트 디렉토리 내부에서 yarn start를 입력하면 리액트 앱을 구동할 수 있다.
