React – React 시작하기 – 개발 환경 설정 – 2 – CRA로 프로젝트 생성

작성자 wooah
React – React 시작하기 – 개발 환경 설정 – 2 – CRA로 프로젝트 생성

React – React 시작하기 – 개발 환경 설정 – 2 – CRA로 프로젝트 생성

안녕하세요! 😊 오늘은 React 입문자에게 가장 익숙하고 안전한 출발선인 **Create React App (CRA)**을 이용해 프로젝트를 직접 생성해보는 방법을 소개해드릴게요.

이건 마치 요리할 때 미리 손질된 재료 세트를 받는 밀키트 같아요! 복잡한 준비 없이도 바로 코딩을 시작할 수 있는 환경을 만들어준답니다. React를 처음 접하시는 분들에게는 최적의 첫걸음이에요!

1. CRA란 무엇인가요?

**Create React App (CRA)**은 Meta(구 Facebook)에서 공식으로 제공하는 React 프로젝트 생성 도구입니다.

  • 복잡한 설정 없이도 단 한 줄의 명령어로 React 개발 환경을 세팅할 수 있어요.
  • 내부적으로 Webpack, Babel, ESLint 등의 도구가 자동으로 설정되어 있어서, 개발자는 로직 구현에만 집중할 수 있어요.

🙌 “React 프로젝트, 직접 환경 구성하긴 너무 복잡해요…” → 걱정 마세요! CRA가 다 해줍니다!

2. 사전 준비 사항

CRA를 사용하려면 Node.js와 npm이 설치되어 있어야 합니다.

설치 여부는 아래 명령어로 확인할 수 있어요:

node -v
npm -v

버전이 출력되면 설치 완료! 만약 설치되어 있지 않다면, Node.js 공식 웹사이트에서 LTS 버전을 받아 설치해주세요.

3. CRA로 프로젝트 생성하기

터미널(또는 명령 프롬프트)에서 아래 명령어를 입력해보세요:

npx create-react-app my-app

여기서 npx는 npm 5.2 이상에서 제공하는 실행 도구로, create-react-app을 글로벌로 설치하지 않고도 실행 가능하게 해줘요.

작동 원리 요약:

  • npx가 create-react-app을 임시로 받아 실행
  • 내부적으로 Webpack, Babel 등 설정 생성
  • my-app 폴더에 React 프로젝트 구조가 자동 구성됨

실행 화면 예시:

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

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

Success! Created my-app at /Users/username/my-app

완료되면 my-app이라는 폴더가 생성되어 있고, 그 안에 모든 파일이 준비되어 있어요.

4. 폴더 구조 살펴보기

my-app/
├── node_modules/     # 설치된 모든 패키지
├── public/           # index.html 및 정적 파일
│   └── index.html    # 앱이 렌더링될 HTML 템플릿
├── src/              # 우리가 작업할 코드 영역
│   ├── App.css       # 컴포넌트 스타일
│   ├── App.js        # 메인 컴포넌트
│   ├── index.js      # ReactDOM이 App을 연결
├── package.json      # 프로젝트 설정 및 의존성

🧩 React 앱의 진입점은 src/index.js, 실제 화면 구성은 src/App.js 에서 시작해요.

5. 프로젝트 실행하기

아래 명령어로 개발 서버를 실행해볼게요:

cd my-app
npm start

그러면 브라우저가 자동으로 열리면서 http://localhost:3000 주소에서 React 앱이 실행됩니다.

CRA 실행 화면 예시

화면에는 Edit src/App.js and save to reload.라는 문구가 보일 거예요. 이건 우리가 App.js 파일을 수정하면 실시간으로 반영된다는 것을 알려주는 메시지예요!

6. 간단한 수정해보기

이제 우리가 직접 내용을 바꿔볼까요?

✍️ src/App.js 파일 수정:

function App() {
  return (
    <div className="App">
      <h1>나의 첫 번째 React 앱 ✨</h1>
      <p>CRA로 생성했어요!</p>
    </div>
  );
}

저장 후 브라우저를 확인해보세요! 화면에 바뀐 내용이 즉시 반영되었을 거예요. 바로 이게 CRA의 기본 HMR(Hot Module Replacement) 기능 덕분이에요!

7. TypeScript 버전으로 만들고 싶다면?

React는 TypeScript도 아주 잘 지원하고 있어요. 아래처럼 템플릿을 지정해주면 됩니다:

npx create-react-app my-ts-app --template typescript

그러면 *.ts / *.tsx 파일로 구성된 프로젝트가 만들어져요.

8. CRA가 설치해주는 주요 패키지

패키지 설명
react React 라이브러리의 본체
react-dom 브라우저에 React 컴포넌트를 렌더링하는 기능
react-scripts CRA가 사용하는 모든 설정과 스크립트를 모아놓은 패키지
web-vitals 성능 측정을 위한 도구 (선택적 사용)

9. 자주 사용하는 명령어 요약

명령어 설명
npm start 개발 서버 실행
npm run build 배포용 파일 생성 (압축, 최적화됨)
npm test 테스트 실행 (기본은 Jest)
npm run eject CRA 숨겨진 설정을 모두 공개 (주의: 되돌릴 수 없음!)

10. 주의할 점 정리

주의사항 설명
설정을 직접 건드릴 수 없음 기본 설정에 불만이 생기면 eject 해야 하며, 되돌릴 수 없어요
느린 빌드 속도 프로젝트가 커질수록 빌드 속도가 느려질 수 있어요
최신 기능 한계 Vite나 Next.js보다 최신 기술 적용이 느릴 수 있어요
중복된 기능 웹팩 설정이나 Babel 등을 직접 다루고 싶다면 CRA는 너무 제한적일 수 있어요

마무리하며

CRA는 React를 처음 접하는 분들에게 안전하고 빠르게 프로젝트를 시작할 수 있는 가장 좋은 선택지입니다. 복잡한 설정 없이 곧바로 React를 만지고, 코드를 작성해볼 수 있기 때문에 학습에만 집중할 수 있어요!

“개발을 시작하려고 마음은 먹었는데 어디서부터 손대야 할지 모르겠어요…”
그럴 때는 CRA로 한 발 내딛어 보세요. 👣

다음 글에서는 Vite로 React 프로젝트를 생성하는 방법을 함께 배워볼게요! 최신 도구의 매력을 느껴보고 싶다면 절대 놓치지 마세요! 🔥

답글 남기기