ABCD

react 개발 환경 구축 본문

DEVELOPMENT STUDY/GDGM(기조하시)

react 개발 환경 구축

카메사마 2024. 6. 26. 20:47

🐢 우선, Node.js와 npm(Node Package Manager)을 설치해야 한다.

Node.js 설치하기(https://nodejs.org/en)

설치 후, 각각의 버전을 확인한다.

 

해당 명령어로 새 리액트 앱을 생성한다. (good-day-good-message는 내가 만들 리액트 앱의 이름이다.)

 

해당 폴더에 들어갔을 때, 이렇게 여러 폴더와 파일을 확인할 수 있다.

 

이제 리액트 앱을 실행한다.

여기서 주의할 점은 꼭!! 리액트 앱을 생성한 해당 폴더로 이동하여 그 아래에서 명령어를 입력해야 한다는 것!!

cd good-day-good-message
npm start

해당 명령어로 개발 서버를 시작한다.

 

해당 명령어를 입력하면, 브라우저가 자동으로 열린다. (localhost:3000)

3000포트가 기본이다. (아마 무엇인가가 3000포트에서 실행되고 있으면 포트번호는 바뀔 수 있다.)


🐢 Visual Studio Code에서 해당 파일 앱을 열기

VSC에서 해당 파일을 열고 터미널을 켜서 해당 명령어를 입력하면 위와 같은 화면과 브라우저가 자동으로 실행된다.

npm start