본문 바로가기
CodeIt_Sprint/React_초급

(1)React_초급_개발환경셋팅(Window)

by 코잼민 2024. 11. 21.

순서1_Node.js사이트 접속 => "LTS"버전으로 Download

링크 : https://nodejs.org/en

순서2_ 파일 설치 경로 : C드라이브 / Program Files 폴더 내 로지정

순서3_ 추가 프로그램 설치 여부 체크 박스 : 체크 X, Next

순서4_ cmd(명령프롬프트) 접속 => node.js와 npm 설치여부 확인

순서5_앞으로 React개발할 폴더를 원하는 위치에 생성 => vscode로 생성된 폴더 열기

※주의 : 대문자X, 소문자와 '_'로만 이름으로 설정해야함

순서6_vscode의 단축기(Ctrl + '`' key)로 터미널 열기

순서7_터미널에 react 프로젝트 생성 명령어 작성 : 

● React 프로젝트 생성 명령어 (Terminal)

npm init react-app .

● 작성 후, 왼쪽에 여러파일들, 폴더들이 생성됨 //생각보다 5분정도 걸림

순서8_터미널에 react 프로젝트 실행 명령어 작성 : 

● React 프로젝트 생성 명령어 (Terminal)

npm run start

*html문서에서 여는 웹페이지와 다르게 React 프로젝트는 Terminal명령어로 열어야 한다

순서9_개발모드를 종료하기

● React 프로젝트 개발 모드 종료 명령어 (Terminal) : Ctrl + Key C

주요 특징 :

  • html문서와 다르게 Terminal창에 "npm run start"로 웹페이지 열기
  • html문서와 다르게 html코드의 수정할 시, 바로바로 웹페이지 출력이 업데이트된다.