Create React App + Scss + Mobx + git 개발 환경 구축

목표 개발 환경

- React + Scss + Mobx 개발 환경 구축

- git을 사용한 버전 관리. (원격 저장소로 깃허브 혹은 깃랩 사용을 전제)

- OS는 윈도우 10

개발 환경 설정

1. node.js 설치

    - 10.15.0 LTS 버전을 설치하였음.

    - 윈도우 버전은 npm 6.4.1 버전이 같이 설치 됨. 리눅스는 따로 설치가 필요함.

    - ubuntu 에서는 업데이트가 느려서, curl을 사용, 특정 버전을 설치 할 수 있도록 해야함.

    - 본 포스트와 유사 버전으로 설치하기 위해서는 아래와 같은 명령어로 설치해야함.

    - "sudo apt-get install curl" (curl 이 없는 경우가 있어서 이것부터 설치해야 하는 경우가 있음.)

    - "curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -"

    - "sudo apt-get install -y nodejs"

2. git-scm 설치

    - git-scm.com 에서 2.20.1 버전을 설치하였음.

    - Visual Studio Code를 사용하고 있어서, 설치 중간에 git's default editor 설정만 Visual Studio Code로 변경하여 설치하였음.

3. create-react-app 프로젝트 생성

    - Node cmd 실행

    - cd 명령어를 사용하여 프로젝트를 생성 할 디렉토리로 이동. (만약 사용 드라이브가 C드라이브가 아니라면 "해당 드라이브 문자열:"로 드라이브 이동 후 cd 명령어를 사용하여 이동)

    - "npx create-react-app project-name" (npx 명령어는 npm 5.2 이상 버전에 탑재되었다고. 패키지 자동 설치와 실행 되는 것으로 알고 있음.)

    - 방금 막 생성된 프로젝트가 잘 생성 되었는지 확인하고 싶다면, cd 명령어로 해당 프로젝트 디렉토리로 이동 후 "npm start"를 입력.

    - 기본 사용으로 지정된 웹브라우저가 실행되면서 localhost:3000 페이지의 빙글빙글 돌아가는 리액트 로고가 보인다면 성공

3. 추가 패키지 설치

    - npm install node-sass --save-dev

      (빌드시 포함 되지 않는 패키지라서 --save-dev 옵션을 사용.)

    - npm install mobx

4. github 혹은 gitlab 저장소와 연동

    - 명령 프롬프트로 프로젝트 경로로 이동 (Node cmd를 아직 켜두었다면 그대로 사용하면 됨.)

    - "git remote add origin https://github.com/facebook/create-react-app.git" 과 같은 형식으로 입력. 여기서 주소는 각자 프로젝트를 저장할 저장소의 주소를 입력.

    - 명령 프롬프트에서 "git push -u origin master" 입력, 여기서 아이디와 비밀번호를 물을 텐데, 프로젝트 저장소에 푸시 권한이 있는 계정 정보를 입력. 추후 계정 변경이 필요한 경우, "제어판\사용자 계정\자격 증명 관리자" 에서 "Windows 자격 증명" 내에 있는 자격 증명 정보를 수정하거나 삭제 후 다시 등록 하면 됨.

설치 완료 후 최종 개발 환경 정보

• Windows 10 1809
• MS Visual Studio Code 1.30.1
• Git-scm 2.20.1
• Nodejs 10.15.0
• NPM 6.4.1
• Create-React-App 2.1.3 (React 16.7.0)
• Mobx 5.8.0
• Node-Sass 4.11.0