2. React 설치 ( VS Code )

1. Node.js 다운로드

https://nodejs.org/ko/download/

위의 링크로 이동하여 Node.js LTS 버전을 다운로드합니다

자신의 컴퓨터 환경에 맞는 Installer를 다운받으면 됩니다.

다운로드 | Node.js

 다운로드 후 명령프롬프트(cmd)에서 'node -v', 'npm -v'를 입력하여 설치 및 버전확인을 합니다.

 

2. 프로젝트 생성 및 실행 (CRA - Create-React-App)

명령 프롬프트에서 프로젝트를 생성하고 싶은 폴더로 이동합니다.

 

이동 후 npx create-react-app (프로젝트 이름)을 입력하면 react 프로젝트가 생성이 됩니다.

생성이 완료 되었으면

 

cd (project name)

npm start

 

를 입력하면 프로젝트로 이동 후 react 프로젝트가 실행이 됩니다. 

( 기본 react 주소 : http://localhost:3000  )

명령프롬프트 Ctrl + C 입력 후 Y를 누르면 React를 종료할 수 있습니다.

( 위의 사진은 제가 임의적으로 Hello World를 입력한 것으로 초기 생성시 화면과 다르니 걱정하지 마세요 )

 

3. 비쥬얼 스튜디오 코드에서 프로젝트 실행

https://code.visualstudio.com/

위의 링크에서 Visual Studio Code를 다운로드 받습니다.

Visual Studio Code - Code Editing. Redefined

다운로드 후 File - Open Folder 선택 후 React 프로젝트를 생성한 경로를 선택하여 프로젝트를 엽니다.

 

정상적으로 프로젝트가 열리게 됩니다.

 

정상적으로 프로젝트가 열렸으면 상단 메뉴바의 View - Terminal ( 단축키 Ctrl + ` ) 를 선택합니다.

 

선택한 후 npm start 을 입력하면 Vs Code에서도 프로젝트 실행이 가능합니다.

 

프로젝트 실행 상태에서 VS Code App.js에서 수정 후 저장만 하면 브라우저에서 수정된 내용이 바로 적용됩니다.

 

참 편하죠?

 

이상으로 포스팅을 마치겠습니다.