mac os react js 개발환경 만들기

reactjs

by til.cpdm 2023. 6. 7. 01:59

react로 개발하기 위해 mac os에서 brew라고 하는 프로그램 관리 프로그램과 nvm이라는 node 버전관리시스템을 이용하여 최초 샘플 프로젝트를 만드는 과정까지를 설명합니다

mac에서는 여러 가지 패키지들을 관리하기 위해 homebrew라고 하는 패키지 관리 프로그램이 있습니다. 이걸 사용하는 방법이 가장 편합니다. 터미널에서 운영하는 방식들이라 어렵다고 생각될 수도 있지만 조금만 익숙해지면 그냥 복사 & 붙여 넣기만 하면 되기 때문에 더 간편하게 사용할 수 있습니다.

nvm이란 node version들을 여러 개 설치해서 변경하면서 사용할 수 있도록 도와주는 도구라고 할 수 있습니다. 개발하다 보면 어러 가지 버전을 사용하게 되는 일이 많으므로 특별한 경우가 아니라면 개발환경은 nvm을 사용하여 관리해 주는 것이 좋습니다.

1. homebrew 설치

https://brew.sh/index_ko에 접속하면 설치할 수 있는 스크립트를 알려줍니다 해당 스크립트를 터미널 환경에서 실행하고 마지막에 환경 설정을 하라는 데로 합니다.

꼭!! 읽고 따라 해야 함

2. nvm 설치 : 1 homebrew를 정상적으로 수행했다면 아래 명령어를 터미널에서 실행하면 nvm이 설치됩니다. 역시 설치 꼭 환경설정을 위해 하라고 하는 것을 해주세요. 환경설정 후에는 사용할 node를 설치해야 하는데 이걸 따라 하시는 분들은 --lts 옵션으로 따라 해 주시면 됩니다. 단 특정 버전이 필요하신 경우는 특정 버전으로 설치 가능합니다.

nvm 설치 후 꼭 환경설정을 따라 해주세요

brew install nvm

nvm install --lts : 최종 lts 버전 설치

nvm install v16.20.0 : 특정 버전 설치

nvm use v16.20.0. : 특정 버전으로 사용하기 위해 변경

3. create-react-app 설치 : react를 개발하기 위한 여러 가지 패키지들을 한 번에 해주는 nodejs 앱이라고 생각하시면 됩니다. -g 옵션은 전역 옵션으로 그냥 설치할 경우 실행한 디렉터리에 packege.json 파일에 설치 내역을 기록하고 해당 디렉터리 아래에서만 사용 가능하니 곡 -g 옵션을 넣어서 설치해야 합니다. (개발 중에는 -g옵션을 넣으면 안 됩니다)

npm install create-react-app -g

4. cra (create-react-app)을 이용하여 react 개발환경 생성합니다. 명령을 사용하는 디렉터리 아래에 프로젝트 명으로 디렉터리를 생성하고 react 환경을 만들어 줍니다.

npm create-react-app [프로젝트 명]

5. 샘플 react app 실행 : 위에서 생성한 후 cd명령을 이용하혀 해당 프로젝트 안으로 이동하고 npm start를 하면 cra를 이용하여 생성한 프로젝트의 샘플이 실행되어 화면에 표시됩니다.

cd [프로젝트 명]

npm start