4주 프로젝트 - 안전궁금해 (GIKIMI)

4주 프로젝트를 마치며 👋

GIKIMI 팀원분들과 함께 안전궁금해 서비스를 만들어 보았다.

어느새 성큼성큼 지나간, 프로젝트 여정을 정리해 보려고 한다.

시작점 🤹‍♀️

프로젝트 첫날 이었던 11월 24일, 이틀 동안 팀원분들과 줄곧 어떤 서비스를 만들까 고민을 계속했던 기억이 난다. 아이디어를 열댓 번 주고받다가, 마음을 맞추게 된 동네 치안 서비스!
완벽한 치안 정보를 제공하기는 어렵지 않을까 하는 생각이 있었지만, 우리는 동네 치안 판단에 도움을 줄 수 있는 어느 정도를 기준으로 삼았다.
그리고 붙여진 안전궁금해 라는 이름! 부제는 " 우리 동네 안전 완전 궁금해! 🤨 ".
아직도 맘에 쏙 드는 부제라는 건 안비밀,,,

배움의 에피소드 🧗‍♀️

Typescript

우리는 프로젝트 초반에 한 번 넘어졌다. 이번 프로젝트를 협업에서 유용하게 쓰이고, 더욱더 클린한 개발 환경을 위한 typescript를 사용해 보자고 의견을 맞췄고, 세팅을 시작했다.
우선, react를 typescript 환경으로 잘 세팅했고, eslint와 prettier등으로 추가적인 환경설정을 해주었다. 하지만, tsconfig.json을 수정하면서 compilerOptions.jsx의 이유 모를 수정 불가를 경험했고 해결하고자 3일 동안 노력했지만, 시간 조절을 위해서 결국 javascript로 재 세팅을 하였다.

Git 커밋 컨벤션

이번 프로젝트에서도 커밋 팀룰을 만들었다. 이전에 Git flow가 꼬이거나, 코드에 문제점이 생겼을 때 이전 커밋 기록들의 메시지를 보고 찾아서 해결이 가능했던 경험이 있었고, feat: servicePage 헤더 구현(로그인 모달)와 같이 타입, 구현 내용을 기록하는 것은 이번에도 역시 도움이 되었다. .gitignore 파일이나 수정 내용이 없는 경우와 같이 카테고리가 다른 커밋들도 메시지에 나타낼 수 있는 등 커밋 컨벤션은 앞으로도 가져야 할 룰인 것 같다.

GraphQL & Apollo

이전 netflex 프로젝트에서 rest api의 overfetching 이슈에 대한 아쉬움 때문에 graphql도 사용해보자는 의견을 나누었고, server와 client는 graphql을 사용하게 되었다.
나는 Front-end를 담당하였고, graphql을 보다 효율적으로 사용할 수 있는 apollo client를 함께 사용하기 위해 공부했다. 개발 기간 동안 느껴본 그랩폴로 세트는 별점 4점은 거뜬히 줄 수 있을 만큼 편리했다. 원하는 데이터를 모두 골라서 받을 수 있고, 백엔드 팀원분께 부탁할 필요 없이 직접 테스트해 볼 수 있고, 다른 Ajax(fetch, axios)를 사용했을 때 보다 코드도 단축되는 등 좋은 점이 많았다. 물론 데이터 서치 깊이 등 조심해야 할 점도 있다.

hooks

Apollo Client에서 제공하는 hooks를 사용하기 위해, React Function Component를 사용하였고 여기에 날개를 달아주는 React hooks도 역시 함께 사용하였다. useEffect는 기능 구현에 정말 여러 도움을 주었지만, 딱 한번만에 에러 없이 사용한 기억은 없다. 아마도 있지만 손에 꼽는다. Apollo hooks와 함께 사용하면서 이중 훅스, 무한 루프 등으로 시행착오를 경험했다. 새롭게 사용해본 Apollo만큼이나 hooks에 대한 공부도 했던 것 같다.

배포

우리는 일주일 동안 https 배포에 힘을 쏟았다. 팀원 모두가 https 배포를 해낸 경험이 없었기에 애초에 모두 머리를 모아 해결하려고 했었다. 정말 배포로 헬데, 구글링, AWS, stackoverflow 등 계속 묻고 찾아보고 수정해보는 것을 무한 반복했다. 우리 팀 배포의 전체적인 흐름은
1. _Domain_
Route53 에서 클라이언트 도메인 구매, freenom에서 서버 도메인 무료 구매 후 Route53에 등록
2. _Client_
클라이언트 도메인으로 빌드 파일 S3 정적 호스팅(http) -> CloudFront https로 리다이렉션
3. _Server_
ACM에서 발급받은 SSL인증서와 EC2등록하여 로드밸런서 생성

이다. 우리가 차근차근 풀어나가면서도 놓쳤던 부분은 클라이언트와 서버에게 각각의 도메인을 지정해 주는 것 이었다. Route53에서 구매한 도메인만으로 클라이언트, 서버를 모두 연결했었고, 이 때문에 도메인 주소로 접속 시 새로고침을 할 때마다 클라이언트와 서버가 랜덤으로 화면에 렌더되었던 것이었다. 이런 몇번의 우여곡절 끝에 배포에 성공했고, 배포지옥을 이겨낸 멋진 팀원분들과 바쁨에도 시간 내 자기 일처럼 도움을 주셨던 분들에게 정말 감사하다.

그 과정을 지나...🏄‍♀️

4주가 어느새 이렇게 지나갔는지! 시간은 너무나 빠르게 간다. 프로젝트 첫날부터 4번 정도는 문제 해결 이슈를 기록하다가 중반부부터는 블로깅의 블 자도 생각하지 않았다. 그만큼 정신없이 문제 해결에 애썼다는 이야기이다(나만의 괜찮아법). 그 대신 그 당시 노트에 한껏 날려써놓은 이슈들이 많이 있는데, 이걸 보면서 지금까지 회고로 정리해 보았다.
이전에 블로깅한 2주 프로젝트 회고에서, 다음 프로젝트의 세부 목표중 아주 큰 하나는 배포가 될 것 같다. 라는 문장을 보았다. 이전에 가진 목표를 이번 프로젝트에서 이뤄낸 것이 새삼 뿌듯하다. 그리고 함께 열심히 달려온 팀원분들에게 감사하고, 아침마다 있었던 스탠드업 미팅이 생각날 것 같다.
프로젝트 기간 동안 미처 세세하게 구현하지 못한 기능들은 리팩토링으로 계속해서 보완할 예정이다. 끝났지만 끝나지 않은 프로젝트. 앞으로도 화이팅!