분류 전체보기 (399) 썸네일형 리스트형 [나만의 명언집] 이메일 본인인증 기능 구현(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일 걸려 통과 할 수 있었다. 그럼 앞으로의 계획은? 이제 이메일 서비스를 개발 계정뿐만 아니라 서비스를 이용하는 모든 유저가 이용할 수 있게 되었으므로, 회원가입 시 이메일 인증과 비밀번호 찾기 시 이메일 인증 등의 본인확인 서비스를 적용할 수 있게 되었다. 따라서 이와 관련한 기능 구현을 내일 완료하고, .. [복지맵 프로젝트] 환경설정 - 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 서버에서 리전이 차이가 나는 경우 보안상 이유로 차단을 박는다.). [해결방법 - 실패 사례] 그러므.. [자료구조] 배열을 이용한 스택과 큐 구현 들어가기 전 앞서 시간 까지는 연결 리스트에 대해서 정리하였고, 이번에는 스택과 큐에 대해서 알아보고 이에 대한 구현을 시도해보고자 한다. 마지막에는 내가 생각하기에 배열을 이용한 경우 생길 수 있는 장단점에 대해 언급하며 끝내고자 한다. 스택과 큐 스택 우선 스택의 경우에는 후입선출(Last In First Out) 의 구조를 지니는데, 마지막에 들어온 요소가 먼저 나가는 특징을 보인다. 흔히 자바스크립트에서 실행 컨텍스트가 쌓이는 구조가 스택 자료구조를 따르며 그래서 이름 또한 호출 스택 ( Call Stack)으로 불린다. 큐 큐를 한 단어로 정리하면 대기줄이다. 보통 영화관 입장이나 놀이공원 입장을 생각해보면 먼저 온 사람이 앞에서 표를 끊고, 늦게 온 사람은 다음 순서를 기다려며 대기하고 있다... 이전 1 ··· 11 12 13 14 15 16 17 ··· 50 다음
