VSCode로 React 개발 환경 세팅하기
1. node.js 를 다운받는다. (안정적으로 작동하는 LTS버전을 다운)
2. 전부 Next를 눌러 설치를 마친다.
3. 설치가 잘 되었는지 명령 프롬프트(cmd)에서 확인한다.
node -v 는 Node.js의 버전을 확인하는 명령어이고,
npm -v 는 Node.js에서 사용할 패키지를 관리하고 실행하는 도구의 버전이다.
4. 사용할 코드에디터인 VS Code 를 다운받는다.
6. create-react-app으로 리액트 프로젝트 생성
npm init react-app <폴더 이름> 혹은
폴더를 열어 터미널에서 npm init react-app . 을 작성하여 설치한다.
* 터미널 열기: View - Terminal (Ctrl+`)
7. 개발 모드 실행하기
터미널에 npm run start 를 입력하면 생성한 프로젝트를 실행할 수 있다.
브라우저에서 'localhost:3000' 으로 접속하여 기본적인 React 앱을 확인할 수 있다.
npm run start는 단순히 주소로 프로젝트만 실행하는 게 아니라, 파일을 수정하면 그걸 인식해서 바로바로 반영해 주는 기능도 있다. (이런 걸 개발 모드를 실행했다 라고 표현한다.)
8. 개발 모드 종료하기
터미널 창에 Ctrl+C 를 누르면 개발모드를 종료할 수 있다.
개발모드가 종료된 상태에서 브라우저로 돌아가 새로고침을 해보면 페이지가 동작하지 않는 것을 확인할 수 있다.
9. 다운받은 프로젝트 실행하기
프로젝트를 직접 생성하지 않고, 다운받아서 실행하려면 따로 설치해줘야 할 것이 있다.
직접 생성했을 때에는 리액트 실행에 필요한 파일들을 알아서 설치해줬는데 이 파일들을 node_modules 라는 폴더에 담겨 있다.
우선 다운받은 프로젝트의 압축을 푼 다음, 해당 폴더를 열어준다.
그리고 터미널에서 npm install 을 입력하면 죄측에 EXPLORER창에 node_modules 라는 폴더가 만들어진 것은 볼 수 있다.
이제 npm start 명령어를 통해서 실행하면 된다.
10. 리액트 개발자 도구 설치하기
google에 react developer tools 검색한 후 Chrome에 추가를 눌러 설치한다.
해당 툴은 리액트로 개발된 프로젝트의 구조를 좀 더 자세하게 살펴보는 도구이다.
퍼즐 모양을 눌러 설치가 되었는지 확인할 수 있다.
리액트 페이지를 새로고침하면 Components 와 Profiler 가 새로 생긴 것을 확인 할 수 있다.
Components와 Profiler는 리액트로 만들어진 웹페이지에서만 나타난다.
Components는 컴포넌트 단위로 확인할 수 있다.
