[React] 리액트(React) 실행 환경 구축 및 설치

안녕하세요.

 

오늘은 리액트(React) 실행 환경 구축 및 설치에 대해서 알아보려고 합니다.

 

먼저 리액트 실행환경을 구축하려면 node.js를 설치를 해야합니다.

 

간단하게 node.js란?

• 기존 자바스크립트(javascript)는 웹 브라우저에서만 사용이 가능하였지만 그것을 node.js를 통하여 윈도우 또는 맥에서 실행시켜주기 위한 스크립트 언어이다.
• 서버도 만들 수 있고 프로그램도 실행할 수 있게 해주는 환경을 구축해준다.
• node를 설치하게 된다면 npm도 같이 설치가 됩니다.
• npm은 자바스크립트로 된 패키지 버전을 관리하는 프로그램이고 필요한 패키지들을 설치할 수 있습니다.

 

그래서 왜 설치를 해야하느냐?

• 기본적으로 nodejs 특징 중에서 자바스크립트는 웹 브라우저에서만 사용이 가능하다고 했는데 해당 nodejs를 설치하게 된다면 해당 제약에서 벗어나게 됩니다. 자바스크립트 언어로 개발을 할 수 있다라는 뜻 입니다.
• 리액트(React) 기본 템플릿을 다운로드 받을 수 있게 되어 디렉토리 및 파일들을 한 눈에 확인이 가능하고 어떤 어떤 파일에 어떤 설정을 해야하는지 알 수 있습니다.

 

홈페이지

https://nodejs.org/en/

Node.js

 

안정적인 버전(좌) / 최신 버전(우)

node js 홈페이지에 접속하여 좌측에 있는 안정적인 버전으로 다운로드를 받겠습니다.

 

1. node js 설치 프로그램 실행

Next -> 약관 동의 체크 -> Next

반응형

nodejs 설치 위치 설정 (필자는 디폴트) -> Next -> 설치 목록들이 눈에 보이는데 기본적으로 Node가 설치하고 되고 npm도 같이 설치가 됩니다! 확인만 하시고 Next

automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes

Chocolatey 및 추가 설치 도구를 다운로드 받게 해줍니다.

선택 사항이니 필자는 필요한 도구들을 알아서 설치하게끔 진행을 해보겠습니다. (체크 해제)

설치 진행 상황 -> 완료가 되었다면 Next -> 정상적으로 설치가 완료되었습니다 Finish를 클릭해주시면 됩니다.

 

설치 확인 - 명령 프롬프트(cmd)

명령 프롬프트(cmd)에서 node와 npm이 정상적으로 설치가 되었는지 node -v 및 npm -v 으로 확인해주시면 됩니다!

 

먼저 리액트를 사용할 디렉토리(폴더) 먼저 생성을 하고 그 안에서 진행을 하도록 하겠습니다.

- npm 설치 시 현재 디렉토리에서만 사용할건지 외부에서도 사용할 수 있도록 전역으로 설치하는지에 따라 다르기 때문에 혹시 다른 디렉토리에서 쓰는 node 패키지들이 충돌 우려가 있기 때문에 리액트를 사용할 공간에서만 사용할 수 있도록 진행하겠습니다.

1. 개발을 진행할 디렉토리 구성 및 이동

cd 사용할 디렉토리 위치
(선택사항) 해당 위치에서 디렉토리를 하나 더 생성해도 되고 여기서 그냥 진행하셔도 됩니다.

 

2. create-react-app 패키지 전역 설치

해당 npm으로 이제 리액트 기본 템플릿을 다운로드 받게해주는 패키지를 다운로드를 받도록 하겠습니다.

- 어느 디렉토리에서든 기본 템플릿을 만들 수 있도록 전역으로 패키지를 다운로드

npm install -g create-react-app

 

3. create-react-app 실행

create-react-app 프로젝트명(폴더명)

create-react-app 명령어 실행

해당 명령어는 시간이 조금 걸립니다!

create-react-app 성공

설치 완료

해당 명령어로 프로젝트명은 mall로 하여금 리액트 프로젝트를 만들었습니다!

 

node_modules : 모듈 모음(package에 있는거와 동일)

public : static 파일 모음 (build를 할때 같이 압축되지 않고 그대로 남아있습니다.)

src : css, js 등 소스 코드 모음

package.json / package-lock.json : 설치된 라이브러리 명, 버전 확인 가능

4. 리액트 프로젝트 실행

설정한 프로젝트명 디렉토리에 들어가서 npm start로 실행해주시면 됩니다!

cd mall
npm start

기본적으로 3000번 포트를 사용하고 이미 3000번 포트를 사용하고 계시다면 다른 포트로 변경을 해주셔야합니다.

 

포트 변경 방법은 다음 시간에 알아보도록 하겠습니다.

5. 리액트 프로젝트 설치 및 실행 완료

리액트 프로젝트 템플릿 완료

이렇게 리액트(React) 실행 환경 구축 및 설치에 대해서 알아보았습니다.

 

다음 시간에는 리액트의 문법에 대해 알아보도록 하겠습니다.

 

감사합니다.