[React] 개발환경 설정

-  VS Code 설치

      개발 환경 IDE는 VS Code를 사용하겠습니다.

     

      본인 PC OS에 맞게 설치해주시면 되겠습니다.

 

      VS Code 다운로드 공식 홈페이지 : code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

- Node.JS 설치

    React는 Node.JS 기반 JavaScript 라이브러리입니다. 

    

    본인 PC OS에 맞게 설치해주시면 되겠습니다.

 

    Node.JS 다운로드 공식 홈페이지 : nodejs.org/en/download/

Download | Node.js

   보통 LTS 안정적인 버전으로 설치를 추천합니다. :)

 

   설치를 완료했다면, 터미널을 열어 확인해보겠습니다. 보통 Node.JS를 설치하게 되면 npm 기본적으로 같이 설치가 된다.

 

 

버전 확인 Node & npm

   이미지와 같이 버전이 표시가 잘되면 설치가 잘 된겁니다.

 

- React Project 생성

   React 프로젝트 폴더를 생성해준다. (이름은 편하게 지어주셔도 됩니다.)

   해당 프로젝트에 React 프로젝트를 생성을 하겠습니다. VS Code IDE를 실행시키고 방금 만들었던 React 폴더를 선택해줍니다.

 

 

Open Folder 선택

 

   터미널을 실행해서 프로젝트를 생성해 보겠습니다.

 

 

Terminal 실행

  공식 홈페이지 자료를 확인해보면 npx 명령어를 통해 프로젝트를 생성할 수 있습니다.

 

  공식 홈페이지 자료 : ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

npx create-react-app <Project 이름>

  그럼 프로젝트를 생성해 보겠습니다.

   

  명령어 : npx create-react-app my_project

 

기본 폴더 구조

 명령어를 통해 프로젝트를 만들었다면 위 이미지와 같은 폴더 구조를 확인할 수 있습니다.

 

 그럼 프로젝트를 실행해 볼까요?

 

 cd my_project << 우리가 생성한 프로젝트로 이동

 저는 yarn을 사용하고 있어서 yarn start 명령어를 사용합니다. npm을 사용한다면 npm run start라고 입력하시면 됩니다.

 

 yarn start

 

 브라우저의 localhost:3000으로 우리가 만든 프로젝트가 실행된 것을 확인할 수 있습니다.

 

localhost:3000

 

  다음 시간부터는 React 강좌에 대해서 강의를 진행하겠습니다.