[React] 맥(M2환경)에서 React 환경 세팅하기 & 프로젝트 실행

 

 

요즘 새로운 거 깔 일이 많네욤....

캡스톤 디자인에서 프론트 0.2인분(?) 을 맡게 되어서 이번엔 맥에서 React 작업 환경을 구성해보았습니다

리액트.. 찍먹해본다 해본다 하면서 결국 이렇게 깔아보네여

 

1. Node.JS 설치

 

Node.JS란?

막간의 개념 정리!

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임=프로그램을 실행할 수 있는 환경입니다
쉽게 말해서 JavaScript 실행환경 ! 인 것입니다

자바스크립트는 html을 조작해서 웹페이지를 다이나믹하게 바꿔주는 스크립트 언어로, 스크립트 언어는 웹 브라우저 프로그램 안에서만 동작을 합니다
이러한 스크립트 언어인 자바스크립트를 컴퓨터에서 실행할 수 있도록 환경을 마련하는 것이 Node.js입니다

 

노드는 서버 사이드 스크립트 언어로 오해하기 쉬운데, 프로그램(환경)입니다!

어쨌든 이러한 역할을 하는 Node.js를 설치해봅시다

 

node.js 설치 여부 확인

Mac 터미널에서 node -v 명령어를 치면 깔려있지 않았을 때에는

Command not found: node 라는 문구가 뜹니당 

저는 따로 깔아준 적이 없는데 다른 거 설치하다가 같이 깔렸나보네요..? 무튼 깔려있으면 버전이 뜹니다

 

Node.js 설치

 설치 링크
https://nodejs.org/en/

 

LTS로 다운로드!! 좀 더 안정적인 버전으로 깔아줍니다

 

이렇게 .pkg 파일이 다운로드 되면 더블클릭해서 실행!

설치 프로그램 쭉 진행해주시면 됨니다

그 후 제대로 깔렸는지 아까의 명령어

node -v

 

입력해서 확인해보세요!

제대로 설치됐으면 버전이 뜹니다

 

2. NPM 설치 확인

NPM(Node Package Manager): Node.js에서 사용하는 여러 모듈을 간편하게 사용할 수 있도록 도와주는 도구

 

터미널에 아래 명령어를 입력해줍니다

npm -v

 

Node js를 설치하면 npm도 자동으로 같이 설치가 돼서, 따로 깔지 않아도 정상적으로 설치가 되었다면 버전이 출력될 것입니다

 

3. (선택) yarn 설치

 

yarn은 npm과 동일하게 노드의 패키지 관리자이나,

npm에 비해 패키지 설치 속도가 빠르고 보안이 더 안전하다는 등 장점이 있습니다.

여러 글들을 보니 yarn을 많이 사용하는 것 같습니다.

하지만 저는 앞으로 쓸 일이 많이 없을 것 같아 굳이 설치하지는 않았습니다..

 

설치하려면 아래 명령어를 터미널에 입력하면 됩니다

npm install --global yarn

 

혹은

brew install yarn

 

설치 확인

yarn --version

 

 

4. React 설치

이제 찐으로 리액트를 설치해봅시다

npm install -g create-react-app

 

yarn을 깔았다면

yarn global add create-react-app

 

create-react-app(CRA)란?
리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 , 설정등을 자동으로 세팅해주는 도구

 

어라? 설치가 되기는 했지만  특정 패키지들이 더 이상 지원되지 않거나, 보안 업데이트를 받지 않는다는 메세지가 떴네요

현재 프로젝트 진행에 큰 문제가 없을거 같아서 일단은 넘어갑시다

 

설치 확인

create-react-app -V

대문자 v인거 주의하십쇼

 

5. 코딩 툴 설치 (VSCode)

개발을 진행할 프로그램을 설치합니다

 

6. 프로젝트 생성 & 실행

 

프로젝트 생성

 

cd "파일경로"를 통해 프로젝트 폴더를 만들고 싶은 경로로 이동해서 아래 명령어를 입력합니다

npx create-react-app 프로젝트명

 

입력하면 지정한 프로젝트 이름으로 폴더가 생기고, 리액트 앱을 개발하기 위한 기본 파일들과 디렉토리가 생성됩니다

저는 기존 프로젝트가 이미 생성되어 있고 그걸 실행하기 위해 환경 세팅을 한 것이라서 생성을 하진 않았슴니다

 

 

프로젝트 실행

 

터미널에서 프로젝트가 생성된 폴더로 이동해서, 아래 명령어를 입력 (혹은 npm run start)

npm start

그럼 로컬 브라우저에서 http://localhost:3030 으로 리액트 앱이 띄워지는 것을 확인할 수 있습니다!

7. 실행 종료

터미널에서 control+c 누른 다음에 exit 명령어 입력하면 리액트 앱이 실행종료됩니다!