맥 OS에서 리액트 앱 개발을 위한 환경 구성하기

이번에 새로운 맥북을 개시하며 업무와 취미용 개발을 위해 리액트를 설치하다 환경 설정을 하면서, 미래의 나를 위해 설치 과정을 정리했다. 처음 개발을 접했을 때, 패키지 설치와환경 설정 오류를 만났을 때 어떻게 대응해야 하는지 몰라서 많이 좌절했으며, 시도 때도없이 슈퍼 어드민을 부르는 일이 잦았다. 

지금도 전보다 나아졌다고 말하긴 어려우나 이를 미리 방지하기 위해서 환경 세팅에 공을들이는 건 아주 의미 있는 투자라고 생각하게 됐다. (물론 투자를 한다고 문제가 안 생기는건 아니지만…) 개발을 하다 환경 설정 문제로 골머리를 앓고 있지 않다면, 아마 이미 수차례의 시행착오를 거쳐왔을 것이 분명하다.

먼저, 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

29541854_10216029524397059_6029645825258011742_n

여기 다시 가서 물 흘러가는 소리도 듣고 구름 흘러가는 것도 다시 보고 싶다. 너무 아름다워서 이 아름다운 걸 또 보기 위해서 열심히 살아야 겠다는 마음 마저 들었으니. 이상하리만치 아주 잠깐의 평화로운 순간들은 오랫 동안 기억에 남는다.

절대 같은 순간이 다시 오지 않을 걸 알아서 일까.

원본 글 보기 71단어 남음

상희 가라사대

고객이신 상희님께서 바쁘신 와중에 직접 오피스에 방문해 그동안 삶에 어떤 변화가 있었는지를 들려주고 가셨다. 감사하다.

Image may contain: 1 person, indoor

일하는 이유를 생각하게 되는 금요일이다. 사진 찍느라 바빴으나 진심어린 한 마디 한 마디가 주는 울림이란!

Image may contain: 1 person

평소 어지간해서 큰 감정의 동요가 있거나 감동하지 않는 스타일인데 오늘은 지난 2년 간 눔에서의 많은 일들이 스쳐가 안구 건조증으로 사막같은 내 눈이 잠시 촉촉해졌다.

준비해 준 동료들에게 감사하다. 칭찬해!

마음 한쪽에는 언제나 풀과, 나무, 숲

할머니 집에 가는 길에 큰 나무 그루가 있는데, 그 나무가 별안간 보고 싶다. 저 멀리서 이 나무가 보이기 시작하면 시골 집에 다 도착한 거다.

날이 따뜻해 지거든 한 번 내려갔다 와야지.

어린이 시절엔, 이 나무에도 감흥이 없었을 뿐더러 대게 자연 경관에 별 감흥이 없었다. 그런데 요즘은 나무만 아니, 초록색이 조금이라도 보이면 별안간 마음이 편해져 버린다.

도시에서 나고 도시에서 자라 문명 없이 지내는 건 하루 이틀이 맥스이지만 희안하게도 마음 한쪽에는 언제나 풀과 나무, 숲이 있다.

잘 휘둘러야 요술 방망이

마케팅 오토메이션 툴 시장에 엄청 많고 도움받으면 물론 좋으나 이게 답이었으면 소문 다 나서 진작 다 썼다. 쓸 만큼 써보지 않았는데 결론을 이렇게 쉽게 내려도 되느냐 하는 의문이 스스로에게도 들지만 답까지는 아니고 신무기 중 하나이다.

언제나 첨단 기술과 최고 성능의 무기만이 환영받진 않는다.

견인포가 적당할 때도 있고 자주포가 적당할 때도 있듯 말이다. 값싸고 막강한 화력이 필요한지, 적당한 가격과 적당한 화력이 필요한지에 따라서 달라질 일.

요가가 뭐라고

지난 3월부터 장장 6개월 넘게 주말 동안 근면성실한 결과 인스트럭터가 되었고 최근 인요가 티처 트레이닝에 다녀왔다.

대게 인도네시아에 여행을 가면 발리에 가는데 지카르타에서 인요가 워크샵이 열린다는 이유 하나 만으로 무턱대고 자카르타 행을 결정했으니, 이쯤되면 꽤나 진지하게 덕질을 하고 있는 셈. 새로운 도반도 생겼다.

트레이닝을 갔다 왔으니 요가 얘기를 조금 해보자면 인요가라고해서 새로운 요가가 아니다. 내 식으로 쉽게 풀어보자면, 양스러운 요가는 몸에 있는 긴장들을 호흡, 태양 경배, 아사나를 통해 근육들의 화이팅을 넘치게해 갑작스런 혈액순환으로 인해 미처 생각이 올라올 틈이 없게 만드는 요가라면 인요가는 잠드는 것에 가깝게 온몸 깊숙한 곳에 자리 잡고 있는 긴장들을 의식해서 잡 생각이 자리할 틈을 내 주지 않는 요가다.

양이라고 나쁜 것도 아니고 인이라고 해서 더 좋은 것도 아니고 덜 좋은 것도 아니다. 나쁜 요가도 좋은 요가도 없다. 그때 그때 에너지 레벨에 따라 있는 그대로를 바라보면서 부족하다 생각하는 부분을 채우는 요가를 하면 된다. 있는 그대로의 호흡을 느끼면서 말이지.

가르치는 걸 배우면서, 가르치면서, 가르침을 받으며, 배우는 사람들을 보며, 수련하며 스스로를 많이 돌아보게 된다.

요가를 열심히 하면 내가 더 나아지고 강해지고 유연해져서 멋지게 바뀔 것이라 생각하소 지금도 조금은 그렇게 기대한다. 또, 요가를 제대로 배워서 수련하면 일상생활도 좀 더 잘 하게 될 것 같았다. 그런데 이런 것들은 모두 나의 기대이고 현실은 해야할 일들과 이번 생의 과업은 무엇인가 하는 고민들의 연속이다.

분명 열심히 하면 모르긴 몰라도 달라지겠지만 그저 기대를 접고 잠시 머무를 수 있다면, 그 자체로도 충분하겠지.

아래는 드 선생님의 말이다.


Bird-01.104173009_logo“Love yoga for what it is, not for what it does for you”. Denise Payne