React 개발, 첫걸음: 환경 설정부터 첫 앱 생성까지 완벽 가이드!

안녕하세요, 개발자 여러분!
오늘날 프론트엔드 개발의 대세 ReactJS에 입문하려는 분들을 위해 필수적인 첫 단계를 함께 밟아보려 합니다. 바로 React 개발 환경을 설정하고 첫 번째 React 애플리케이션을 생성하는 과정인데요. 이 과정이 제대로 되어야 앞으로의 React 여정이 순탄해지니, 저와 함께 차근차근 따라와 주시길 바랍니다.

---

React 개발의 핵심 도구: Node.js와 npm

React 애플리케이션을 개발하려면 몇 가지 핵심 도구가 필요합니다. 그중에서도 가장 중요한 두 가지는 Node.js와 npm입니다.

Node.js란 무엇인가요?

Node.js는 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 해주는 오픈 소스, 크로스 플랫폼 런타임 환경입니다.
쉽게 말해, JavaScript를 서버 애플리케이션에도 사용할 수 있게 만들어주는 기술이죠. 이벤트 기반의 비차단 I/O 모델을 채택해 가볍고 효율적이라는 장점도 있습니다.

실용적인 예시:
사용자 피드백을 받을 수 있는 웹 애플리케이션을 만든다고 가정해봅시다. Node.js를 활용하면 백엔드 코드를 JavaScript로 작성할 수 있어, 프론트엔드와 서버 모두 동일한 언어로 개발할 수 있습니다. 개발 과정이 단순해지고 생산성이 크게 향상됩니다.

npm이란 무엇인가요?

npm은 "Node Package Manager"의 약자로, Node.js의 기본 패키지 관리자입니다.
개발자는 npm을 통해 수많은 라이브러리와 프레임워크를 설치하고 관리할 수 있습니다. React 프로젝트에서 필요한 다양한 의존성(Dependency)을 쉽게 관리할 수 있게 해줍니다.

실용적인 예시:
React 프로젝트를 시작할 때 기본적으로 react와 react-dom이 필요합니다. 여기에 axios 같은 서드파티 패키지를 추가하려면 npm으로 간단히 설치할 수 있죠. 즉, npm은 방대한 오픈 소스 생태계로의 문을 여는 열쇠입니다.

---

728x90

Node.js 및 npm 설치 가이드

이제 직접 설치해 보겠습니다.

1. Node.js 다운로드
   • Node.js 공식 웹사이트 접속
   • 두 가지 버전 중 선택:
     • LTS (장기 지원): 안정적, 대부분의 사용자 권장
     • Current (최신 기능 포함): 새 기능 체험 가능, 다만 안정성은 LTS보다 낮음
   • 운영 체제에 맞는 설치 프로그램 다운로드
2. Node.js 설치 진행
   • 설치 프로그램 실행 후 다음 과정 진행
     1. 라이선스 동의
     2. 설치 경로 선택 (기본 권장)
     3. 구성 요소 선택 (기본 선택 권장: Node.js 런타임, npm 등)
     4. 필요 시 추가 개발 도구 설치 선택 (Python, Visual Studio Build Tools 등)
3. 설치 확인
   • 터미널/명령 프롬프트 실행 후 버전 확인

     node -v

     출력 예시: v16.x.x

   npm -v

   출력 예시: 8.x.x
4. 정상적으로 버전이 출력되면 설치 완료!

---

Create React App으로 첫 React 애플리케이션 생성

이제 Node.js와 npm이 준비되었으니, 첫 React 프로젝트를 만들어 보겠습니다.
Facebook에서 제공하는 Create React App(CRA)은 복잡한 초기 설정을 자동으로 처리해 주어, 코드 작성에 바로 집중할 수 있게 도와줍니다.

1. 앱 생성 준비

cd Documents/ReactProjects

작업할 디렉터리로 이동합니다.

2. Create React App 실행

npx create-react-app my-app

• npx: 전역 설치 없이 패키지를 실행할 수 있는 도구
• my-app: 프로젝트 이름 (원하는 이름으로 변경 가능)

이 명령어는 새로운 디렉터리를 만들고, React 프로젝트에 필요한 모든 파일과 구성을 자동으로 세팅합니다.

3. 개발 서버 시작

cd my-app
npm start

이제 브라우저가 자동으로 열리며, http://localhost:3000에서 첫 React 앱을 확인할 수 있습니다.
Edit src/App.js라는 메시지가 보인다면, 모든 준비가 끝난 것입니다!

---

마치며

React 개발 환경을 설정하는 것은 여정의 가장 중요한 첫걸음입니다.
오늘은 Node.js와 npm의 역할, 설치 방법, 그리고 Create React App으로 첫 프로젝트 생성까지 함께 살펴보았습니다.

이제 여러분은 상호작용적이고 강력한 UI를 만들 준비가 끝났습니다. React의 세계로 뛰어들어 멋진 애플리케이션을 만들어 보세요!