Javascript와 Node.js로 Git을 통해 협업하기
프로젝트를 효과적으로 관리하고 팀원들과 협업하기 위해 Git을 활용하는 것이 필수적이다. 특히, 다양한 개발 환경에서의 버전 관리와 코드 리뷰, 그리고 자동화된 테스트 환경 설정은 프로젝트의 성공적인 진행을 위한 중요한 요소다. 다음은 Git과 Node.js를 활용한 협업 과정에 대한 설명이다.
Prerequisites
- Git: 프로젝트 소스 코드의 버전 관리를 위한 도구
- Node.js: 서버 측 Javascript 환경
- Yarn: 페이스북에서 개발한 패키지 매니저
Git과 GitHub을 활용한 협업 개발
Git은 프로젝트의 소스 코드 버전 관리를 효율적으로 처리하기 위한 도구이며, GitHub는 Git의 원격 저장소를 생성하고 관리할 수 있는 기능을 제공한다. 협업 과정에서 이슈와 pull request를 중심으로 요구사항을 관리할 수 있다.
Git 저장소 생성
$ mkdir awesome-javascript
$ cd awesome-javascript
$ git initGitHub 계정에서 동일한 이름의 저장소를 생성한 후, 원격 저장소를 추가한다.
$ git remote add origin 'Github 주소'GitHub에 이슈 등록하기
이슈는 코드 작성 전에 해결해야 할 문제나 요구사항을 명확하게 정의하는 데 중요하다. GitHub의 이슈 관리 기능을 사용하면 팀원들과 쉽게 공유할 수 있다. GitHub 저장소의 Issues 탭에서 'New issue'를 클릭하여 이슈를 작성할 수 있다.
또한, 이슈와 pull request에 대한 템플릿을 마크다운 형식으로 관리할 수 있다. .github 폴더에 ISSUE_TEMPLATE.md와 PULL_REQUEST_TEMPLATE.md 파일을 생성하여 템플릿을 관리하자.
$ git checkout -b devops/github-templates
$ mkdir .github
$ touch .github/ISSUE_TEMPLATE.md
$ touch .github/PULL_REQUEST_TEMPLATE.md
$ git add .
$ git commit -m ':memo: Add GitHub Templates'
$ git push -u origin devops/github-templatesNode.js와 Yarn으로 개발 환경 설정하기
Node.js와 npm, Yarn은 코드 검증, 테스트, 빌드, 배포 과정에서 유용한 개발 환경을 제공한다. Node.js는 Google의 V8 엔진으로 만들어진 JavaScript 런타임 환경이다. Yarn은 npm을 대체하기 위해 페이스북에서 개발된 패키지 매니저로, 보안 및 빌드 성능 문제를 해결하기 위해 설계되었다.
Node.js 설치 후, Yarn을 전역으로 설치하자.
$ npm install yarn -g프로젝트 생성
yarn init 명령어를 실행하여 프로젝트 기본 정보를 입력하면 새로운 프로젝트가 생성된다. 이 과정에서 package.json 파일이 생성되며, 프로젝트와 패키지 간의 의존성을 관리하는 속성이 포함된다.
{
"name": "awesome-javascript",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/kim6394/awesome-javascript.git",
"author": "gyuseok <gyuseok6394@gmail.com>",
"license": "MIT"
}패키지 설치
예를 들어, node-fetch 모듈을 설치하면 package.json의 dependencies 속성이 자동으로 업데이트된다.
$ yarn add node-fetch"dependencies": {
"node-fetch": "^2.6.0"
}yarn.lock 파일은 모든 시스템에서 패키지 버전을 일관되게 관리하기 위해 생성된다. 사용자는 이 파일을 직접 수정하지 말고, Yarn의 CLI 명령어로 관리해야 한다.
프로젝트 공유
프로젝트를 Git의 원격 저장소에 반영하여 팀원들과 공유하자. 프로젝트의 package.json과 yarn.lock 파일을 함께 관리하여 안정적인 애플리케이션 운영이 가능하게 한다. node_modules 폴더는 제외시켜야 하므로, .gitignore 파일에 추가하여 Git 관리 대상에서 제외하자.
$ echo "node_modules/" > .gitignore이슈 해결 관련 브랜치 생성 및 프로젝트 푸시
이슈 해결과 관련된 브랜치를 생성하고, 프로젝트를 GitHub에 푸시한다.
$ git add .
$ git checkout -b issue/1
$ git commit -m 'Create project with Yarn'
$ git push -u origin issue/1푸시가 완료되면 GitHub 저장소에 pull request가 생성된 것을 확인할 수 있다. pull request는 작성한 코드를 master 브랜치에 병합하기 위해 코드 리뷰를 요청하는 작업이다.
pull request 시 주의할 점
- 리뷰어에게 충분한 정보를 제공해야 한다.
- 새로운 기능을 추가했다면, 기능 사용과 테스트 시나리오를 제공해야 한다.
- 개발 환경이 변경되었다면 변경 내역을 포함해야 한다.
Jest로 테스트 환경 설정
프로젝트 진행 시, 구현 코드의 검증을 위한 테스트 환경이 필요하다. 자바스크립트 테스트 도구로는 Jest를 많이 사용한다.
테스트 코드 작성
구현 코드 작성 전, 테스트 코드를 작성하여 의도를 표현한다. 테스트 코드는 tests 폴더에, 구현 코드는 lib 폴더에 저장한다.
$ mkdir __tests__ lib
$ touch __tests__/github.test.jsgithub.test.js에 다음과 같이 테스트 코드를 작성한다.
const GitHub = require('../lib/github')
describe('Integration with GitHub API', () => {
let github
beforeAll(() => {
github = new GitHub({
accessToken: process.env.ACCESS_TOKEN,
baseURL: 'https://api.github.com',
})
})
test('Get a user', async () => {
const res = await github.getUser('gyoogle')
expect(res).toEqual(
expect.objectContaining({
login: 'gyoogle',
})
)
})
})Jest 설치
테스트 코드를 실행하려면 Jest를 설치하고, yarn test 명령어로 실행한다.
$ yarn add jest --devpackage.json에 테스트 명령을 위한 script 속성을 설정한다.
"scripts": {
"test": "jest"
},
"dependencies": {
"node-fetch": "^2.6.0"
},
"devDependencies": {
"jest": "^24.8.0"
}구현 코드 작성
아직 구현 코드를 작성하지 않았기 때문에 테스트가 실행되지 않는다. lib 폴더에 구현 코드를 작성하자.
const fetch = require('node-fetch')
class GitHub {
constructor({ accessToken, baseURL }) {
this.accessToken = accessToken
this.baseURL = baseURL
}
async getUser(username) {
if (!this.accessToken) {
throw new Error('accessToken is required.')
}
return fetch(`${this.baseURL}/users/${username}`, {
method: 'GET',
headers: {
Authorization: `token ${this.accessToken}`,
'Content-Type': 'application/json',
},
}).then(res => res.json())
}
}
module.exports = GitHub이제 GitHub에서 access token을 생성하여 테스트하자.
$ ACCESS_TOKEN=`자신의 토큰 코드` yarn test정상적으로 작동하면 다음과 같은 결과가 출력된다.
yarn run v1.10.1
$ jest
PASS __tests__/github.test.js
Integration with GitHub API
√ Get a user (947ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.758s
Ran all test suites.
Done in 5.30s.Travis CI를 활용한 리뷰 환경 개선
협업 과정에서는 코드 작성 후 pull request를 생성하여 병합까지 많은 검증이 필요하다. 지속적인 코드 리뷰를 위해 자동화 도구를 활용하자. Travis CI는 코드 컨벤션 검증과 테스트 자동화를 지원한다.
GitHub-Travis CI 연동
1.Travis CI에서 GitHub 계정으로 로그인한다.
2.Travis CI Repositories에서 연결할 repository를 허용한다.
3.프로젝트에 .travis.yml 설정 파일을 추가한다.
language: node_js
node_js:
- 10.15.0
cache:
yarn: true
directories:
- node_modules
env:
global:
- PATH=$HOME/.yarn/bin:$PATH
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash
script:
- yarn install
- yarn testNode.js 버전 유지시키기
개발자 간의 Node.js 버전이 다르면 문제가 발생할 수 있다. 안정적인 서비스를 위해 로컬 시스템, CI 서버, 빌드 서버의 Node.js 버전을 일관되게 유지하는 것이 중요하다.
package.json에서 engines 속성과 .nvmrc 파일을 활용하여 버전을 유지하자.
"engines": {
"node": ">=10.15.3"
}.nvmrc 파일을 추가하고 nvm use 명령어를 실행하여 버전을 설정한다.
$ echo "10.15.3" > .nvmrc
$ git add .
$ nvm use
Found '/Users/user/github/awesome-javascript/.nvmrc' with version <10.15.3>
Now using node v10.15.3 (npm v6.4.1)
...
$ git commit -m 'Add .nvmrc to maintain the same Node.js LTS version'지금까지 알아본 점
- Git과 GitHub을 활용한 협업 환경 구축
- Node.js 기반 개발 및 테스트 환경 설정
- 개발 환경을 공유하고 리뷰하는 과정에서 발생한 문제 해결
지속적인 코드 리뷰를 위해 ESLint, Jest, Codecov 등의 도구를 활용하여 자동화를 시키면 개발자들은 코드 의도에만 집중할 수 있다. 협업 과정에서 테스트 코드는 예기치 못한 문제 발생 확률을 줄이고, 구현 코드의 의도를 효과적으로 전달할 수 있는 중요한 도구다.
So...
JavaScript와 Node.js를 활용한 프로젝트에서 Git과 GitHub을 통해 협업하는 것은 소스 코드의 일관성 유지와 팀원 간의 원활한 소통에 필수적이다. 이를 통해 각자의 작업을 효율적으로 관리하고, 코드의 품질을 유지하며, 개발 환경을 공유할 수 있다. 또한, Jest를 이용한 테스트 환경과 Travis CI 같은 CI 도구를 활용한 자동화된 검증 절차를 통해 코드의 안정성을 높이고, 코드 리뷰 과정을 간소화할 수 있다. 이러한 협업 및 자동화 환경은 프로젝트의 성공적인 진행을 보장하며, 팀원들의 작업 효율성을 극대화한다.
