Node.js와 npm을 다뤄보지 않았다면 여기서 멈추고 Node 쪽을 먼저 배울 것을 권한다!
terminal을 열고 아래 명령어를 입력한다.
npm install create-react-app -g
"create-react-app"이라는 모듈을 사용하면 react를 실습하기 위한 환경이 자동으로 세팅된다.
원래 처음부터 모듈을 하나씩 설치하려면 react, babel, webpack 등을 설치해주고, 각각 설정도 해줘야 하는데 이 과정이 매우 복잡하다. 한 번 시도했다가 망했는데, 이런 세부적인 과정들을 알아두는 것도 중요하다고 생각하기에 다음에 다시 시도해 볼 예정이다. 기회가 된다면 이 과정도 포스팅 해야겠다:)
"-g" 옵션을 주었기 때문에 컴퓨터 어디에서든지 create-react-app을 실행할 수 있다. 터미널 안에서 실습 프로젝트를 만들고 싶은 폴더 위치로 이동한 다음, 아래와 같이 입력해준다.
creact-react-app <새로 만들 폴더명>
터미널에 어마무시한 글들이 뜨고, 조금 기다리다 보면 "Happy Hacking!" 이라는 마지막 말과 함께 설정한 이름의 프로젝트 폴더가 생성되어 있을 것이다.
생성된 프로젝트 폴더 안으로 들어가서 아래의 명령어를 입력하면 자동으로 기본 브라우저에 React 페이지가 뜰 것이다. 그렇다면 설치가 잘 된 것이다!!!
npm start
├── node_modules
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
다음 포스트에서는 중요한 파일들의 내용을 하나하나 뜯어보고자 한다.
짜이찌엔!