React 프로젝트 생성 (macOS)

React 프로젝트 개발 환경

React 프로젝트는 Node.js 환경을 갖추어야 개발할 수 있다.

 

Node.js 는 JavaScript 를 브라우저가 아닌 환경에서도 동작하게 하는 런타임 환경이다.

웹브라우저는 JavaScript 해석 기능을 갖는다. 즉 FrontEnd 개발에 사용되어왔다.

그런데 Node.js 환경을 갖추면 브라우저 밖에서도 JavaScript 코드를 실행할 수 있게 된다. Node.js 를 이용하면 웹브라우저로부터 독립된 서버 구현이 가능하게 되어 BackEnd 개발이 가능하게 된다.

 

React 프로젝트를 개발하기 위해서는 Node.js 환경 구성이 필수적인데, React 를 이용한 FrontEnd 개발 결과물이 동작하게 하기 위한 서버를 Node.js 가 구성해줄 수 있기 때문이다.

이 외에도 React 프로젝트를 개발하기 위해서 필요한 여러 JavaScript 패키지를 관리하는 기능이 Node.js 가 포함하고 있는 npm (Node Package Manager) 도구가 수행한다.

 

1. Node.js 를 설치
2. Create React App 패키지를 이용하여 React App 프로젝트를 구성
3. 개발 서버 실행

 

React 개발환경을 구성하는 순서를 정리하면 다음과 같다.

Homebrew -> NVM -> Node.js

 

Homebrew 를 이용하여 NVM 을 설치하고 NVM 으로 Node.js 를 설치한다.

NVM 은 Node Version Manager 이다. 여러 버전의 Node.js 환경을 효율적으로 관리할 수 있게 한다.

NVM 을 거치지 않고 바로 Node.js 를 설치한다면 Node.js 의 특정 버전에 종속적인 환경을 구성할 수 밖에 없으므로 유연하지 못한 개발환경을 갖추게 될 수 밖에 없다.

 

Homebrew 설치 (및 삭제)

macOS 에서는 Homebrew 라는 패키지관리자를 이용해서 필요한 소프트웨어의 설치 및 삭제를 관리할 수 있다.

Homebrew 가 설치되어 있는지를 확인하기 위해서는 터미널에서 Homebrew 의 버전 정보를 확인하는 아래 명령어를 입력하여 실행시킨다.

brew --version

버전정보가 표시되지 않고 command not found 라고 표시된다면 Homebrew 가 설치되어 있지 않은 상태이다.

Homebrew 설치 방법은 다음과 같다. 터미널에서 아래 명령어를 입력하고 실행한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

Intel 기반의 Mac 에서는 /usr/local 에, Apple Silicon 기반의 Mac 에서는 /opt/homebrew 에 각각 설치된다.

 

 

설치된 Homebrew 를 삭제하려면 아래 명령어를 입력하고 실행하면 된다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

 

제대로 삭제되지 않은 파일이나 디렉토리는 수동으로 삭제해주면 된다.

 

NVM 설치

Homebrew 가 설치되었으면 brew install 명령어를 이용하여 nvm 을 설치할 수 있다.

brew install nvm

 

nvm 을 설치한 후에 작업해주어야 할 내용이 설치 과정에 표시되고 있다.

 

NVM 의 작업 디렉토리(~/.nvm) 를 설정해주기 위해서 디렉토리를 생성한다.

mkdir ~/.nvm

 

쉘 프로파일(~/.bash_profile 또는 ~/.zshrc)에 작업 디렉토리에 대한 설정을 추가한다. (Intel 기반의 macOS 에서는 /opt/homebrew 를 /usr/local 로 변경해야 한다.)

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # 이 명령으로 nvm을 로드합니다
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # 이 명령으로 nvm bash 자동완성을 로드합니다

 

변경된 쉘 프로파일을 적용한다.

source ~/.zshrc # 또는 source ~/.bash_profile

 

nvm 설치가 완료되었으므로 버전정보를 확인할 수 있다.

nvm --version

Node.js 설치

이제 nvm 을 사용하여 다양한 Node.js 버전을 설치하고 관리할 수 있게 되었다.

최신버전의 Node.js 는 다음 명령어로 설치할 수 있다.

nvm install node

 

만약 최신 LTS 버전을 설치하려면 아래 명령어를 사용한다.

nvm install --lts

 

특정 버전의 Node.js 를 설치하려면 버전번호를 입력한다.

nvm install 18.20.4

 

설치된 Node.js 의 버전을 확인하는 명령어는 다음과 같다.

node --version

 

표시되는 버전은 가장 마지막에 설치한 node 의 버전이다.

기본 사용 버전을 변경하려면 다음과 같이 하면 된다.

nvm use 22.11.0

 

설치되어 있는 node.js 의 버전을 확인하려면 아래 명령어를 사용한다.

nvm list

 

nvm (Node Version Manager) 은 여러 버전의 node.js 를 설치하고 필요한 버전을 손쉽게 전환하기 위한 환경이다.

node.js 설치를 완료하였다면, npm (Node Package Manager) 를 사용할 수 있게 되는 것이고, npm 에 내장되어 있는 npx (Node Package Execute)를 사용할 수 있게 되는 것이므로 npx 를 이용하여 react 프로젝트를 생성할 수 있게 된다.

npm 이 Node Package Manager 즉, Node 패키지 관리자인데, 대안으로 yarn 이 있다. yarn 은 Facebook 에서 만든 또 다른 패키지 관리자이다.

npm 은 Node.js 에 기본으로 포함되어 있어서 추가설치가 불필요하지만, yarn 은 아래 명령으로 추가설치를 해야 한다.

brew install yarn
yarn --version

npm 과 yarn 을 비교했을 때 어느 것이 더 우위에 있다고 평가하기 어려우므로 현실적인 조건에서 선택하는 것이 좋겠다.

 

Create React App 패키지로 React 프로젝트 생성

npx create-react-app <react_app_name>

 

npx 는 npm 의 확장 도구로, 특정 npm 패키지를 설치하지 않고도 일회성으로 실행할 수 있게 해준다.

위 명령은 create-react-app 패키지를 설치없이 실행하여 React 프로젝트를 생성하는 예이다.

<react_app_name> 대신 myreactapp 을 넣어서 실행한 결과는 다음과 같다.

이렇게 만들어진 프로젝트의 구조는 다음과 같다.

npx 가 아닌 yarn 을 사용해서 React 프로젝트를 생성할 수도 있는데, 

yarn create react-app <projectname>

과 같은 형식으로 명령을 실행하면 된다.

프로젝트 생성이 완료되면 

cd <projectname>
yarn start

명령문으로 프로젝트를 실행할 수 있다.

 

개발 서버 실행

이렇게 생성된 프로젝트를 곧바로 실행시켜보자.

cd myreactapp
npm start

 

웹브라우저에 http://localhost:3000 주소를 입력하면 아래와 같이 React 앱이 실행된 모습을 확인해볼 수 있다.