공유된 따라하기 · React

React 개발 환경의 진화 — CDN에서 번들링까지

대상 React CDN 방식으로 render() 와 createElement() 를 사용해 본 사람

목표 브라우저 CDN 방식의 한계를 직접 경험하고, Node.js 기반 번들링 환경으로 전환하는 이유를 실습으로 이해한다

완성물 nodeprj-for-react/ 폴더에서 npm run dev 명령으로 실행되는 번들링된 React 앱

Node.js 가 설치되어 있어야 합니다. 이전 따라하기에서 React CDN 으로 ReactDOM.render() 와 React.createElement() 를 사용해 본 경험이 필요합니다.

STEP 1 / 11Node.js 프로젝트 초기화

0개 완료 · 11개 남음

React 공식 개발 환경은 Node.js 기반입니다. 먼저 프로젝트 폴더를 만들고 package.json 을 생성해 Node.js 프로젝트로 등록해 볼게요.

1-1. 프로젝트 폴더 생성 및 이동

터미널에서:

mkdir nodeprj-for-react
cd nodeprj-for-react

1-2. package.json 생성

npm init -y

1-3. package.json 확인

파일: package.json

생성된 파일의 "name" 필드가 nodeprj-for-react 로 설정되어 있는지 확인하세요.

✅ 확인

터미널에 Wrote to .../package.json 메시지가 출력됩니다.
package.json 파일이 폴더에 생성됩니다.

🎓 newlec 쌤의 코멘트

이제부터 우리가 작성하는 코드는 브라우저가 직접 읽는 것이 아니라, Node.js 환경에서 처리된 후 브라우저로 전달됩니다. package.json 은 이 프로젝트의 '신원증명' 격으로, 어떤 라이브러리를 사용하고 어떻게 실행할지 정의하는 파일입니다. CDN 방식에서는 이 파일이 필요 없었지만, 이제부터는 모든 의존성 관리의 중심이 됩니다.

❌ 자주 하는 실수

증상	원인	해결
`npm: command not found`	Node.js 미설치 또는 PATH 미설정	Node.js LTS 설치 후 터미널 재시작
`EEXIST: file already exists`	이미 `package.json` 이 존재함	기존 파일을 삭제하거나 `npm init` 을 다른 폴더에서 실행

📝 이 단계의 핵심

React 개발은 Node.js 프로젝트로 시작합니다.
package.json 은 프로젝트의 의존성과 스크립트를 관리하는 핵심 파일입니다.

이 주소는 글의 저작자가 공개한 링크입니다. 뉴렉처 스터디의 다른 자료는 로그인 후 볼 수 있어요.