국비 과정 중 개인적으로 로또 번호 추천 로직을 만들어 사용했습니다. 주변에서 공유해달라는 요청과 수료 이후 복습 및 스택 추가를 위해 프로젝트 주제로 정하게 되었고 이전 팀 프로젝트 때 못해본 Redis, cache, oauth2, multiThread 등의 기술과 클린코드, 성능 개선에 초점을 맞춰 Spring boot으로 backend을 완성했습니다.

이전 팀 프로젝트 frontend의 경우 팀원의 결정에 따르기만 한 점과 test code 작성 및 주요 기능 개발에 쫓겨 기여가 낮아 통신 흐름을 제대로 알지 못하는 점 등이 걸려 주력 언어를 가지자 생각하게 되었습니다.

팀 프로젝트에서 사용한 Vue.JS을 배울까 생각했지만, 기업에 많이 채택되며, Lib가 더 큰 React를 공부하게 되었고 Redux, Router, web Storage 등 다양한 기능을 사용하던 중 Type이 없는 JavaScript가 불편하고 버그 발생 시 문제를 찾는 데 오래 걸려. TypeScript로 변경하는 등의 크고 작은 이슈가 있었지만, 무사히 frontend를 완성했습니다.

국비 지원 팀 프로젝트에서는 AWS CodeDeploy를 통해 CD를 구현했는데 클라우드 환경 및 관련 기술에 처음으로 접했던 시기라 복잡하게 느껴졌었고 현재 개인 프로젝트에서 AWS S3를 사용하지 않아 EC2 환경에 더 간편하게 배포할 방법을 고민하던 중, Docker라는 기술이 눈에 띄었습니다.

Docker는 컨테이너 기술을 통해 환경 일관성을 보장하며, 애플리케이션을 패키징하고 배포하는 과정을 효율적으로 관리할 수 있고 또 스케일링을 통해 추후 대규모 트래픽에 대비할 수 있어 이러한 이유로 Docker를 활용하여 프로젝트 완성도를 높이기로 했습니다.

이후 스케일링을 통해 같은 spring boot image로 여러 컨테이너를 환경변수를 통해 간편하게 설정할 수 있었고 Nginx 리버스 프록시를 통해 여러 backend 서버에 요청을 전달하며 트래픽을 분산시켜 대비할 수 있었습니다.

React build 파일을 서빙할 웹 서버로 Nginx를 선택한 이유는 프리티어로 서버를 개설해서 가벼우면서 강력한 웹 서버가 필요했고, 또 로드 밸런싱 기능을 제공하여 웹 애플리케이션의 성능을 향상하기에 적합하다고 판단했기 때문입니다.

github Actions을 통해 test, build 과정을 거쳐 Docker Hub에 저장하고 EC2 내부에 설치된 self-hosted-runner를 동작시켜 Docker Compose를 통해 업데이트 및 컨테이너를 동작시키게 끔 CI/CD 자동화를 구현하고 자잘한 이슈들을 수정한 이후 개인 프로젝트를 마무리 지었습니다.

spring MVC와 달리 React 와 RestFul API 통신을 하며 값을 보낼 때 고려할 점, Exception 처리, Security 등 frontend 공부하며 backend를 더 깊게 고민하게 된 경험, 새로운 기능 도입에 대한 자신감과 DevOps의 막연한 두려움을 떨칠 수 있는 계기가 되었다고 생각합니다.

스택 및 사례 등을 포트폴리오에 표 형식으로 정리했습니다. 확인해주시면 감사하겠습니다.