React 기초: 프로젝트 설치와 설정 방법 (2022+ 스타일)

가나톡ganaTOK
가나톡ganaTOK

React 기초: 프로젝트 설치와 설정 방법 (2022+ 스타일)

안녕하세요, 여러분! 오늘은 React 프로젝트를 설치하고 설정하는 방법에 대해 자세히 알아보겠습니다. 2020년 이후의 최신 방식으로 React 프로젝트를 세팅하는 방법을 step by step으로 설명해 드리겠습니다.

1. 필요한 도구 설치하기

1.1 Node.js 설치

먼저, Node.js를 설치해야 합니다. Node.js는 JavaScript 런타임 환경으로, React 개발에 필요한 여러 도구들을 사용할 수 있게 해줍니다.

  1. 구글에서 "Node.js"를 검색하고 공식 웹사이트에 접속합니다.
  2. 운영체제에 맞는 버전(Windows 또는 Mac)을 다운로드합니다.
  3. 다운로드한 설치 파일을 실행하고 설치를 완료합니다.

Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm은 JavaScript 라이브러리를 쉽게 설치하고 관리할 수 있게 해주는 도구입니다.

1.2 코드 에디터 설치

React 개발을 위한 코드 에디터로는 Visual Studio Code를 추천합니다.

  1. 구글에서 "Visual Studio Code"를 검색하고 공식 웹사이트에 접속합니다.
  2. 운영체제에 맞는 버전을 다운로드하고 설치합니다.

2. React 프로젝트 생성하기

이제 본격적으로 React 프로젝트를 생성해 보겠습니다.

  1. 원하는 위치에 작업 폴더를 생성합니다. (예: "react-class")
  2. Visual Studio Code를 실행하고 "파일 > 폴더 열기"를 선택하여 생성한 작업 폴더를 엽니다.
  3. Visual Studio Code에서 터미널을 엽니다. (상단 메뉴의 "터미널 > 새 터미널" 선택)
  4. 터미널에 다음 명령어를 입력합니다:
    npx create-react-app blog
    이 명령어는 "blog"라는 이름의 React 프로젝트를 생성합니다. "blog" 대신 원하는 프로젝트 이름을 사용할 수 있습니다.
  5. 설치가 완료될 때까지 기다립니다. 완료되면 초록색으로 "success" 메시지가 표시됩니다.

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

React 프로젝트가 생성되면 다음과 같은 폴더 구조가 만들어집니다:

  • node_modules: 프로젝트에 필요한 모든 라이브러리가 설치되는 폴더
  • public: 정적 파일들(이미지, favicon 등)을 저장하는 폴더
  • src: 실제 React 코드를 작성하는 폴더
  • package.json: 프로젝트 설정 및 의존성 정보를 담고 있는 파일

주요 파일들:

  1. public/index.html: 실제 메인 HTML 파일
  2. src/index.js: React 애플리케이션의 진입점
  3. src/App.js: 메인 React 컴포넌트

4. 개발 서버 실행하기

프로젝트를 생성했으니, 이제 개발 서버를 실행해 봅시다.

  1. 터미널에서 생성된 프로젝트 폴더로 이동합니다:
    cd blog
  2. 다음 명령어로 개발 서버를 실행합니다:
    npm start
  3. 브라우저가 자동으로 열리면서 http://localhost:3000에서 React 애플리케이션이 실행됩니다.

5. 코드 수정하기

이제 src/App.js 파일을 열고 내용을 수정해 봅시다. 예를 들어, 다음과 같이 변경할 수 있습니다:

jsx
functionApp(){return(<divclassName="App"><h1>안녕하세요, React!</h1><p>이것은 내 첫 번째 React 앱입니다.</p></div>);}exportdefaultApp;

파일을 저장하면 브라우저에서 자동으로 변경 사항이 반영됩니다.

6. 추가 설명

6.1 create-react-app이란?

create-react-app은 React 프로젝트를 쉽게 시작할 수 있게 해주는 도구입니다. 이 도구를 사용하면 복잡한 설정 없이 바로 React 개발을 시작할 수 있습니다.

6.2 npm과 npx의 차이

  • npm: Node.js 패키지를 설치하고 관리하는 도구
  • npx: 패키지를 설치하지 않고 한 번만 실행할 때 사용하는 도구

create-react-app은 프로젝트를 생성할 때만 사용하므로, npx를 통해 실행하는 것이 효율적입니다.

6.3 package.json 파일

package.json 파일은 프로젝트의 메타데이터와 의존성 정보를 담고 있습니다. 이 파일을 통해 다른 개발자들과 프로젝트를 공유할 때 필요한 패키지들을 쉽게 설치할 수 있습니다.

마무리

이렇게 해서 React 프로젝트를 설치하고 기본적인 설정을 마쳤습니다. 이제 본격적으로 React를 이용해 웹 애플리케이션을 개발할 준비가 되었습니다. React의 컴포넌트 기반 구조와 Virtual DOM을 활용하면, 효율적이고 동적인 웹 앱을 만들 수 있습니다.

다음 글에서는 React의 기본 개념과 컴포넌트 작성 방법에 대해 더 자세히 알아보도록 하겠습니다. React 개발을 시작하는 여러분의 여정을 응원합니다!

Related Posts

로드 중…

댓글 쓰기