[JS] 협업 툴 개념 및 정리 - node.js 패키지 툴(npm, yarm, brew) / Git 클라이언트 프로그램(Fork, Gitlab, gitbash)

1. Git Bash

Git Bash란 컴퓨터 OS와 상관없이 리눅스 베이스 터미널용 Git이다.
코드 관리나 협업에 사용하기 좋은 형상관리 툴이다.
따라서 생긴것은 리눅스 터미널 화면이며, 리눅스 명령어로 사용가능하다.
즉, window에서도 리눅스 체제의 명령어를 쓸 수 있도록 해준다.
설치 후 git 이라는 코드를 치면 사용가능한 작업 및 명령어들이 출력된다.

2. Gitlab

Github는 웹사이트이며, 비교하자면 블로그 같은 느낌이다.
내 코드를 올릴 수 있는 각각의 계정들이 있으며, 오픈소스는 clone을 통해 불러오기도 가능하다.
Gitlab은 비슷하지만, 비교하자면 카페로 볼 수 있다.
gitlab마다 링크가 있다. 우리의 경우 웹으로 접속 가능.
그 이유는 Gitlab은 자신의 서버에 직접 설치해서 사용이 가능하기 때문.
(저기 서버실에서 관리중이다.)
클라우드 버전 관리 시스템도 존재하기 때문에, 보안이 중요한 프로젝트에서 우리들끼리만 볼 수 있게 사용하는 것이 가능하다.

3. Fork

Git Bash를 이용해 형상관리를 하다보면 명령어를 일일히 외워서 사용하고 또 중간점검 등의 작업을 진행할 때 보기 불편한 부분들이 있다.
이럴 때 Git 클라이언트 프로그램을 사용하면 편하다.
Fork의 경우 Git과 연동이 되어서, 중간다리 역할을 해준다.
가장 많이 사용하는 것은 commit과 push인데,
Fork에서 commit을 하면 Fork에만 저장이 되고 깃허브 저장소에 반영은 되지 않는다.
즉, 중간 저장만 되는 것. 저장소에 최종 반영을 하기 위해서는 push를 하면 된다.
또 버전 관리나 수정사항이 쉬운게, UI 자체가 점과 선 등으로 보기 좋게 되어있어서 각각 수정한 사람, 수정내용, 어디가 수정이 되었는지 등의 정보를 한눈에 볼 수 있는 점이 좋다.
나는 fork로 branch를 내리고 거기에 수정사항을 저장하였다. 그러면 자동으로 Gitlab에 등록되는 것과 마찬가지.

02. git 설치 및 버젼관리(저장소 만들기 add, commit)

4. node.js와 npm, 그리고 yarn

node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
JavaScript에서 모듈을 설치할 수 있는 패키지 관리자 툴. 크게 3가지가 있다.
1. npm 2. yarm 3. brew(Mac에서 주로 사용)
자바스크립트는 기존에 프로그래밍 언어가 구동되는 환경이 브라우저만 존재했는데 node.js를 사용하면 웹 뿐만 아니라 터미널, CMD 등등에서도 자바스크립트 구동이 가능하다.
또한 서버도 만들 수 있어서 프론트여도 서버를 구동해서 실행해볼 수 있는 환경을 제공하는 것.
npm은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. node.js의 기본 패키지 관리자.
쉽게 얘기해서 nodejs안에 있는 기능들을 이 npm이라는 매니저를 부르면 알아서 패키지를 설치해주고
관리해주고 한다.
npm init 을 하면 기본적인 pakage.json이 만들어지는데, 여기에는 내가 설치하고 사용할 수 있는 패키지들의 리스트와 버전 정보가 나온다.
즉, npm install 패키지 이름 이렇게만 해도 다 설치가 되는 것!
yarn은 npm과 같은 패키지 매니저인데 조금 더 우수하다.
facebook에서 만들었고, 속도나 안정성이 좀 더 나은 편.
따라서 npm으로 yarn을 설치해주고, yarn으로 git bash로 저장하기 전인 fork에 업데이트를 해줄 것이다.
키워드는 yarn build를 사용할 것.

Node.js는 버전별로 예민하다. 우리는 10.x버전으로 맞춤.

이전버전 release에서 10.x를 설치한다.

이전 릴리스 | Node.js

exe 파일은 그냥 실행만 됨.

 

1) 저장소 만들기

첫 작업은 어디에 저장할 것인지 경로를 지정해주는 것.
원하는 경로로 이동해서 "나 여기에서 작업할꺼야!" 라고 선언해줘야 한다.

git init

초기화한다고 생각하면 편하다. 이제부터 이 경로에 .git 폴더가 숨겨진 상태로 생성되고
여기에 버전 정보가 저장된다.

 

2) gitbash 가서 ssh키 만들기

보안을 위한 키가 필요하다.

ssh-keygen

우리는 gitlab에서 소스를 불러올 것이기 때문에, 비밀번호를 만들고 키로 내가 사용자임을 인증해서 보안을 지키면서 가져오는 것.

[Git]Gitlab(2) - 윈도우에서 gitlab SSH key 등록하기

3)gitlab에 ssh 저장 후 권한 받기

gitlab 가서 profile/SSH Keys로 저장한다.

 

3)기존 저장소 clone 하기

이미 만들어진 파일을 받아오는 작업이므로, gitlab에서 가져온 링크를 입력해서 작업을 불러온다.

git clone 작업주소

업무를 위해 가져온 것은 C:\repository의 wiki와 manual이다.
wiki는 마크다운으로 글씨만 쓰고 그냥 html 파일로 꾸며져 있는 것.
manual은 로컬에 띄우기 위해 다운받은 것이다.
메뉴얼로만 크롬에 띄워서 익숙한 형태로 확인할 수 있다.(file:///C:/repository/manual/dist/html/index.html)

 

4) 마크다운 수정 후 저장하고 로컬에서 확인하기

나는 아까 fork에서 새로운 branch를 따서 저장했다.
fork -> gitlab 이렇게 저장이 두번에 걸쳐서 저장되는 것.
우선 wiki의 마크다운을 수정 후에 gitbash를 이용해서 yarn build라는 키워드를 사용, 로컬에 있는 manual에 적용한다.
그러면 내가 수정한 사항을 manual에 적용시키고 어떻게 뜨는지 웹에서 확인해볼 수 있다.

 

5) yarn build 과정

실제로 fork에 내가 만든 branch가 수정후 적용(commit, push)하면 기록이 남게 되는데,
build의 경우 로컬에 저장소가 있고 그걸 업데이트 한 후에 최종 저장본을 fork에 저장하는거라 yarn build를 하게 되면 프로젝트 내에 build 폴더가 생겨서, 거기 안에 파일이 지워졌다가 수정사항에 맞게 다시 생성되는 것을 볼 수 있다.

 

++추가 사항)

1) .gitignore 파일 안에 목록을 포함하면 git에서 clone으로 받아올 때 해당 파일은 무시된 체로 빼고 다운로드 된다.

2) manual 폴더 안에 package.json 파일을 열어보면(우클릭해서 vsCode로 열기), 패키지들 모음이 있는데, 이걸 yarn이나 npm으로 설치가 가능하다. 즉, yarn 하고 뒤에 키값을 붙이면 뒤에 value 버전 또는 맞는걸로 설치가 되는 것.

  "gulp-sourcemaps": "^3.1.7",

예를 들어 gulp는 묶는거고, 묶음파일의 설명을 뒤에 붙이는 식의 사용 가능한 키워드가 저장되어 있는 것이다.

3) 로컬에서 파일을 열어볼 때에는 dist 안에 있는 html 파일을 열어야 원하는 웹 화면이 나온다.

4) 만약 .env 파일이 생긴게 이상하다면 이름을 수정해서 .env 뒤에 붙은 요상한 확장자를 다 지워주자.

5) ssh 키를 생성하면 도스화면에 그림처럼 비밀번호가 생성된다. 해당 키를 vs code나 텍스트문서로 열어보면 키가 나온다. 보안을 위함.

++참고 자료

자바스크립트 의존성 지옥