next.js5 [Next.js] Daum 주소 검색 + 카카오API 위,경도 구하기 DaumPostcode로 주소 검색 후 위도, 경도까지 구하기 1. DaumPostcodenpm i react-daum-postcode import DaumPostcode from "react-daum-postcode";return ( { console.log(addressData); }} /> )매우 간단하다 하지만 지도 API에 연동 하려면 여기서 경도, 위도를 구해야 한다. 2. 카카오 APIhttps://apis.map.kakao.com/ 사용 전에 API key를 발급 받아야한다. https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다.. 2025. 7. 8. Next.js + Docker + Nginx SSL 인증서 발급하기 (Let's encrypt , certbot, nip.io) SEO 테스트를 위해 SSL인증서를 발급받았습니다. 사용한 기술 스택Linux (ubuntu 22.04)Next.js 14Docker (Docker-compose)NginxLet's encrypt (무료로 SSL 인증서를 발급해 주는 서비스)certbot (Let’s Encrypt에서 인증서를 발급받고 자동 갱신할 수 있게 도와주는 CLI 도구)nip.io (무료 와일드카드 도메인 서비스 https://123.456.789.123.nip.io) 1. SSL 인증서 발급 https://github.com/wmnnd/nginx-certbot/blob/master/init-letsencrypt.sh nginx-certbot/init-letsencrypt.sh at master · wmnnd/nginx-cert.. 2025. 4. 24. [Next.js 14] NextAuth Server Error - There is a problem with the server configur NextAuth 적용 후 빌드 테스트 해봤는데 에러가 발생했다. https://next-auth.js.org/errors#no_secret Errors | NextAuth.jsThis is a list of errors output from NextAuth.js.next-auth.js.org 정리해 보면 NEXTAUTH_SECRET 환경 변수를 설정해줘야 한다.개발 환경에서는 options 객체의 SHA 해시값을 default로 사용하는데,운영 환경에서는 기본값이 없어서 필수로 설정해줘야 한다. https://next-auth.js.org/configuration/options#nextauth_secret Options | NextAuth.jsEnvironment Variablesnext-aut.. 2025. 4. 18. [Next.js 14] NextAuth 적용기 (네이버 로그인, 카카오 로그인, 구글 로그인) 프로젝트 고도화를 하면서 미루고 미뤄왔던 SNS 로그인 연동을 할 시간이 왔습니다. ✅ 기존 로그인 로직1. 사용자 입력 정보를 암호화하여 api요청2. 복호화 하여 DB 조회3. JWT 토큰 발급 및 쿠키 저장4. 응답을 암호화해서 반환5. Zustand로 로그인 상태 관리 내가 구현하고 싶은 로직은 이랬다.리다이렉트를 최소화 해서 로그인어떤 페이지에서도 로그인 가능SNS 아이디 연동이 안되어 있으면 바로 회원가입회원가입 후 바로 로그인 이전에 연동할 땐 바닐라 JS와 리다이렉션을 이용해서 연동 해뒀었는데next.js에서 NextAuth라는 라이브러리를 적용해보았다.✅ NextAuthNext.js에 특화된 인증 라이브러리다양한 로그인 지원👉 Google, Kakao, Naver 같은 OAuth부.. 2025. 4. 17. [Next.js 14] 이미지 성능 개선 , Next/Image CPU 사용량 이슈 , react-lazy-load-image-component 적용기 프로젝트에 이미지가 많아지니 초기 로딩이 느려졌다.이미지 최적화가 필요해 Next/Image 컴포넌트를 사용해 봤다. Next.js Image 컴포넌트Next.js에서 제공하는 이미지 최적화 전용 컴포넌트브라우저에 효율적으로 이미지를 로드하고, 페이지 로딩 속도와 성능을 향상하기 위해 사용✅ 주요 기능 자동 최적화👉 이미지 사이즈, 포맷(avif, webp 등) 자동 변환Lazy Loading👉 화면에 보일 때만 로드 (초기 페이지 로딩 가벼움)Responsive 이미지👉 다양한 화면 크기에 맞게 사이즈 자동 조절이미지 CDN👉 Next.js가 제공하는 이미지 CDN으로 빠른 전송placeholder👉 이미지 로드 전 흐릿한 썸네일 효과 제공 propssrcstring | StaticImport.. 2025. 4. 16. 이전 1 다음
