프로젝트 시작하기

배경

간단한 Todo 앱을 AWS에 배포해보는 팀 프로젝트를 진행했습니다.

3명이 한 조가 되어 프로젝트를 진행했고, 저는 그 중에서 web 개발과 aws 람다에 집중했습니다.

초기 토폴로지 구상도

프로젝트의 핵심은 aws transit gateway를 사용해보는 것이었습니다.

 

VM환경에서 VPN을 직접 만들고, open vswitch도 직접 만들어보고 했었는데 이 과정이 꽤나 복잡하고 힘들었습니다. 이를 간단하게 해결해줄 수 있는 aws의 transit gateway라는 서비스가 존재한다 하여 이를 적용해볼 수 있는 토폴로지를 구상했습니다.

 

가장 앞단에서 트래픽을 받아주는 reverse proxy 서버, 그리고 메인이 되는 web서버, db서버가 각각 다른 vpc로 존재합니다.

웹 백엔드 서버는 aws lambda로 처리할 생각이므로 프론트 서버와 db서버만 존재합니다.

실행 - 템플릿 수정하기

CRUD를 가장 간단하게 구현해볼 수 있는 서비스가 Todo라고 생각하여 개발을 시작했습니다.

구글에 React Todo Template라고 검색하니 많은 자료가 나왔고, 저는 그 중 하나를 선택했습니다.

 

github 레포지토리 링크는 다음과 같습니다: 

https://github.com/Clear-Wisdom/simpleToDo

GitHub - Clear-Wisdom/simpleToDo

 

템플릿이 chakra-ui로 되어있어서 제가 익숙한 tailwind css로 갈아엎었습니다.

그리고 todo를 만들고 드래그 앤 드롭으로 todo의 상태(unsigned, inprogress 등) 변경, 클릭으로 간단히 삭제한다는 점은 굉장히 직관적이고 좋았지만

 

원래 목적인 CRUD를 구현하려면 edit 버튼을 눌러야 하고, edit이 포함되는 순간 '클릭 = 삭제'라는 동작은 굉장히 불편한 존재가 되기때문에 이 또한 수정했습니다.

 

이외에도 같은 칸에서 드래그하다가 다시 같은 칸에 놓으면 todo가 사라지는 문제 등 자잘한 버그들을 수정하면서 개발을 진행했습니다.

 

개발에 많은 시간을 들였지만, 이 프로젝트에서 웹 개발 자체는 크게 중요한건 아니므로 이정도로 간단하게 언급만 하고 넘어가겠습니다.

 

다음부터는 람다 구성과 프로젝트 로직, 트러블 슈팅에 대해 더욱 자세히 다뤄보도록 하겠습니다.