킨더구리 v2 프로젝트 후기

인생 첫 프로젝트였던 킨더구리를 약 한 달에 거쳐 개선했다. 사실상 새로운 프로젝트에 가깝기 때문에 개선이라고 하기에는 어폐가 있다. 프로젝트를 어느 정도 마무리했으므로 작업 과정과 이전 버전과의 차이점을 정리해보려고 한다.

킨더구리

• 작년 5월 즈음에 경기도 구리 소재의 유치원과 어린이집을 지도로 볼 수 있는 간단한 웹 어플리케이션을 제작하였다. 유저는 이 웹 어플리케이션을 통해 유치원과 어린이집을 각각의 민간, 공립 등의 유형에 따라 검색하고 리스트와 지도로 확인할 수 있다. 
• 리액트로 클라이언트 단을 구성했다. 카카오맵 API를 사용하여 지도 조작을 하였고 경기도에서 제공하는 Open API로 데이터를 가져왔다. 서버 단은 서버라고 하기도 민망한데, 정적 파일을 내보내는 기능이 전부였다.
• 작년 말에 반응형 웹으로 디자인을 수정하기도 했다. 

킨더구리 v2

• 올해 3월부터 4월 초까지 기존 킨더구리를 업데이트 했다. 우선, 구리시 소재의 보육 관련 시설로 데이터 범위를 확대하여 유저는 유치원, 어린이집 뿐만 아니라 0세 전용 어린이집, 소아 야간진료 병원, 무장애 여행지를 검색할 수 있다. 또한 타입 뿐만 아니라 직접 검색어를 입력하여 리스트를 필터링할 수 있다. 그리고 내 위치(집)을 지도 위에 설정하여 확인할 수 있으며, 이는 이후 방문 시에도 유지된다. 
• 개발 측면에서 바뀐 점은 더 크다. 우선 원래 fetch API로 클라이언트에서 네트워크와 통신하여 데이터를 가져오던 부분을 들어내고 이를 서버로 옮겼다. 서버는 Apollo Server로 구성하여 GraphQL을 도입하였다. 아폴로에서 제공하는 RESTDataSource를 확장하여 Open API 데이터를 가져오고 처리하였다. 데이터 처리 이외의 네트워크 관련 코드는 그 이상 디테일하게 건드리지는 않았다. 권한 설정이나 CRUD 기능을 완전히 갖추지 않았기 때문이다. 
• 클라이언트 단은 기존의 리액트를 계속 작성하되 타입스크립트를 추가했다. 다만, 타입 정의는 매우 느슨하게 한 편이다. 그리고 Redux와 같은 상태 관리 라이브러리 대신 Apollo Client를 사용하여 GraphQL 데이터를 서버에서 가져왔다. Apollo Client에서 제공하는 Hook을 대부분 사용했고, Modal을 제외하고는 전부 함수 컴포넌트로 구성했다. 로컬 전역 상태 값은 Apollo Client의 makeVar로 관리했다. 반응형이라서 아주 유용했다. 그리고 이번에는 나름의 디자인 패턴을 적용하려고 시도해봤는데 명확한 기준이 적용되었는지는 잘 모르겠다.
• 카카오 맵 API와 관련된 코드를 이번에 상당히 많이 추가했는데 확실히 처음에 조작할 때보다 할 수 있는 게 많아진 것 같다는 느낌을 받았다. 이전보다 자바스크립트와 리액트에 더 익숙해졌고 이벤트 리스너나 렌더링, 라이프사이클 등을 어느 정도 이해하고 작업하니 버그를 수정하는 것이 훨씬 수월했다.
• Emotion과 Styled-Component로 뷰 디자인을 제작했다. 역시 처음 사용해봤는데 몇 번 다른 사람들 코드를 봐서 그런지 엉성하게 쓰긴 했지만 크게 어렵지는 않았다. 
• 배포는 netlify로 했고, 서버는 netlify-function이라고 aws lambda를 이용하여 서버리스로 배포하였다. 첨에 계속 고전했는데 배포를 하고 보니 엄청 간단했다. 앞으로 서버리스를 자주 쓸 것 같은데 좀 더 공부해봐야겠다. 
• 남은 할 일 - 아직 화면이 깨지는 부분이 있고, PWA 기능도 추가해야하고, 반응형 웹 페이지로 바꾸어야한다.
• 아쉬운 점 - 사실 데이터를 깔끔하고 확장성 있게 관리할 수 있는 코드는 아니다. pagination 처리도 아직 되지 않았고 클라이언트에서의 캐시 처리도 상세히 설정하지 않았다. 

한 달까지 걸릴 일은 아니였던 것 같은데 GraphQL과 Apollo를 공부하면서 작업하느라 생각보다 오래 걸렸다. 우선 어느 정도 마무리가 된 점은 다행이지만 아직 Apollo의 기능을 충분히 활용하진 못한 것 같아서 아쉬움이 남는다. 제대로 된 CRUD 웹 어플리케이션을 제작해보고 싶다. 

 

---

• 킨더구리 v2: kinderguri.netlify.app
• 킨더구리: kinderguri.herokuapp.com