[복지맵 프로젝트] 복지맵, 부산지역 복지프로그램정보를 한 곳에서 [CH1. 계획]

프로젝트 방향성

이번 프로젝트는 리액트, 타입스크립트, 타일윈드, 쥬스탄드, 리액트쿼리, KaKao Map API, 소켓 IO 등을 기반으로 개발되는 복지서비스 지도 정보와 실시간 정보 공유가 가능한 웹 사이트 이다.

 

PWA 설정을 통해서 모바일 오프라인에서도 웹사이트이지만 모바일과 유사한 환경에서 게임을 즐길 수 있도록 구현할 예정이다.  

 

무엇보다 이번 프로젝트의 컨셉은 부산의 행정구역을 누구나 쉽게 확인할 수 있도록 3D 느낌의 지도를 만들어서 이용할 생각이다(피그마를 사용할 계획이라서 2D 인데 3D 느낌인 지도라고 보면될 것 같다).

 

기술스택

지금 생각하고 있는 주요 기술 스택은 다음과 같다.

• React : SPA
• Typescript : 타입 안정성
• Tanstack-query/react : 서버 상태관리
• Zustand : 전역 상태관리
• D3 : 데이터 시각화(각 구/군 별로 프로그램이나 기관 수를 시각적으로 표시할 때 사용할 듯 하지만, 불필요하다고 생각되면 다른 것으로 대체 가능성이 있음)
• 소켓.IO : 실시간 양방향 통신을 통해 채팅 기능을 제공한다. 
• PWA : 모바일 환경에서도 웹 사이트를 애플리케이션처럼 사용할 수 있도록 해준다.
• Husky : 커밋 전(pre commit)에 린트, 프리티어, 테스트를 실행하여 보다 안정적이고 유지보수하기 좋은 개발환경을 구축
• NestJS : 백엔드(서버)
• PostgreSQL : 데이터베이스
• TypeORM : 데이터베이스 맵핑
• AWS S3 & CloudFront : 프론트엔드 배포
• 그 외 고민중

그 외에도 필요하다고 판단되는 스텍이 보이면 추가할 예정이다.

백엔드

이번에 배운 NestJS 를 사용해서 백엔드를 구축해볼 생각이다. 복지맵에 사용되는 데이터는 크롤링이나 공공데이터포털의 API 를 사용해서 구현할 예정인데, 공공데이터 포털 API의 경우에는 검색 기능이 제공되지 않는다. 따라서 해당 api 가 가진 모든 데이터를 조회하여 나의 데이터베이스에 담아서 이를 활용하고, 일정 주기를 정해서 갱신되는 데이터가 있을 때 api 를 통해 가져오는 식으로 처리할 예정이다. 또한 사용자가 자신이 찾은 복지정보를 즐겨찾기 같은 곳에 저장해두거나 다른 사람과 해당 정보를 공유할 수 있도록 Socket.io 를 사용해서 실시간 소통이 가능하도록 구성하여 보다 편의성을 증진할 생각이므로 이를 위해 Nest 를 활용할 생각이다.

대표기능

- 부산 지역별 사회복지지시설 현황

- 사회복지시설 길찾기 기능

- 사회복지시설 현황 세부 정보(제공하는 프로그램, 참여비용, 참여 가능 나이, 프로그램 진행 시기, 만족도 등등)

 

개발기간

현재 아무런 토대가 되어 있지 않는 상태를 생각하면 최소 3주 반을 생각하고 있다. 개발 속도와 다르게 데이터 부족, 기능 부족 등의 불가피한 연장 사유가 존재하면 1달 이상도 갈 수 있겠으나, 최대한 빨리 마무리하고 다음 단계인 SVG 관련 서비스 프로젝트로 넘어갈 생각이다. 

 

개발전략

1. 제일 먼저 디자인을 만든다.
2. 디자인을 토대로 프론트엔드를 구축한다.
3. 데이터를 연동해서 화면을 그린다. 이 때 기능마다 단위 테스트를 무조건 작성한다.
4. 테스트를 통과한 경우에만 원격 저장소에 커밋한다.

배포전략

프론트엔드

배포는 기본적으로 AWS S3와 CloudFront 에 빌드 파일을 올릴 생각이다. 이전 프로젝트에서 매번 수동으로 EC2에 올렸었는데, 이게 너무 불편해서 이번에는 CI/CD 를 구축하여 한 번의 푸쉬가 배포로 이어지도록 해볼 것이다. 

 

참고로 처음에는 귀찮더라도 모든 배포 프로세스 구축을 미리 해둘 생각이다. 프로그램을 어느 정도 완성하고 배포 파이프라인을 구축하는 것도 쉬운 일이 아니었기에, 어렵고 귀찮은 토대는 미리 쌓아둘 생각이다.

 

백엔드

서버의 경우에는 AWS EC2 를 사용할 예정이다. 즉, 프론트엔드와 백엔드 배포를 별도로 분리해서 맞춰갈 생각이다.

 

[CH2. 초기정검] 행정구역별 맵핑 작업을 시도하면서

[복지맵 프로젝트] 프로젝트 - 프론트엔드 진행사항 점검 [CH02]