[React] 개발 환경 설정하기

1. Node.js와 npm 설치 확인

React 애플리케이션 개발을 시작하기 전에, Node.js와 npm(Node.js 패키지 매니저)이 설치되어 있어야 합니다. 터미널 또는 커맨드 프롬프트에서 다음 명령어를 입력하여 설치 여부와 버전을 확인할 수 있습니다.

node -v 
npm -v

Node.js가 설치되어 있지 않다면, Node.js 공식 웹사이트에서 다운로드하여 설치하세요.

2. Create React App 설치

Create React App은 React 개발 환경을 빠르게 설정할 수 있게 도와주는 도구입니다. 다음 명령어를 사용하여 글로벌하게 설치할 수 있습니다.

npx create-react-app my-app

여기서 my-app은 새로 생성할 프로젝트의 이름입니다. 이 명령어는 my-app 디렉토리 안에 React 개발 환경을 자동으로 설정합니다.

3. 개발 서버 시작

프로젝트 디렉토리로 이동한 후, 개발 서버를 시작합니다.

cd my-app 
npm start

이 명령어는 개발 모드에서 React 애플리케이션을 실행하며, 기본적으로 http://localhost:3000 주소로 애플리케이션에 접근할 수 있게 합니다.

4. 코드 에디터 설치

React 애플리케이션 개발을 위한 코드 에디터를 설치합니다. Visual Studio Code, Atom, Sublime Text 등 다양한 옵션이 있습니다. Visual Studio Code는 자바스크립트와 React 개발에 유용한 확장 프로그램을 많이 지원합니다.

5. React 개발 확장 프로그램 설치

Visual Studio Code를 사용하는 경우, React 개발을 용이하게 해주는 확장 프로그램을 설치할 수 있습니다. 예를 들어, ES7 React/Redux/GraphQL/React-Native snippets와 같은 확장 프로그램은 React 컴포넌트와 훅 코드를 빠르게 작성할 수 있도록 도와줍니다.

이러한 단계를 완료하면, React 개발 환경 설정이 완료됩니다. 이제 React 컴포넌트를 생성하고 애플리케이션을 개발하기 시작할 수 있습니다. React 개발의 기본을 익히고, 다양한 기능을 탐색하며 프로젝트를 진행하세요.