프로젝트/복지맵(일시중단) (12) 썸네일형 리스트형 복지맵 프로젝트, 잠정 중단하게 된 이유 이 포스트 작성 배경혹시나 우연히 혹은 궁금증에 해당 카테고리를 확인하시는 분이 있으실 수 있어서 이에 대한 안내 메시지를 남기고자 포스트를 작성합니다. 해당 프로젝트는 조금의 사연이 있습니다. 2024년 4월 중순에서 시작하여 5월 초사이 까지 개발을 해왔던 이 프로젝트는 이전에 리액트로 만들어 두었다가 어딘가에 박혀있던 프로젝트의 코드 퀄리티나 기능, 디자인, 사용성 등에 있어서 부족하다고 판단하여 이를 개선하는 동안 잠시 개발이 중단되었습니다. 이후 과거 프로젝트의 개선이 어느 정도 완료되고, 최근 다시 개발에 들어가고 있었던 상황입니다. 그런데, 이를 잠정 중단하겠다는 것이 현재이고, 이에 대한 사유를 소개하는 포스트가 되겠습니다. 복지맵 프로젝트 간략 소개 잠시 동안 어떤 구성을 가져갔는지를.. [복지맵 프로젝트] 트러블 슈팅 모음집 ① 오늘의 명언 "모든 문제에는 실마리가 존재한다." [리셋 문제 1 ] 필터 모달을 닫는 경우 체크 항목이 초기화되는 문제 해당 문제는 단순하게 해결되며, [리셋 문제2] 로 이어집니다.문제상황,사용자가 필터 기능을 사용하여 검색을 하고, 해당 창을 닫은 후 다시 사용하려고 하면, 기존에 체크 영역이 초기화되는 무제가 있습니다.필터창을 열고 체크한 상태 [닫기] 후 다시 필터창을 연 후 개선과정,원인분석해당 문제의 1차적인 원인은 showFilters 라는 true or false를 담고 있는 상태가 변경될 때 마다 해당 필터창이 브라우저 렌더링에서 완전히 배제되었다가 생겨나면서 생기는 문제 입니다. 이 문제를 해결하는 단순한 방법은 showFilters 상태에 따라서 해당 필터 모달의 클래스를 동적으.. [복지맵 프로젝트] ~ 2024.05.10 진행사항 점검[CH04] 현재 까지 진행도뉴스 검색기능복지맵과 연관하여 추가적으로 제공할 수 있는 기능이 무엇이 있을까 고민하다가. 네이버 검색 api 를 사용하여 복지 관련 뉴스를 가져와서 보여주면 좋을 것 같아서 해당 기능을 추가하였다. 해당 프로젝트에서 제공되는 복지서비스 정보는 부산 지역에 한정하여 제공할 생각이기 때문에, 검색 필터링을 부산 구군별 + 대상별로 한정하여 기능을 구현하였다. 복지맵과 서비스 상세내가 이번에 계획한 복지맵 프로젝트의 주요 컨셉은 말그대로 지도이다. 물론 그 지도가 카카오 맵 api 와 같은 sdk 를 사용한 방식 보다는 실제 SVG 를 사용하여 각 구군별 선택 시 해당 지역에서 제공하는 서비스 목록을 렌더링하여 보여주는 것이 주요 컨셉이었다. 레이아웃이 변경 됨원래 기존의 복지맵은 지리도.. [복지맵] 복지맵 프로젝트 테스트 코드 아카이브 보호되어 있는 글입니다. [복지맵 프로젝트] ~ 2024.04.29 진행사항 점검[CH03] 현재 까지 진행사항아래 시연 GIF 는 27일 경에 진행된 것인데, 각 SVG 맵에서 구분된 구역을 포커스 하면 해당 지역의 서비스 상세 내역이 아코디언 형식으로 조회할 수 있도록 목록이 렌더링되는 형태로 구현해두었다. 그리고 현재는 카카오 MAP SDK 를 사용해서 각 구/군별로 복지기관의 위치를 다중 마커로 표시하였고, 아래 이미지에는 안 나와 있지만, 현재 사용자의 좌표 또한 마커로 표시되도록 해두었다. 사용자 위치 같은 경우에는 HTTPS 에서만 지원해준다는데, 어차피 배포할 때는 HTTPS 로 할 것이므로 큰 문제는 없을 듯하다. 향후 방향성길찾기 기능길찾기 기능을 구현하려고 한다. 사용자가 서비스 목록을 알더라도 그 기관이 어디에 위치해 있는지, 현재 위치에서 얼마나 멀어져 있는지 .. [복지맵 프로젝트] 2024.04.25 ~ 26 진행사항 점검 [CH02] 프로젝트의 컨셉현재 생각하고 있는 프로젝트의 컨셉은 사용자가 사이트에 접속을 하면 부산 행정 구역을 바로 확인할 수 있게 하고, 각 행정 구역을 클릭하면 구/군 별로 사용자가 이용할 수 있는 복지프로그램/기관 목록을 리스트 형식으로 표시하는 것이다. 이 때 사용자가 정확한 위치 정보를 확인 하고자 한다면, 이 때는 리스트의 상단에 지도보기(길찾기) 아이콘을 클릭하면 즉시, 해당 지역의 위치좌표와 마커가 표시되도록 한다. 현재 까지 구현 단계(2024.04.25 ~04.26) 위 컨셉에 따라 사용자가 루트 페이지에 접속하면 부산의 각 행정구역을 시각적으로 확인하고 선택할 수 있도록 해당 이미지를 SVG 를 사용하여 각 행정구역 별로 이벤트를 등록 가능하도록 작업하였다. 피그마로 작업하였기 때문에, 그나.. [복지맵 프로젝트] 백엔드 환경설정 - NestJS (+Docker + Postgres + TypeORM + 유효성 검사 패키지) 이전 환경 셋팅 - Vite + React + PWA [복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자duklook.tistory.com 복지맵에서 사용할 백엔드 언어이번 프로젝트에서 사용되는 언어는 NestJS 이다. 이는 NodeJS Express 를 기반으로 구축된 백엔드 프레임워크로서 DI, IoC 등을 적극적으로 도입하여 객체지향 프로그래밍의 강점을 최대한 살린 방식으로 보다 안정적인고 확장 가능한 백엔드 환경을 구축할 수 있도록 도와준다. 이번 프로젝트에서는 새롭게 D.. [복지맵 프로젝트] 프론트엔드 환경설정 - 폴더 구조 이번에 시작하는 프로젝트의 폴더 구조를 어떻게 가져갈지 고민이 많았는데, 대중적으로 권장되고 있는 형식을 참고하여 뼈대를 구성하기로 하였다. 현재 사용하고 있는 기술 스택이 Vite + ReactJS + Typescript + SCSS 를 사용하기 때문에 이를 염두에 두고 폴더 구조를 나누기로 결정했다. assets해당 파일은 index.html 등에서 사용되지 않고, 프로젝트 내부적으로 사용되는 정적 파일들을 담을 때 사용하기로 하였다. vite + react 생성 시 기본적으로 생성되어 있는 폴더인데, 제거하지 않고 그대로 사용하기로 했다. componets여기서는 전역적으로 재사용이 가능한 컴포넌트들을 보관하기로 하였다. 이 때 내부적으로 ui 폴더를 추가하기로 했다. 참고로 u.. 이전 1 2 다음
