React 시작하기 + 포트 지정

1. 노드 14버전 이상 설치

 

2. cmd창에서 프로젝트 폴더를 만들고자 하는 경로 내로 들어가서 npx

npx create-react-app react_project

...
Created git commit.

Success! Created react_project at C:\Users\@@@@\@@@@\react_project
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react_project
  npm start

Happy hacking!
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice

C:\Users\@@@@\@@@@\react_project

C:\Users\@@@@\@@@@\react_project>npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> react_project@0.1.0 start
> react-scripts start

(node:33184) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:33184) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view react_project in the browser.

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

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

webpack compiled successfully

 

3. 위에 써있는대로 진행

// 내가 만든 폴더로 이동
cd react_project
 
// 실행
npm start

 

4. 포트 지정되어있는 경로로 가서 원하는 값으로 수정

// 포트 정보가 있는 파일 열기
// 경로 ...../react_project/node_modules/react-scripts/scripts/start.js
// line 55
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
# 3000부분을 원하는 포트 숫자로 수정

 

 

끝

 

이제 vscode로 src/app.js 폴더를 열어 수정 진행하면 된다.

라우터 등 추가하고싶은대로 추가해서 연결하면 진짜 끝