[react] 노마드코더 영화웹서비스 제작 1.0 리액트앱 생성과 실행

브라우저가 섹시한 코드를 받아들이지 못하므로 못생긴 코드로 바꿔 줄 필요가 있다. 이전에는 WebPack과 babel 다운로드 해야하고 그다음 리액트를 컴파일 해줘야했는데, 이젠 create-react-app 이 react web app을 바로 셋업해주는 덕분에 그럴 필요가 없다고 한다.

1. 원하는 디렉토리로 바꾼다.
   cd (원하는 dir)

2. 리액트 어플리케이션 만들기
   npx create-react-app (폴더이름)

3. 에디터 열기
   code (폴더이름)

4. README.md
   다 지우고 우리 앱에 대한 설명 적기

#movie-app-2021
react JS fundamentals course 2021

5. package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
    ❌"test": "react-scripts test",
    ❌"eject": "react-scripts eject"
  },

test와 eject는 신경쓰지 않고 start와 build만 있으면 된다며 지우라고 했다.

6. npm start
   새 터미널을 열고 npm start을 명령하면 창이 열린다.
   

Compiled successfully!

You can now view movie-app-2021 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.17:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

한편 터미널에는 잘 컴파일 되었다고 이렇게 뜨면서 우리에게 두가지 url을 준다.
Local: http://localhost:3000 ➡️ 내컴퓨터
On Your Network: http://192.168.0.17:3000 ➡️ wifi