TIL 05. GO TO IMMERSIVE!

five1star·2020년 8월 31일

TIL

목록 보기

5/25

미디엄 블로그의 관리가 불편해 벨로그로 넘어와 글을 옮기고 첫 글을 쓴다. 아깝긴 하지만 아직 이머시브 첫 날이니, 시간적으로는 옮기는 것도 나쁘지 않을것같다.

한주간의 솔로위크가 끝나고 이머시브가 개강했다. 한 달 동안 방안에서 숨죽여 공부만 하던 내게 무한 배려를 더해주던 아내와 시간을 보내던 중에 노션부터 슬랙, 구글 캘린더 등 이머시브 관련 초대가 보내져왔다.

앞으로 배울것들을 보다.

코드스테이츠 프리과정을 마치고 넘어온 이머시브 코스는 자바스크립트 심화부터 Data Structure, 다양한 프레임워크를 중점적으로 배운다. 많은 내용을 단 4개월만에 현직에 바로 투입될 수 있는 수준까지 성장할 수는 없겠지만, 후일을 기약하면서 전반적인 웹 개발을 훑어본다고할 수있다.

01. NODE JS!

첫날이다보니 무겁지 않게 코스 소개를 마친 후, 앞으로 사용할 툴들에 대해서 설치하고 간략하게 실습하는 시간을 가졌다. 자바스크립트의 심화 개념으로 프레임워크, 라이브러리들을 다룰텐데, 먼저 오늘은 Node JS 사용을 위해 NVM의 개념과 NVM을 사용한 NODE JS 설치법을 실습했다.

nvm이란?

NVM은 Node Version Manager의 약자로 다양한 버전의 Node를 설치, 관리할 수 있는 매니징 프로그램이다. 개발을 하다 보면 다양한 node.js 버전에 대응해야 할 일이 생긴다. (다양한 버전의 python 가상환경을 만들어야 하는 것과 마찬가지로)

nvm을 설치하는 방법은 다음과 같다.

NVM 설치
아래 명령어를 터미널에 입력

$ touch ~/.bash_profile 
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
$ nvm --version
버전이 잘 나온다면 성공적으로 NVM이 설치된 것이다

나의 경우는 nvm을 설치한 후에 nvm 입력어가 계속해서 command not found가 표시되었다.
블로그와 유투브를 사용해 해당 문제에 대한 해결법을 서치, 공유했다.

참조 링크

bash_profile을 source 입력어로 다시 실행시키면 문제없이 작동한다. clear!

이후 각 노드 버전은 다음과 같이 설치, 이동 가능하다.

$ nvm install 12.18.3 //해당 버전 설치
$ nvm use 해당 버전

package.json

package.json은 프로젝트를 실행시키기 위해 필요한 모듈에 대해 명시하는 카탈로그다. 따라서 향후 스프린트 뿐만 아니라 다른이의 프로젝트를 실행시키기 위해서 NPM(Node Package Manager)을 통해 해당 package.json에서 요구하는 파일을 다운, 설치하는 방법에 익숙해져야 한다.

npm install // package.json에서 요구하는 모듈 다운

package.json 내용

dependencies : 프로젝트가 작동하기 위해 반드시 필요한 모듈 표시

"dependencies": {
  "react": "^16.8.6",
}

devDependencies: 개발하는 환경에서 필요한 모듈 표시. 실제 프로젝트 동작에 직접적으로 영향을 주지 않는 모듈들을 명시.

"devDependencies": {
  "jest": "^2.3.0",
  "eslint" : "^2.0.0"
}

scripts : npm 으로 실행시킬 수 있는 명령어를 정의.

"scripts": {
  "start": "node app.js",
  "test": "node test.js",
}

02. GIT을 통한 협업!

이전까지 페어와 서로 슬랙을 통해 코드를 복붙했다. 매우 비효율적인 방법... 오늘은 git을 통해 협업을 하는 방법 특히 conflict를 해결하는 방법과 branch를 생성하는 방법을 학습했다.

나의 github과 상대방의 github 연동하기.

깃 repository를 각자 local Storage에 clone한다.
git clone <repo url>
상대방의 repo url을 pair로 등록한다.
git remote add pair <pair's repo url>
git remote -v
한 쪽에서 내용을 add, commit, push까지 완료한다.
git add <file_name>
git commit -m 'context'
git push origin master(혹은 다른 branch)
다른 한쪽이 상대의 업데이트 내용을 받아온다.
git pull pair master

상대방과의 Conflict 생성시 해결법

상대방과 동일한 내용을 수정한 경우, pull시 conflict가 생성되었다고 표시된다.

vsc를 통해 확인 후 충돌 중 어떤 내용을 유지할지 문제를 solve한 후. 동일하게 push 까지 완료한다.

*주의 : 양쪽 모두 conflict를 다룰 경우, 다시 conflict가 발생하기 때문에 주의한다.

새로운 Branch 생성 및 관리법

위의 conflict 문제를 비롯해 모든 업무를 Master branch에서 작업할 수 없다. 특히나 많은 인원이 동시에 작업할 경우 해당 conflict가 충돌할 가능성이 많다. 따라서 master branch를 안정적으로 만들고, 개발하고자 하는 최소단위마다 branch를 생성하고 완성도가 보장될 때 master에 merge해야 한다.

branch 이동방법.
git checkout <branch name>
다음과 같은 방법으로 branch마다 이동이 가능하다.
branch 생성 및 이동방법.
git checkout -b <branch name>
-b 보조 명령어와 함께 사용할 경우 해당 branch name으로 새 branch를 만들고 이동한다.