React spa 개발환경 설정 (윈도우환경)

React spa 개발환경 설정 (윈도우환경)

 

1. node 설치

  - https://nodejs.org/ 에 접속하여 최신 버전 다운로드 / 설치

 

 

2. create-react-app 설치

  - 윈도우 터미널로 이동하여 아래 명령어로 설치

  - npm install -g create-react-app   

 

3. 내 앱 폴더 생성 및 앱 생성

  - 윈도우 터미널로 이동(윈도우키+R 누르고 cmd 입력)하여 아래 명령어로 설치

    1) d드라이브에 node_app 폴더를 만들고 이 안에 앱들을 생성하려한다.

       mkdir node_app

       cd node_app

    2) sample 앱 설치 (이름은 자유롭게)

       create-react-app sample   (typescript기반으로 생성하려면 "npx create-react-app sample  --typescript" 실행)

       - 한참 설치하는 시간이 걸린다.

       - cd sample 

       - dir 실행하여 설치가 잘 됐는지 확인

          위 설치 완료 후 아래와 같은 메세지가 떠 있고, sample 디렉토리 안에 src 가 생성이 안되어 있으면

           A template was not provided. This is likely because you're using an outdated version of create-react-app. 
           Please note that global installs of create-react-app are no longer supported.

       - npm update create-react-app 업데이트 하거나 npm install create-react-app  로 설치 후 다시 진행한다.

         (2번에서 -g 옵션으로 글로벌 설치 했으나 더이상 안된다는것 같다. 앱마다 따로 설치해 줘야 하는듯....)

 

4. sample 앱 실행

       cd sample       
       npm start

       - 브라우저가 자동으로 실행되며, 아래와 같은 화면이 브라우저로 뜨면 성공...

       - url에는 http://localhost:3000/ 가 입력되어 있다. 

         (기본포트가 3000 - 변경하려면 npm start 하기 전에 `SET PORT=원하는포트` 로 포트 변경)

 

 

       - 이제 개발 시작하면 된다. ..--- 에디터 설치하러 가자...

 

 

5. vscode설치

    - https://code.visualstudio.com/에 방문하여 최신버전 설치