WeniVooks

검색
북마크 이동

React 베이스캠프

개발 환경 설정하기

1. 개발 환경 설정하기

React 개발을 시작하기 위해서는 몇 가지 도구들을 설치해야 합니다. 이번 장에서는 React 개발에 필요한 환경을 설정하는 방법을 알아보겠습니다.

1.1 필수 설치 프로그램
1.1.1 Node.js 설치

React 개발을 위해서는 Node.js가 필요합니다. Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경입니다.

  1. Node.js 공식 웹사이트에 접속합니다
  2. LTS(Long Term Support) 버전을 다운로드합니다
  3. 설치 파일을 실행하고 안내에 따라 설치를 완료합니다

설치가 완료되면 터미널(명령 프롬프트)에서 다음 명령어로 설치를 확인할 수 있습니다:

node --version
npm --version
node --version
npm --version
1.1.2 코드 에디터 설치

코드를 작성하기 위한 에디터가 필요합니다. Visual Studio Code(VS Code)를 추천합니다.

  1. VS Code 공식 웹사이트에 접속합니다
  2. 운영체제에 맞는 버전을 다운로드합니다
  3. 설치 파일을 실행하여 설치를 완료합니다
1.1.3 VS Code 확장 프로그램 설치

React 개발을 더 편리하게 하기 위한 확장 프로그램들을 설치합니다:

  • ES7+ React/Redux/React-Native snippets: React 코드 조각 제공
  • Prettier: 코드 자동 정렬
  • Auto Rename Tag: HTML/JSX 태그 자동 수정
  • Bracket Pair Colorizer: 괄호 색상 구분
1.2 React 프로젝트 생성하기
1.2.1 Create React App 사용하기

Create React App은 React 팀에서 제공하는 공식 도구로, 복잡한 설정 없이 React 프로젝트를 시작할 수 있게 해줍니다.

터미널에서 다음 명령어를 실행합니다:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start
npx create-react-app my-first-react-app
cd my-first-react-app
npm start

위 명령어들의 의미:

  • npx create-react-app my-first-react-app: 'my-first-react-app'이라는 이름의 React 프로젝트 생성
  • cd my-first-react-app: 생성된 프로젝트 폴더로 이동
  • npm start: 개발 서버 실행

명령어 실행 후 브라우저에서 http://localhost:3000에 접속하면 React 로고가 회전하는 화면을 볼 수 있습니다.

1.3 프로젝트 구조 이해하기

생성된 프로젝트의 주요 폴더와 파일들을 살펴보겠습니다:

my-first-react-app/
├── node_modules/      # 프로젝트 의존성 패키지들
├── public/           # 정적 파일들
│   ├── index.html    # 메인 HTML 파일
│   └── favicon.ico   # 파비콘
├── src/              # 소스 코드
│   ├── App.js        # 메인 컴포넌트
│   ├── App.css       # App 컴포넌트 스타일
│   ├── index.js      # 진입점 파일
│   └── index.css     # 전역 스타일
├── package.json      # 프로젝트 설정 및 의존성 정보
└── README.md         # 프로젝트 설명서
my-first-react-app/
├── node_modules/      # 프로젝트 의존성 패키지들
├── public/           # 정적 파일들
│   ├── index.html    # 메인 HTML 파일
│   └── favicon.ico   # 파비콘
├── src/              # 소스 코드
│   ├── App.js        # 메인 컴포넌트
│   ├── App.css       # App 컴포넌트 스타일
│   ├── index.js      # 진입점 파일
│   └── index.css     # 전역 스타일
├── package.json      # 프로젝트 설정 및 의존성 정보
└── README.md         # 프로젝트 설명서
1.3.1 주요 파일 설명
  • index.html: React 앱이 렌더링될 HTML 파일입니다. <div id="root"></div>가 React 앱의 진입점입니다.
  • index.js: JavaScript 진입점 파일로, React 앱을 DOM에 렌더링합니다.
  • App.js: 메인 React 컴포넌트입니다. 여기서부터 앱 개발을 시작합니다.
  • package.json: 프로젝트의 메타데이터와 의존성 패키지 정보를 담고 있습니다.
1.4 첫 번째 수정해보기

src/App.js 파일을 열고 다음과 같이 수정해보세요:

import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>안녕하세요, React!</h1>
      <p>React 학습을 시작합니다.</p>
    </div>
  );
}
 
export default App;
import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>안녕하세요, React!</h1>
      <p>React 학습을 시작합니다.</p>
    </div>
  );
}
 
export default App;

파일을 저장하면 브라우저가 자동으로 새로고침되고 변경사항이 반영됩니다. 이를 Hot Module Replacement(HMR)라고 합니다.

1.5 유용한 명령어들
1.5.1 개발 서버 실행
npm start
npm start
1.5.2 프로덕션 빌드
npm run build
npm run build
1.5.3 테스트 실행
npm test
npm test
1.5.4 설정 파일 추출 (주의: 되돌릴 수 없음)
npm run eject
npm run eject
1.6 정리

이번 장에서는 React 개발 환경을 설정하는 방법을 알아보았습니다. Node.js와 VS Code를 설치하고, Create React App을 사용하여 첫 번째 React 프로젝트를 생성했습니다. 다음 장에서는 JSX 문법에 대해 자세히 알아보겠습니다.

1.1 React란 무엇인가?1.3 첫 번째 React 프로젝트