본문 바로가기

반응형

프로젝트

(57)
[나만의명언집] 드디어 ,, AWS SES 샌드박스에서 벗어났다 오랜 기다림.. 비밀번호 찾기 기능과 회원가입 시 유저 인증을 위해 발버둥 치던 지난 시간들.. 분명 쉬운 방법도 많았을텐데, 굳이 멀고 먼 길을 걸어갔던 시간을 지나 드디어 AWS SES 샌드박스에서 벗어났다는 소식이 들려왔다. 다른 개발자분들의 후기를 보면 샌드박스를 벗어나기 위해 몇 차례나 수정한 내용을 보내고, 기다리고는 반복했다고 하는데, 본인의 경우에는 운이 좋아서 인지 한 번만에 무려 3일 걸려 통과 할 수 있었다. 그럼 앞으로의 계획은? 이제 이메일 서비스를 개발 계정뿐만 아니라 서비스를 이용하는 모든 유저가 이용할 수 있게 되었으므로, 회원가입 시 이메일 인증과 비밀번호 찾기 시 이메일 인증 등의 본인확인 서비스를 적용할 수 있게 되었다. 따라서 이와 관련한 기능 구현을 내일 완료하고, ..
[복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정 참고 문서아래는 vite 에서 제공하는 공식 가이드 문서 입니다. 명확하지 않다고 느끼는 부분이 있다면, 해당 문서를 꼭 참고하면서 과정을 진행해주세요. https://vite-pwa-org.netlify.app/guide/https://vite-pwa-org.netlify.app/assets-generator/PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자가 사용할 수 있도록 구축할 것이므로 PWA 를 설정하기로 하였다. vite react 설치npm create vite@latest 선택은 React 와 typescript + SWC 로 설정하였다. Vite 전용..
[복지맵 프로젝트] 프로젝트 환경설정 개발 환경구성하고자 하는 프로젝트 환경은 Husky + lint-staged 를 이용한 린트 및 프리티어, vitest 자동화를 목적으로 한다. 많은 개발 블로그에서 해당 설정에 대한 내용들을 다루고 있어서 몇 몇을 참고하여 본인의 입맛에 맡게 설정을 달리할 것이다. 패키지 설치Vitest 패키지 설치npm install --save-dev vitest 테스팅 라이브러리 외 관련 종속성 설치 npm install -D @testing-library/jest-dom @testing-library/react @testing-library/user-event msw Prettier와 eslint 설치 npm install -D eslint eslint-plugin-react eslint-plugin-react..
[복지맵 프로젝트] 기능구현 보호되어 있는 글입니다.
[복지맵 프로젝트] 복지맵, 부산지역 복지프로그램정보를 한 곳에서 [CH1. 계획] 프로젝트 방향성이번 프로젝트는 리액트, 타입스크립트, 타일윈드, 쥬스탄드, 리액트쿼리, KaKao Map API, 소켓 IO 등을 기반으로 개발되는 복지서비스 지도 정보와 실시간 정보 공유가 가능한 웹 사이트 이다. PWA 설정을 통해서 모바일 오프라인에서도 웹사이트이지만 모바일과 유사한 환경에서 게임을 즐길 수 있도록 구현할 예정이다.   무엇보다 이번 프로젝트의 컨셉은 부산의 행정구역을 누구나 쉽게 확인할 수 있도록 3D 느낌의 지도를 만들어서 이용할 생각이다(피그마를 사용할 계획이라서 2D 인데 3D 느낌인 지도라고 보면될 것 같다).  기술스택지금 생각하고 있는 주요 기술 스택은 다음과 같다.React : SPATypescript : 타입 안정성Tanstack-query/react : 서버 상태관..
NextJS 를 AWS EC2 에 배포하는 경우 비밀번호 찾기 기능이 안 되었던 이유와 해결 방법( with AWS SES + 샌드박스 해지 ) SMTP 의 기본 포트는 25 이다.내가 만든 프로젝트에서 비밀번호 찾기 기능을 구현하고, EC2 에 배포했을 때 비밀번호 찾기 기능이 동작하지 않았다. 그 이유로 짐작되었던 것을 오늘 확인하였다. 그건 EC2 에서 외부 네트워크 요청에 대한 인바운드 규칙을 설정해두지 않았기 때문이다. SMTP 의 경우 기본적으로  TCP 25 포트를 사용하기 때문에, EC2의 인바운드 규칙에서 해당 포트로 요청이 들어오는 것을 허용해주어야 한다. 즉, 나는 이것을 설정해두지 않아서 차단이 되었던 것이다(라고 서두에 언급하였지만, 이 방법은 실패하였다. 물론 해당 포트 문제도 있었겠지만 근본적인 부분은 지메일 SMTP 서버에서 리전이 차이가 나는 경우 보안상 이유로 차단을 박는다.).  [해결방법 - 실패 사례] 그러므..
프로젝트 sitemap.xml 을 찾을 수 없다는 문제를 해결하고.. 이전 포스트 배포 사이트 색인이 왜 1 개만 생길까요? 문제의 발단 제가 사이트를 배포할 때 NextJS 에서는 동적으로 사이트맵을 생성하는 기능을 지원해주기에 이를 이용해서 사이트맵도 색인 요청을 Google Search Console 을 사용해서 신청했었습니다. duklook.tistory.com 조금 만 더 기다려 봐야 겠습니다. 며칠 동안 sitemap.xml 을 사이트를 통해 조회를 하면 찾을 수 없다는 문제가 계속 발생하였습니다. 원인은 제가 사이트를 재배포할 때 sitemap.xml 을 생성하는 과정에서 실제 사이트가 닫혀 있는 상태라서 문제가 발생하였기에, 잠시 sitemap-temp.xml 이라는 이름으로 변경해둔 것이 화근이었습니다. 해당 문제는 바로 수정할 수 있는 사항이므로 이를 수..
배포 사이트 색인이 왜 1 개만 생길까요? 문제의 발단 제가 사이트를 배포할 때 NextJS 에서는 동적으로 사이트맵을 생성하는 기능을 지원해주기에 이를 이용해서 사이트맵도 색인 요청을 Google Search Console 을 사용해서 신청했었습니다. 그런데, 아무리 시간이 지나도 구글 검색에 나타나지 않아서 이게 무슨 일이지 싶어서 콘솔에 접속해서 확인해보니, 발견된 페이지는 1,878 개로 정상적으로 식별은 되었는데, 문제는 URL 이 인식은 되지만, 색인이 꼴랑 루트 페이지 하나만 색인이 생성되어 있는 겁니다. 도대체 이게 무슨 일인가 싶지만, 차근차근 해당 문제를 해결해보도록 하겠습니다. 참고로 직접 하나하나 해결하면서 작성하는 것이라 갑자기 글이 끊어질 수도 있습니다. 바로 해결이 되면 짧게, 아니면 길게 작성이 될 수 있어요. 무엇이..

반응형