[MACOS] React 개발환경 구성 1/2
필요 준비물
- H/W : Mac mini, 키보드/마우스, 모니터, Internet
- S/W : Browser, Visual Studio Code, git, sourcetree, mysqlworkbench, npm, node, yarn, brew
설치순서
- 브라우져 : Chrome 브라우저 설치
- 형상관리툴 : git, sourcetree 설치
- 개발툴 : Visual Studio Code, mysqlworkbench, npm, node, yarn, brew 설치
- 템플릿 : Material Kit PRO React v1.10 설치
개발환경은 로컬환경 브라우저에서 웹사이트가 표시되고 소스코드를 형상관리하여 작업할 수 있도록 설정합니다. 웹개발은 문서작업이 가능한 사양으로 구입하여도 크게 문제가 되지 않습니다. 브라우저는 사파리를 사용하여도 되나 크롬을 설치하여 같이 보는 것을 추천드립니다. 추후 마음에 맞는 동료가 생긴다면 협업 시스템에 초대하여 같이 작업할 수 있습니다.
1. 브라우저 설치
- 크롬 다운로드 후 설치 진행 과정을 통하여 컴퓨터에 설치합니다.
2. 형상관리툴 설치
- Git 다운로드 후 설치 진행 과정을 통하여 컴퓨터에 설치합니다.
설치한 Git 버전을 기억하여 설치후 맞는 버전이 설치되었는지 확인합니다.
Control+Space -> Terminal -> git --version
- Sourcetree 다운로드 후 설치 진행 과정을 통하여 컴퓨터에 설치합니다.
3. 개발툴 설치
- Visual Studio Code 다운로드 후 설치 진행 과정을 통하여 컴퓨터에 설치합니다.
- Mysqlworkbench 다운로드 후 설치 진행 과정을 통하여 컴퓨터에 설치합니다.
** Mysqlworkbench는 DB 접속 프로그램이며 DB서버는 ubuntu에 설치하는 방법을 추후 설명하겠습니다.
- Control+Space -> Terminal -> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Homebrew 설치가 완료되면 brew -v 커맨드로 버전을 확인합니다.
- node, npm 설치, 확인
설치 : brew install node@14, brew link node@14
확인 : npm -v, node -v
- yarn 설치, 확인
설치 : brew install yarn --ignore-dependencies
확인 : yarn -v
4. 템플릿 설치
현재 템플릿은 2.0 버전이 나왔으나 v1.10을 사용합니다.
PRO 버전은 구입하여도 되고 무료버전으로 사용하여도 됩니다.
- Download from Github 후 작업할 디렉토리를 생성하여 압축을 풉니다.
참고로 Homebrew는 맥OS용 패키지 관리자입니다. Homebrew 업데이트는 brew update로 하셔야 됩니다. brew upgrate는 brew뿐만 아니라 brew에 설치된 캐스크, 포뮬라를 최신으로 업데이트 되기 때문에 brew만 업데이트 하려면 brew update를 사용하시기 바랍니다.