Express.js를 사용한 스퍼트 프로젝트

짧은 시간동안 많은 내용을 처음부터 공부해야 하느라 힘들었지만 너무나도 재밌었던 3주동안의 스퍼트 프로젝트가 마무리되었다. 에트리에서 연수연구원으로 근무하면서 퇴근 이후에 시간을 내서 했던 프로젝트라 아쉬운 부분이 많았지만 그래도 지금까지 완성한 프로젝트의 내용을 적어보려고 한다.

백엔드팀 자율 주제 스퍼트 프로젝트 (~02/04)

우리에게 주어졌던 스퍼트 프로젝트의 조건은 아래와 같다.

1. MySQL + Prisma ORM + 3개 테이블 이상(1:N, M:N, 최소 하나) + ERD
2. 인증 (JWT Token + Passport.js)
3. 3 Layer Architecture (Controller + Service + Repository)
4. Joi Validation -> Middleware로 구현, Body, Query, Pathparam 에 대한 Validator
5. Exception Handling Router
6. Test Code -> E2E(필수), Unit(선택)
7. 프로젝트에 대한 Docker Compose (API 소스코드 Dockerizing)
8. Nodemon을 프로젝트에 적용
9. Package.json에는 아래와 같은 scripts가 존재해야합니다.
- db:up = docker compose에서 Dev-DB만 실행합니다.
- db:down = Dev-DB 실행 종료
- db:push = Prisma ORM Schema push
- db:migrate = Prisma ORM Migrate Query 생성(Path Parameter는 자유)
10. Swagger(필수)
11. Git
- Github
- Git CLI
- Git Branch -> Git Flow
- Git commit Message -> Udacity Naming Style
12. Throttler(필수 x)
13. GET List 관련 API 에서 Pagination 추가하기

Notion에 프로젝트의 진행상황을 정리하면서 기록하였으며 추가적인 피드백 내용도 자연스럽게 섞여있다.

Spurt-Project-Delog | Notion

코드 및 도커를 사용한 애플리케이션 실행 방법은 Github에서 확인할 수 있다.

GitHub - juintination/Project-Delog: Implementation of a blog with category features in Velog, a spurt project.

 

---

e2e test

새로운 회원, 즉 User를 create하는 e2e 테스트를 구현했으며 $ npm test 커맨드를 실행하여 faker.js를 사용한 가상의 사용자를 생성할 수 있다. 프로젝트 후반부에 급하게 만든 테스트라 부족한 점이 많다. 다음 프로젝트에는 더 정교한 테스트를 진행해야겠다.

---

docs

프로젝트를 실행한 이후에 localhost:8080/docs에 접속하면 swagger로 작성한 api document를 볼 수 있다. 아직 example을 작성하지 않아서 미완성이라고 볼 수 있지만 다음에 진행할 프로젝트에는 api를 하나 만들 때마다 적용하여 완벽한 document를 작성해야겠다.

---

프로젝트 실행 화면

맨 처음 웰컴 페이지이다. 기능만 구현했기 때문에 휑한 모습을 볼 수 있다.

로그인 버튼을 누르면 다음 화면이 나온다. 이제 회원 가입을 위해 Sign Up 링크로 들어가자.

위의 화면에서 회원가입을 완료한 후에 로그인을 하면 다음과 같이 마이 페이지가 나온다.

회원가입을 할 때 자동으로 생성되는 "전체" 카테고리를 제외하고 휑한 모습을 볼 수 있다.

지금 확인했는데 카테고리를 추가할 수 있는 기능을 구현하지 않았다. 다음에 생각이 나면 추가해보도록 하겠다. 이제 글을 작성해보자.

위와 같이 제목과 내용 작성 뿐만 아니라 태그도 추가할 수 있다.

글 작성이 완료되면 위와 같이 방금 추가한 글의 제목에 링크가 걸려있는 것을 볼 수 있다.

해당 글로 링크를 타고 넘어가면 위와 같은 화면이 나오고 로그인을 한 상태라면 댓글을 작성할 수 있다.

위와 같이 댓글과 비밀 댓글을 작성했다. 로그아웃을 한 뒤에 다시 해당 페이지로 돌아와보자.

댓글을 작성하려면 로그인을 하라는 문구가 나오고 비밀 댓글로 작성한 댓글은 볼 수 없는 것도 확인할 수 있다.

맨 처음에 마이페이지에서 Update Profile 버튼을 누르면 위와 같은 화면이 뜨는데 프로필 수정이 끝나면 아래와 같이 수정된 프로필이 적용된다.

프로필 사진은 네이버 웨일의 귀여운 고래 사진으로 했다. 아무튼 닉네임을 바꿨기 때문에 아래와 같이 댓글 작성자의 닉네임도 기본 닉네임이었던 이름에서 변경한 닉네임으로 바뀌게 된다.

 

---

결론

나는 스퍼트 프로젝트의 조건 중에서 적용하지 못한 것들은 대표적으로 아래의 3가지가 있다.

1. JWT Token을 이용한 인증
2. Throttler
3. Pagination

필수가 아니었던 조건도 있지만 특히 JWT Token을 이용한 인증은 이틀정도 시간을 써서 도전해봤지만 적용이 되지 않아서 결국 세션을 이용한 인증만 구현했다.
그리고 적용하긴 했지만 기간에 맞춰 적용하지 못한 것이 있는데 바로 도커라이징이다.
네트워크를 로컬호스트로 지정했음에도 적용되지 않아서 결국 docker-compose에 대해 잠깐 공부하면서 해결했다. 시간이 나면 mysql에 볼륨도 지정하여 컨테이너를 재시작하더라도 정보가 남아있게 수정해야겠다.

---

느낀 점

맨 처음에 적어두었듯이 짧은 시간 동안 진행한 프로젝트라 정신없고 힘들었지만 그만큼 빠르게 성장했음을 느끼는 시간이었다. 몰랐던 개념들에 대해 알게 되었고, 처음으로 도커라이징을 제대로 해볼 수 있었던 기회였다. 다음에 또 프로젝트를 진행한다면 어떻게 해야 할지 어느 정도 방향을 잡을 수 있는 뜻깊은 시간이었던 것 같다.