분류 전체보기 (366) 썸네일형 리스트형 디자인 패턴 공부 개요, 디자인 패턴 개념과 학습을 시작한 이유 디자인 패턴의 정의와 포스트 작성 이유 소프트웨어 개발에서 디자인 패턴은 보다 효율적이고 견고한 코드를 만들기 위해 일반적인 문제에 적용할 수 있는 재사용 가능한 솔루션이라고 정의되어 있다. 이런 정의에 앞서 자바스크립트, 타입스크립트, 리액트, 넥스트 등에 거쳐 동일한 자바스크립트 언어를 적어보면서, 내가 적은 코드를 보다 일반화되고 더 효율적인 방식으로 적을 수 없을까에 대한 고민을 계속 했다. 반복되는 코드, 동일하지만 약간 씩 달라서 추상화하기도 애매한 그런 코드들, 어떤 알고리즘을 생각하더라도 결국 변수 하나 선언하고, 그 변수를 반복문 등을 사용해서 어떻게든 짜집기 해서 동작하게 만드는 답 없는 코드들.. 혼자 아무리 고민을 해도 나의 머리에서만 노는 것이기 때문에, 이러한 코드들을 바라보면서.. 크롤링이 되긴 되었는데.. 크롤링이 되긴 되었다. 내가 만든 사이트를 구글 셔치 콘솔에 색인을 요청하고 대기한지 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일 걸려 통과 할 수 있었다. 그럼 앞으로의 계획은? 이제 이메일 서비스를 개발 계정뿐만 아니라 서비스를 이용하는 모든 유저가 이용할 수 있게 되었으므로, 회원가입 시 이메일 인증과 비밀번호 찾기 시 이메일 인증 등의 본인확인 서비스를 적용할 수 있게 되었다. 따라서 이와 관련한 기능 구현을 내일 완료하고, .. [복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정 PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자가 사용할 수 있도록 구축할 것이므로 PWA 를 설정하기로 하였다. vite react 설치npm create vite@latest 선택은 React 와 typescript + SWC 로 설정하였다. Vite 전용 PWA 플로그인 패키지 설치vite 에서 PWA 를 설정하기 위해서는 이를 위한 별도의 플러그인이 필요하다. 따라서 다음을 설치해준다.npm i vite-plugin-pwa -D PWA 초기화를 위한 제네레이터 패키지 설치 PWA Assets Generator라는 플러그인을 설치하.. [복지맵 프로젝트] 프로젝트 환경설정 개발 환경구성하고자 하는 프로젝트 환경은 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-p.. [복지맵 프로젝트] 기능구현 보호되어 있는 글입니다. [복지맵 프로젝트] 복지맵, 부산지역 복지프로그램정보를 한 곳에서 [CH1. 계획] 프로젝트 방향성이번 프로젝트는 리액트, 타입스크립트, 타일윈드, 쥬스탄드, 리액트쿼리, KaKao Map API, 소켓 IO 등을 기반으로 개발되는 복지서비스 지도 정보와 실시간 정보 공유가 가능한 웹 사이트 이다. PWA 설정을 통해서 모바일 오프라인에서도 웹사이트이지만 모바일과 유사한 환경에서 게임을 즐길 수 있도록 구현할 예정이다. 무엇보다 이번 프로젝트의 컨셉은 부산의 행정구역을 누구나 쉽게 확인할 수 있도록 3D 느낌의 지도를 만들어서 이용할 생각이다(피그마를 사용할 계획이라서 2D 인데 3D 느낌인 지도라고 보면될 것 같다). 기술스택지금 생각하고 있는 주요 기술 스택은 다음과 같다.React : SPATypescript : 타입 안정성Tanstack-query/react : 서버 상태관.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 46 다음
