React(1) 프로젝트 만들기

npx create-react-app my-app

 

이 명령어로 my-app이라는 폴더에 React 프로젝트 뼈대 만들었다

자동으로 필요한 패키지들(1325개)도 설치됐고,

이제 cd my-app && npm start만 하면 바로 브라우저에서 실행도 가능

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
create-react-app is deprecated.

You can find a list of up-to-date React frameworks on react.dev
For more info see:https://react.dev/link/cra

This error message will only be shown once per install.

Creating a new React app in /Users/leesoomin/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1325 packages in 51s

269 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 18 packages, and changed 1 package in 4s

269 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1343 packages in 2s

269 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (3 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created my-app at /Users/leesoomin/my-app
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 my-app
  npm start

Happy hacking!
npm notice
npm notice New minor version of npm available! 11.3.0 -> 11.4.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.2
npm notice To update run: npm install -g npm@11.4.2
npm notice

 

✅ 경고메세지

1. Deprecated 경고 (더 이상 지원 안 됨)

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory...
npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
...
👉 create-react-app 내부에서 사용하는 옛날 라이브러리들이 이제는 더 이상 업데이트도 안 되고 보안도 안 된다는 경고
이 방식은 이제 추천되지 않는 방식이라는 뜻

 

2. create-react-app이 더 이상 추천되지 않음

create-react-app is deprecated.
You can find a list of up-to-date React frameworks on react.dev
👉 React 공식 홈페이지에서도 create-react-app은 낡은 방식이라고 한다
대신에 요즘은 Vite, Next.js, Remix 같은 도구들을 더 추천한다
하지만 React 입문 단계에선 create-react-app으로 시작해도 충분히 괜찮고
나중에 익숙해지면 Vite로 넘어가면 된다

 

3. 보안 취약점 경고 (vulnerabilities)

9 vulnerabilities (3 moderate, 6 high)
To fix, run: npm audit fix --force
👉 라이브러리 중 일부에 보안 관련 경고가 있다는 뜻
학습용 프로젝트에서는 크게 문제 X

그래도 한 번 고쳐보고 싶다면 ⬇️
npm audit fix --force
* 일부 패키지가 깨질 수도 있으니 조심

 

✅ 실행

cd my-app
npm start

Compiled successfully!

You can now view my-app in the browser.

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

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

webpack compiled successfully

 

🧠 용어 뜻

localhost:3000	내 컴퓨터 안에서만 열리는 테스트용 주소 (3000번 포트 사용)
On Your Network	같은 Wi-Fi에 있는 다른 기기에서 이 주소로 접속하면 React 앱이 보인다
development build	지금 상태, 빠르지만 최적화는 안 되어 있음
production build	실제 배포용으로 최적화된 코드 (npm run build로 만들 수 있음)
webpack compiled	React 앱을 브라우저가 이해할 수 있게 코드로 번역해준 도구가 성공적으로 작동했다는 뜻