이번에 새로운 맥북을 개시하며 업무와 취미용 개발을 위해 리액트를 설치하다 환경 설정을 하면서, 미래의 나를 위해 설치 과정을 정리했다. 처음 개발을 접했을 때, 패키지 설치와환경 설정 오류를 만났을 때 어떻게 대응해야 하는지 몰라서 많이 좌절했으며, 시도 때도없이 슈퍼 어드민을 부르는 일이 잦았다.
지금도 전보다 나아졌다고 말하긴 어려우나 이를 미리 방지하기 위해서 환경 세팅에 공을들이는 건 아주 의미 있는 투자라고 생각하게 됐다. (물론 투자를 한다고 문제가 안 생기는건 아니지만…) 개발을 하다 환경 설정 문제로 골머리를 앓고 있지 않다면, 아마 이미 수차례의 시행착오를 거쳐왔을 것이 분명하다.
먼저, Homebrew를 설치하자. Homebrew는 맥용 패키지 매니저로 다양한 프로그램을 쉽게 설치할 수 있다. 패키지 매니저를 쓰면 일일이 패키지 다운로드 페이지에 가지 않고 바로 설치할 수 있고 빌드, 테스트, 업그레이드, 의존성 관리 등 복잡한 상황을 쉽게 관리할 수 있어서 유용하다. Terminal 을 켜고 아래 코드를 복붙하면 손쉽게 설치할 수 있다.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
성공적으 설치에 성공하면 아래와 같은 화면을 만날 수 있다.
사용법은 brew help를 터미널에 쳐서 쉽게 확인할 수 있다. 어느 패키지든 help를 쳐 보면 사용할 수 있는 명령어들이 쫙 나온다. 직접 타이핑해보고 ‘어 되네, 이렇게 하면 안 되는구만’의 경험이 살이 되고 피까지 되는 것 같지는 않지만 검색하기 전에 자세히 살펴보면 이슈를 해결하기 위한 정보를 얻는 데 엄청난 도움을 준다.
그다음은 git, 버전 관리 도구다. Source Control Management, 줄여서 scm 이라고 한다. Git은 마치 구글 문서나 스프레드시트에서 파일 변경 사항을 관리해서 언제든지 이전에 작업하던 버전을 확인하거나 되돌리게 해 주는 기능을 제공한다. 내용이 복잡해지고 여러 명이 동시에 작업할 경우, 대참사가 벌어질 가능성이 아주 높기 때문에 버전 관리는 필수다. 엊그제 먹은 저녁 메뉴가 생각이 안 나는 일이 매우 빈번한 것처럼 매일 매일 지난날을 기억하는 데 어려움이 있는 나와 나의 동료들을 위한 훌륭한 도구이다. 어렵게 느껴지겠지만 얼마 지나지 않아 “방금 Pull 했어요. Commit 했어요. 이제 Push 할게요.” 라는 말들은 사용하게 되는 자신을 발견하게 될 것이다. Git SCM 웹사이트에서 다운로드 받아 설치할 수도 있고, brew로 설치하면 아래 한 줄이면 된다.
brew install git
자, 이제 절반이 끝났다. 본격적으로 리액트 앱을 설치하기에 앞서, 리액트 웹사이트에 가서 시작하기를 누르면 아래와 같은 설치 커맨드를 확인할 수 있다.
npx create-react-app my-app
cd my-app
npm start
그런데 무턱대고터미널에첫 줄을 복북하면 설치가 되지 않는다. npx는 그럼 무엇이란 말인가? npx는 npm 5.2+ 버전 패키지 실행 도구이다. 그렇다면 npm은 또 무어람? npm은 Node Package Manager 의 줄임말로 자바스크립트 프로그래밍 언어 패키지 매니저다. npx는 npm 을 eXecute, 즉 실행하게 해주는 툴이다. npm은 create-react-app 또는 react-roouter와 같은 모듈을 공유하기 위해 사용하는 패키지이다. npm 또는 npx 설치 명령을 실행하려면 Node.js를 설치해야 한다.
얼마 전만해도 처음에 서버 측에서 페이지를 렌더링하고 그리고 나서 단일 페이지 애플리케이션을 사용해 클라이언트 측 렌더링을 해야 했다. 그런가 하면 리액트는 사용자 유저 인터페이스, 보이는 부분, 뷰에만 관여하기 때문이다. 왜 노드가 리액트 앱을 필요로 하는 지에 관한 자세한 설명은 Quora에서 읽어보기로 하고 일단 그냥 설치하자. 역시나 직접 웹사이트에서 다운로드도 가능하지만 brew에게 맡기자.
brew install npm
설치에 성공하면 아래와 같은 화면이 나온다.
잘 설치되어있는지 확인하려면 node -v, npm -v를 간단히 쳐 보면 된다. 아니면 brew info npm 해 봐도 잘 설치 되어있는지 확인할 수 있다. 이제 앱을 만들어 볼까?
npx create-react-app my-app 새 앱을 만들고 설치가 끝나면, cd my-app 새로운 앱이 있는 디렉터리로 이동한 뒤 npm start 로 앱 구동을 시작함과 동시에 http://localhost:3000 페이지가 로딩된다.
이로써 환경설정 끝! 첫 번재 앱을 로컬 환경에서, 내 컴퓨터를 서버로 하는 앱을 만드는 데 성공했다. 이제 차차 어떤 앱을 만들 지에 따라 어떻게 배포할지에 따라서 webpack, babel 등 로더나 필요한 것 기타 등등은 추가로 구성하면 된다.
P.S. 본 환경은 맥 OS 10.14.5에서 구성했다. 맥 OS는 git 설치를 하려면 무조건 Xcode를 설치하라고 권장하는 얼러트가 튀어나오는데 brew로 git을 설치하고 나니 더이상 나오지 않았다. Mac OS 또는 iOS 앱을 개발프로젝트를 진행할 일이 근미래에 그려지지 않는다면 환경변수에 git을 추가하는 방법으로 무시할 수도 있다. 그렇지만 나는 특별히 배시 프로파일, 패쓰 설정을 건들거나 하지 않았다. 혹시나 나중에 바뀐 설정을 다시 되돌리거나 복구하는 데 자신이 없어서 그냥 변경하지 않고 그냥 뒀다.
socialtechnica 