접속 URL: https://www.daangn.shop/
새로운 카테고리를 추가하는 기능을 구현하는 챌린지였다. 기능으로 봤을 때는 단순해서 어려워 보이진 않았다. 리액트를 모르긴 하지만 대충 비빌 수 있다고 생각했다. 어떻게 평가할지가 굉장히 궁금했었는데 확장성과 가독성, 테스트를 고려해서 프로그램을 만들었는지에 대해 평가한다고 했다. 그런데 이런 문구가 있었다. 주어진 레거시 위에서. 그래서 나는 만약 내가 개발팀에서 이 일을 진행한다면 어떻게 진행해야 할지에 대해서 고민을 하며 과제를 진행했다.
메인 package.json에는 lint를 실행하도록 스크립트가 정의되어 있었는데 막상 서버와 클라이언트에는 lint를 실행하는 스크립트가 정의되어 있지 않아 실행되지 않았다. 이것 먼저 고치는 것부터 시작했다. Circle CI를 설정하고 일단 실패하도록 설정했다. 그다음에 lint를 적용했다.
팀원들과 같이 한다고 가정하고 프로젝트를 진행했다. 무작정 코드를 바꾸기보다는 점진적으로 바꿨고, 무조건 좋은 코드를 작성하는 것보다는 팀원들이 이해할 수 있어야 한다. 그래서 각 룰이 왜 변경되었는지 커맨트를 다 달았다.
그다음엔 배포를 하기 위해 CD를 적용했다. 인프라를 만들기 위해 terraform을 이용해서 정의하여 인프라를 구축하고 Circle CI설정을 다음과 같이 정의하여 CD를 구축했다. 매번 pull request를 올릴 때마다 해당 커밋으로 태그를 달아서 AWS ECR에 push 하도록 만들었다. 그러면 내가 배포하고 싶은 커밋으로 배포하면 배포가 된다.
version: 2
jobs:
build:
docker:
- image: circleci/node:12.13.0
- image: circleci/mysql:8.0.18
command: --default-authentication-plugin=mysql_native_password
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: test
working_directory: ~/repo
steps:
- run:
name: "Setup custom environment variables"
command: |
echo 'export AWS_KEY="<AWS_KEY>"' >> $BASH_ENV
echo 'export AWS_SECRET="<AWS_SECRET>"' >> $BASH_ENV
echo 'export REPO="<AWS_ECR_REPO>"' >> $BASH_ENV
echo 'export IMAGE="<IMAGE_NAME>"' >> $BASH_ENV
- checkout
- restore_cache:
keys:
- client-
- restore_cache:
keys:
- server-
- run: |
cd client
npm i --no-optional
- save_cache:
paths:
- client/node_modules
key: client-
- run: |
cd server
npm i
- save_cache:
paths:
- server/node_modules
key: server-
- run: |
cd client
npm run lint
npm test
npm run build:dev
- run: |
cd server
npm run lint
npm test
npm run build
- setup_remote_docker
- run:
command: |
cd client
npm run build
cd ../server
docker build -t $IMAGE .
$(docker run --rm -e AWS_ACCESS_KEY_ID=$AWS_KEY -e AWS_SECRET_ACCESS_KEY=$AWS_SECRET anigeo/awscli ecr get-login --no-include-email --region ap-northeast-2)
docker tag $IMAGE $REPO/$IMAGE:${CIRCLE_SHA1::7}
docker push $REPO/$IMAGE:${CIRCLE_SHA1::7}
e2e 테스트는 CodeceptJS를 이용해서 작성했다. 정말 제대로 하고 싶었는데 제대로 하려면 백도어 API도 만들고 해야 하는데 이건 너무 어려워서 간단하게 진행하기로 했다. 내가 구현해야 할 기능을 e2e 테스트로 정의하고 이 테스트를 통과시키기 위해 기능을 구현했다.
서버 쪽은 커버리지 100%를 달성했다. 내 인생 첫 커버리지 100%였다. pull request를 보낼 때 커버리지를 확인하여 만약 이 전 커버리지보다 낮아지면 merge가 안되도록 하고 싶었다. 그래서 그런 봇들이 있나 찾아봤는데 찾지 못했다. 아마 Code Climate을 사용하면 쉽게 되겠지만 유료라서 그렇게 하진 못했다. 직접 만들까 했는데 일단 커버리지 100%를 달성하니까 내 스스로 직접 확인하여 100%인지 확인했다. 자동으로 확인 안 해도 내가 직접 수동으로 확인했다. 역시 한 번 달성하면 절대 내리기 싫었다. 처음에 커버리지를 달성하는 게 중요하다는 것을 배웠다.
https://www.daangn.shop도메인을 달았다. 가비아에서 daangn을 검색했는데 500원 밖에 안 해서 구매했다. AWS 로드밸런서에서 www 없이 daangn.shop에 접속했을 때 다음과 같이 설정하면 www.daangn.shop으로 리다렉션 시킬 수 있다는 것을 처음 배웠다.
자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기
코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!