프로젝트 (56) 썸네일형 리스트형 [복지맵] 복지맵 프로젝트 테스트 코드 아카이브 보호되어 있는 글입니다. [복지맵 프로젝트] ~ 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주일 드디어 조금씩 색인이 된 페이지들이 구글에 보이기 시작했다. 그런데, 간과한 점이 한 가지 있었다. 아니 몰랐다고 보는게 맞을 것 같은데, 제목 밑으로 해당 대상의 명언이 아니라 명언 목록 페이지 전체에 대한 설명 글이 표시되고 있다는 점이다. 이 부분은 다시 알아보고 명언의 내용이 표시되도록 변경해야 할 것 같다. [나만의 명언집] 이메일 본인인증 기능 구현(With Redis 클라우드 & NextJS 서버리스) -> 핵심만 AWS SES 셋팅 포스트 NextJS 를 AWS EC2 에 배포하는 경우 비밀번호 찾기 기능이 안 되었던 이유와 해결 방법( with AWS SES + SMTP 의 기본 포트는 25 이다. 내가 만든 프로젝트에서 비밀번호 찾기 기능을 구현하고, EC2 에 배포했을 때 비밀번호 찾기 기능이 동작하지 않았다. 그 이유로 짐작되었던 것을 오늘 확인하였다. duklook.tistory.com 오늘의 명언 이번에 구현해볼 기능은 이메일 본인인증 기능이다. 참고로 언어는 NextJS(^14.04) 를 사용하므로 별도의 백엔드 언어를 따로 두지 않는다. 즉, 서버리스이다. 해당 기능은 사실 한참 이전에 구현했어야 했는데, 이메일 인증을 실제 프로덕션에서 적용하려니 생각보다 많은 에러 상황에 직면했고, 오늘 드디어 .. [나만의명언집] 드디어 ,, AWS SES 샌드박스에서 벗어났다 오랜 기다림.. 비밀번호 찾기 기능과 회원가입 시 유저 인증을 위해 발버둥 치던 지난 시간들.. 분명 쉬운 방법도 많았을텐데, 굳이 멀고 먼 길을 걸어갔던 시간을 지나 드디어 AWS SES 샌드박스에서 벗어났다는 소식이 들려왔다. 다른 개발자분들의 후기를 보면 샌드박스를 벗어나기 위해 몇 차례나 수정한 내용을 보내고, 기다리고는 반복했다고 하는데, 본인의 경우에는 운이 좋아서 인지 한 번만에 무려 3일 걸려 통과 할 수 있었다. 그럼 앞으로의 계획은? 이제 이메일 서비스를 개발 계정뿐만 아니라 서비스를 이용하는 모든 유저가 이용할 수 있게 되었으므로, 회원가입 시 이메일 인증과 비밀번호 찾기 시 이메일 인증 등의 본인확인 서비스를 적용할 수 있게 되었다. 따라서 이와 관련한 기능 구현을 내일 완료하고, .. 이전 1 2 3 4 5 6 7 다음
