리액트(React) 개발, 첫걸음은 환경 설정부터! 완벽 가이드

리액트(React)는 현대적인 웹 애플리케이션 개발에 필수적인 도구로 자리매김했습니다. 하지만 이 강력한 라이브러리를 제대로 활용하기 위한 첫걸음은 바로 개발 환경 구축입니다. 오늘 이 글에서는 리액트 프로젝트를 효율적으로 생성하고, 실행하며, 관리할 수 있도록 여러분의 컴퓨터를 완벽하게 준비하는 방법을 살펴보겠습니다.

---

Node.js와 npm, 왜 필요할까요?

리액트 개발을 시작하기 전에 가장 먼저 이해하고 설치해야 할 것이 Node.js와 npm입니다. 이 두 가지는 리액트 개발의 핵심 기반이 됩니다.

Node.js란?

Node.js는 구글 크롬의 V8 엔진 위에 구축된 자바스크립트 런타임입니다. 쉽게 말해, 웹 브라우저 밖에서도 자바스크립트 코드를 실행할 수 있게 해주는 환경이죠. 서버 사이드 개발, 빌드 도구 실행 등 다양한 분야에서 활용됩니다.

npm이란?

npm은 Node Package Manager의 약자로, Node.js와 함께 번들로 제공됩니다. 프로젝트에서 필요한 수많은 패키지나 라이브러리를 관리하는 데 도움을 줍니다. 마치 스마트폰의 앱스토어처럼, 필요한 기능을 손쉽게 다운로드하고 업데이트할 수 있도록 해주는 도구라고 생각하면 됩니다.

Node.js 및 npm 설치 단계

1. Node.js 다운로드
   Node.js 공식 웹사이트에서 권장되는 LTS(Long Term Support) 버전을 다운로드합니다. 사용하는 운영체제(Windows, macOS, Linux)에 맞는 설치 지침을 따르세요.
2. 설치 확인
   설치 후 터미널(또는 명령 프롬프트)을 열고 다음 명령어로 확인합니다.설치된 Node.js 버전이 출력됩니다.
3. node -v
4. npm 버전 확인
   npm도 올바르게 설치되었는지 확인합니다.npm의 버전 번호가 표시되면 설치가 완료된 것입니다.
5. npm -v

---

728x90

Create React App으로 새로운 애플리케이션 생성하기

Node.js와 npm이 준비되었다면, 이제 Create React App을 사용해 새로운 프로젝트를 생성할 수 있습니다. 이 도구는 리액트 개발에 필요한 기본 설정을 자동으로 구성해주어, 복잡한 빌드 환경 걱정 없이 바로 코드를 작성할 수 있도록 돕습니다.

애플리케이션 생성 절차

1. 터미널 또는 명령 프롬프트를 엽니다.
2. 다음 명령어로 새로운 리액트 앱을 생성합니다.여기서 my-app은 원하는 프로젝트 이름으로 변경할 수 있습니다.
3. npx create-react-app my-app
4. 새로 생성된 애플리케이션 디렉토리로 이동합니다.
5. cd my-app
6. 개발 서버를 실행합니다.브라우저가 자동으로 열리며 http://localhost:3000에서 기본 페이지가 표시됩니다. 이는 환경 설정이 정상적으로 완료되었음을 의미합니다.
7. npm start

---

리액트 프로젝트 구조 이해하기

Create React App으로 생성된 폴더 구조는 아래와 같습니다.

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── index.css
    └── index.js

주요 폴더 및 파일

• node_modules/: npm으로 설치된 모든 패키지와 라이브러리가 포함됩니다. 직접 수정하지 않는 것이 좋습니다.
• public/
  • favicon.ico: 웹사이트 파비콘
  • index.html: 리액트 애플리케이션의 뼈대가 되는 HTML 파일
  • manifest.json: PWA(Progressive Web App) 설정 파일
  • 정적 자산(이미지, 아이콘 등)을 보관하는 곳
• src/
  • index.js: 애플리케이션의 진입점(entry point)
  • App.js: 루트 컴포넌트(root component)
  • App.css / index.css: 컴포넌트 및 전역 스타일 정의

이 구조를 잘 이해하면 협업할 때도 코드 관리가 훨씬 쉽고, 프로젝트 확장성도 높일 수 있습니다.

---

결론: 리액트 개발의 튼튼한 기반 다지기

리액트 개발 환경을 설정하는 과정은 크게 세 단계입니다.

1. Node.js와 npm 설치
2. Create React App으로 프로젝트 생성
3. 프로젝트 구조 이해

이 과정을 통해 튼튼한 기반 위에서 효율적인 리액트 개발을 시작할 수 있습니다. 이제 환경 설정이 끝났으니, 다음 단계에서는 리액트 컴포넌트와 상태 관리에 대해 배워보는 것이 좋습니다.