개발 환경 설정 (Node.js, npm, Create React App)
리액트 개발을 시작하기 위해서는 적절한 개발 환경을 설정해야 합니다.
이 절에서는 리액트 애플리케이션 개발에 필요한 도구들을 설치하고 첫 프로젝트를 생성하는 과정을 단계별로 안내합니다.
1. Node.js 및 npm 설치
Node.js는 JavaScript 런타임 환경이며, npm(Node Package Manager)은 JavaScript 라이브러리를 관리하는 도구입니다.
설치 과정
- Node.js 공식 웹사이트에 접속합니다.
- LTS(Long Term Support) 버전을 다운로드합니다.
- 다운로드한 설치 파일을 실행하고 안내에 따라 설치를 완료합니다.
설치 확인
터미널(맥 OS) 또는 명령 프롬프트(윈도우)를 열고 다음 명령어를 입력합니다.
node --version
npm --version각 명령어 실행 후 버전 번호가 표시되면 설치가 정상적으로 완료된 것입니다.
Node.js와 npm의 역할
- Node.js : 서버 사이드 JavaScript 실행 환경을 제공합니다. 리액트 개발 시 빌드 도구와 개발 서버를 실행하는 데 사용됩니다.
- npm : 프로젝트에 필요한 외부 라이브러리를 쉽게 설치하고 관리할 수 있게 해줍니다.
2. Create React App 사용하기
Create React App은 리액트 애플리케이션을 빠르게 시작할 수 있게 해주는 공식 도구입니다.
프로젝트 생성
- 터미널을 열고 프로젝트를 생성할 디렉토리로 이동합니다.
- 다음 명령어를 실행하여 새 리액트 프로젝트를 생성합니다.
npx create-react-app my-react-appnpx는 npm 5.2+ 버전부터 제공되는 도구로, 패키지를 설치하지 않고 실행할 수 있게 해줍니다.my-react-app은 프로젝트 이름이며, 원하는 이름으로 변경할 수 있습니다.
- 프로젝트 생성이 완료되면 다음 명령어로 프로젝트 디렉토리로 이동합니다.
cd my-react-app프로젝트 실행
프로젝트 디렉토리에서 다음 명령어를 실행하여 개발 서버를 시작합니다.
npm start 이 명령어를 실행하면 브라우저에서 http://localhost:3000으로 새 리액트 애플리케이션이 열립니다.
Create React App의 역할과 장점
- 프로젝트 구조 자동 생성 : 최적화된 구조로 프로젝트를 설정합니다.
- 개발 서버 제공 : 실시간으로 변경 사항을 확인할 수 있는 개발 환경을 제공합니다.
- 빌드 자동화 : 프로덕션 배포를 위한 최적화된 빌드 프로세스를 제공합니다.
- 모던 JavaScript 지원 : 최신 JavaScript 문법을 사용할 수 있게 해줍니다.
3. 프로젝트 구조 이해하기
Create React App으로 생성된 프로젝트의 주요 파일과 디렉토리
public/index.html: 애플리케이션의 진입점 HTML 파일src/index.js: JavaScript 진입점 파일src/App.js: 메인 리액트 컴포넌트package.json: 프로젝트 의존성 및 스크립트 정의 파일
4. 코드 에디터 설정
효율적인 개발을 위해 적절한 코드 에디터를 사용하는 것이 좋습니다. Visual Studio Code는 리액트 개발에 널리 사용되는 에디터입니다.
- Visual Studio Code 웹사이트에서 에디터를 다운로드하고 설치합니다.
- 리액트 개발에 유용한 확장 프로그램을 설치합니다.
- ESLint : 코드 품질 검사 도구
- Prettier : 코드 포맷팅 도구
- React Snippets : 리액트 코드 조각 제공
이제 리액트 개발을 위한 기본적인 환경 설정이 완료되었습니다.
Node.js와 npm을 설치하고, Create React App을 사용하여 새 프로젝트를 생성했으며, 개발 서버를 실행하는 방법을 배웠습니다.
이러한 도구들은 리액트 개발 과정을 더욱 효율적이고 편리하게 만들어줍니다.
다음 절에서는 이렇게 설정한 환경을 바탕으로 실제 리액트 애플리케이션을 개발하는 방법에 대해 학습하게 될 것입니다.