icon안동민 개발노트

개발 환경 설정 (Node.js, npm, Create React App)

 React 개발을 시작하기 위해서는 적절한 개발 환경을 설정해야 합니다.

 이 절에서는 React 애플리케이션 개발에 필요한 도구들을 설치하고 첫 프로젝트를 생성하는 과정을 단계별로 안내합니다.

1. Node.js 및 npm 설치

 Node.js는 JavaScript 런타임 환경이며, npm(Node Package Manager)은 JavaScript 라이브러리를 관리하는 도구입니다.

 설치 과정

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

 설치 확인

 터미널(맥 OS) 또는 명령 프롬프트(윈도우)를 열고 다음 명령어를 입력합니다.

node --version
npm --version

 각 명령어 실행 후 버전 번호가 표시되면 설치가 정상적으로 완료된 것입니다.

 Node.js와 npm의 역할

  • Node.js : 서버 사이드 JavaScript 실행 환경을 제공합니다. React 개발 시 빌드 도구와 개발 서버를 실행하는 데 사용됩니다.
  • npm : 프로젝트에 필요한 외부 라이브러리를 쉽게 설치하고 관리할 수 있게 해줍니다.

2. Create React App 사용하기

 Create React App은 React 애플리케이션을 빠르게 시작할 수 있게 해주는 공식 도구입니다.

 프로젝트 생성

  1. 터미널을 열고 프로젝트를 생성할 디렉토리로 이동합니다.
  2. 다음 명령어를 실행하여 새 React 프로젝트를 생성합니다.
npx create-react-app my-react-app
  • npx는 npm 5.2+ 버전부터 제공되는 도구로, 패키지를 설치하지 않고 실행할 수 있게 해줍니다.
  • my-react-app은 프로젝트 이름이며, 원하는 이름으로 변경할 수 있습니다.
  1. 프로젝트 생성이 완료되면 다음 명령어로 프로젝트 디렉토리로 이동합니다.
cd my-react-app

 프로젝트 실행

 프로젝트 디렉토리에서 다음 명령어를 실행하여 개발 서버를 시작합니다.

npm start

 이 명령어를 실행하면 브라우저에서 http://localhost:3000으로 새 React 애플리케이션이 열립니다.

 Create React App의 역할과 장점

  • 프로젝트 구조 자동 생성 : 최적화된 구조로 프로젝트를 설정합니다.
  • 개발 서버 제공 : 실시간으로 변경 사항을 확인할 수 있는 개발 환경을 제공합니다.
  • 빌드 자동화 : 프로덕션 배포를 위한 최적화된 빌드 프로세스를 제공합니다.
  • 모던 JavaScript 지원 : 최신 JavaScript 문법을 사용할 수 있게 해줍니다.

3. 프로젝트 구조 이해하기

 Create React App으로 생성된 프로젝트의 주요 파일과 디렉토리

  • public/index.html : 애플리케이션의 진입점 HTML 파일
  • src/index.js : JavaScript 진입점 파일
  • src/App.js : 메인 React 컴포넌트
  • package.json : 프로젝트 의존성 및 스크립트 정의 파일

4. 코드 에디터 설정

 효율적인 개발을 위해 적절한 코드 에디터를 사용하는 것이 좋습니다. Visual Studio Code는 React 개발에 널리 사용되는 에디터입니다.

  1. Visual Studio Code 웹사이트에서 에디터를 다운로드하고 설치합니다.
  2. React 개발에 유용한 확장 프로그램을 설치합니다.
  • ESLint : 코드 품질 검사 도구
  • Prettier : 코드 포맷팅 도구
  • React Snippets : React 코드 조각 제공

 이제 React 개발을 위한 기본적인 환경 설정이 완료되었습니다.

 Node.js와 npm을 설치하고, Create React App을 사용하여 새 프로젝트를 생성했으며, 개발 서버를 실행하는 방법을 배웠습니다.

 이러한 도구들은 React 개발 과정을 더욱 효율적이고 편리하게 만들어줍니다.

 다음 절에서는 이렇게 설정한 환경을 바탕으로 실제 React 애플리케이션을 개발하는 방법에 대해 학습하게 될 것입니다.

이전으로다음으로