[React]리액트 학습 기록 - React 시작 전 설정

🔗 React와 node.js의 연관

node.js는 리액트와 직접적으로 관련있는 기술은 아니다. node.js는 브라우저 밖에서 자바스크립트 코드가 실행할 수 있도록 하는 자바스크립트 런타임이다.

크리에이트 리액트 앱 툴을 위해 node.js가 필요하다.

node.js로 React 새로운 프로젝트 생성하기

1. 생성할 프로젝트 위치로 이동한다.

2. npx create-react-app 프로젝트명 코드를 통해 프로젝트를 생성해준다.
   

3. cd react-complete-guide를 통해 생성한 리액트 프로젝트로 이동한다.

4. 프로젝트 위치로 이동한 다음에 npm start를 통해 개발서버를 실행시켜준다.
   

5. start 해주면 자동적으로 브라우저에 localhost:3000 으로 연결이 된다. 만약 자동으로 연결되지 않으면 수동으로 접속해주면 된다.
   

6. 만약 서버를 종료하고 싶다면 ctrl + c 를 눌러주면 된다.
   

프로젝트에서 서버 구동하기 in Visual Studio Code

1. 비주얼 스튜디오 코드에서 프로젝트를 연다.
2. 메뉴 > 터미널 > 새터미널 이동
3. packge.json 에서 내가 원하는 설정을 한 뒤, 터미널에서 npm install을 실행해준다.
4. npm start로 서버를 구동해준다.
5. 구동을 멈추고 싶을 때는 ctrl+c 또는 터미널을 종료 시킨다.