목록으로

Create-React-App으로 React 시작하기.

create-react-app으로 리액트 프로젝트를 시작하는 준비 단계와 설치, 실행 과정을 초보자 기준으로 정리합니다.
React
Create React App
JavaScript
Frontend
Getting Started
2020-11-134 min read
안녕하세요. 오늘은 React 시자하는 방법에 대하여 포스팅을 진행하겠습니다.
  1. 사전설치
  2. create-react-app으로 React 설치하기
  3. react 시작하기
1. 사전설치
개발을 시작하기전 개발 할 툴이 있어야겠죠. 저는 VSCode를 사용해보겠습니다code.visualstudio.com/download [Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com](https://code.visualstudio.com/download)해당 URL을 타고 들어가 Visual Studio Code (약칭 VSCode)를 본인에 OS에 맞는 버전으로 설치를 진행합니다.설치가 완료되면 VSCode 실행하여 설치 확인을 한다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

다음 패키지 관리를 위한 npm을 설치 진행합니다.nodejs.org/en/ [Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org](https://nodejs.org/en/)해당 URL을 타고 들어가 npm을 설치합니다.왼쪽은 가장많은 유저가 사용하는 즉, 가장 안정적인 버전이고, 오른쪽은 가장 최신의 버전입니다. 기호에 맞게 설치를 진행합니다. (저는 왼쪽으로 진행했습니다)

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

설치가 완료 되면 [명령프롬프트] (cmd) 창을 열어 npm -v 로 설치 확인 및 설치 버전을 확인합니다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

정상설치가 완료되었다면, React를 시작하기 위한 사전준비가 끝납니다.
2. create-react-app으로 React 설치하기
명령프롬프트에서도 진행이 가능하고, vscode내에 있는 터미널에서도 작업이 가능합니다. 저는 vscode에서 진행을 시작하겠습니다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

VSCode 상단 탭중 [File] - [Open Folder]를 눌러 작업할 폴더를 지정해 줍니다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

저는 react폴더를 생성해서 해당 폴더를 react 전용으로 사용하겠습니다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

작업 폴더를 지정했으니, 터미널을 열어 환경 세팅 및 create-react-app를 설치할 준비를 하겠습니다.  상단 탭 중 [Terminal] - [New Terminal]를 클릭해 터미널을 열어줍니다.(명령 프롬프트로 진행하거나, Mac환경에서 진행중이신 분들은 cd 명령을 통해 작업 디렉터리로 이동해주시고 작업을 해주셔야 합니다)

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

우측하단에 생긴 터미널에서 npx create-react-app (작업할 프로젝트명)을 적어 create-react-app을 설치 진행 해줍니다.
3. react 시작하기

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

프로젝트 디렉토리로 이동하고, npm start로 프로젝트를 시작해 줍니다.

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

보시는 거와 같이 기본 브라우저에서 react가 열리는 것을 확인 할 수 있습니다.