프로젝트 (42) 썸네일형 리스트형 [복지맵 프로젝트] 트러블 슈팅 모음집 ① 오늘의 명언 "모든 문제에는 실마리가 존재한다." [리셋 문제 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주일 드디어 조금씩 색인이 된 페이지들이 구글에 보이기 시작했다. 그런데, 간과한 점이 한 가지 있었다. 아니 몰랐다고 보는게 맞을 것 같은데, 제목 밑으로 해당 대상의 명언이 아니라 명언 목록 페이지 전체에 대한 설명 글이 표시되고 있다는 점이다. 이 부분은 다시 알아보고 명언의 내용이 표시되도록 변경해야 할 것 같다. 이전 1 2 3 4 5 6 다음
