본문 바로가기

Frontend5

[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.
Recharts 라이브러리 사용기 기존에 chart.js 사용했는데 Recharts를 사용해 보기로 했다.최근 chart.js의 다운로드 수를 넘어섰고, 난이도가 매우 쉽다. https://recharts.org/ Recharts recharts.org 공식 문서를 참고해서 예제를 만들어보기로 했다. 1. 설치npm install recharts 2. 예제 제작 const data = [ { subject: "Math", A: 120, B: 110, fullMark: 150, }, { subject: "Korean", A: 98, B: 130, fullMark: 150, }, { subject: "English", .. 2025. 6. 12.
[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.

티스토리툴바