Posts [React] React 프로젝트 작업 환경 구성 및 시작하기
Post
Cancel

[React] React 프로젝트 작업 환경 구성 및 시작하기


React 프로젝트 작업 환경 구성 및 시작하기


  • 목적 : 내 컴퓨터에서 React 프로젝트를 처음 시작해 보기

리액트 프로젝트를 생성하려면 사전에 다운로드해야 할 작업들이 있습니다.

  1. Node.js 설치
  2. npm / yarn 설치
  3. IDE 설치 (visual studio code 추천)
  4. Git 설치
  5. create-react-app 명령어로 프로젝트 생성하기

1~4 과정을 위해 프로그램을 설치해야 합니다. (Windows 기준으로 설명되어 있습니다)


  • Node.js 설치하기

Node.js 는 웹 브라우저 환경이 아닌 곳에서도 자바 스크립트를 사용하여 연산할 수 있도록 해 줍니다. 즉 웹 브라우저 영역 외에 웹 서버는 물론 모바일 어플리케이션, 데스크톱 어플리케이션 등에서도 활약하고 있습니다. 프로젝트 개발에 필요한 도구들이 Node.js를 사용하므로 나중을 위해 설치해 줍니다.

Node.js 설치 : https://nodejs.org/ko/download/

모두 설치한 뒤 cmd에서 아래 명령어를 입력해 보세요. 버전이 나온다면 정상적으로 설치된 것입니다.

1
2
$ node -v
v12.16.3

  • node.js 설치 시 npm이 설치되지만, yarn 이라는 패키지 관리자 도구를 부가적으로 설치합니다.

  • 기본적으로 npm보다 더 빠르고 기타 부가 기능을 제공합니다.

yarn 설치하기 : https://classic.yarnpkg.com/en/docs/install#windows-stable


  • yarn 까지 설치를 마쳤으면 아래 명령어를 입력하여 버전이 나오는지 확인해 주세요.
1
2
$ yarn --version
1.22.4

  • visual studio code를 설치합니다. 기존에 사용하던 IDE가 있다면 그것을 사용하면 됩니다.

VSCode 설치하기 : https://code.visualstudio.com/


  • 프로젝트 관리를 위하여 Git을 설치합니다.

Git 설치하기 : https://git-scm.com/download/

  • 설치 과정에서 Git Bash도 함께 설치할 것인지 물을 것입니다. 이 때 같이 설치해 주는 것이 좋습니다.

이제 프로젝트를 생성할 일만 남았습니다!

visual studio code를 실행하고, 작업할 디렉토리에 들어옵니다.

이후, 터미널에 해당 명령어를 입력합니다.

yarn create react-app hello-react

모두 설치가 완료되면 디렉토리 내에 자동으로 프로젝트가 생성됨을 확인할 수 있습니다.


이제 프로젝트를 실행해 보겠습니다. 아래 명령어를 입력해 주세요.

cd hello-react

yarn start

이후 웹 브라우저에 기본적인 리액트 프로젝트가 실행되었음을 확인할 수 있습니다!


[백준] 1963번 - 소수 경로

[React] React 에서 사용하는 JSX 문법