분류 전체보기 (114) 썸네일형 리스트형 Next 카카오 맵 행정구역 나누기 시도 별로 행정구역을 나누는 작업을 진행한 내용입니다. 행정구역 데이터 파일 📖SHP 파일시도, 시군구, 읍면동, 리 별로 데이터가 있어 원하는 파일을 다운 받으면 됩니다. 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 저는 시도 정보가 필요했기 때문에 가장 최신 SHP 파일을 다운로드 했습니다. 파일을 다운로드하고 압축을 풀면 3개의 파일이 들어있습니다. 방위나 지도가 담긴 공간 데이터 파일을 JSON 파일로 사용하기 위해 `XrProjection` 으로 변환을 해야 합니다. [GIS] XrProjection v3.1 – GIS Developer다양한 좌표계 간의 변환 툴입니다. 특히 대한민국에서 사용하는 좌표계에 대해 손쉽게 .. Next 카카오 맵 구현 카카오맵 구현 📖먼저 `react-kakao-maps-sdk`를 설치해 줍니다.npm i react-kakao-maps-sdk useKakaoLoader이후 `useKakaoLoader`를 작성해주고 export 해줍니다.// useKakaoLoader.tsimport { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk";const KAKAO_API_KEY = process.env.NEXT_PUBLIC_KAKAO_API_KEY;export default function useKakaoLoader() { useKakaoLoaderOrigin({ appkey: `${KAKAO_API_KEY}`, libraries: ["c.. [트러블 슈팅] issue daily - 로그인 상태 새로고침 시 유지하기 로그인 상태 새로고침 시 유지하기를 `Supabase Auth`와 `Zustand`로 해결한 트러블 슈팅에 대해서 정리해 봤습니다.발생한 오류 🔥사용자가 로그인 후 마이페이지와 로그아웃 버튼이 정상적으로 보이지만, 페이지를 새로고침 하면 다시 로그인 버튼이 나타나는 문제가 있었습니다. 즉, 사용자의 로그인 상태가 새로고침 후에도 유지되지 않는 문제가 생겼습니다. 해결 과정 🔎문제 분석 새로고침 시 클라이언트 측에서 전역 상태가 초기화 돼 상태가 유지되지 않는 것을 발견했습니다. Supabase의 `auth.getUser()`를 사용해 서버 측에서 유저 정보를 가져올 수 있다는 점을 고려해 이 정보를 전역 상태로 관리해 새로고침 후에도 상태가 유지되도록 해야 했습니다. Supabase와 Zustand.. [팀 프로젝트] issue daily issue daily 📰Open News API를 이용하여 최근 뉴스들을 카테고리별로 확인할 수 있는 사이트입니다. 배포 링크 : https://issue-daily.vercel.app/깃허브 링크 : https://github.com/smu06030/issue-daily 프로젝트 구조 📂 📦src ┣ 📂app ┃ ┣ 📂(auth) ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂reset-password ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂signup ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂update-password ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📜auth-layout.tsx ┃ ┃ ┗ 📜loading.tsx ┃ ┣ 📂(roo.. [트러블 슈팅] supabase에서 Google, Kakao 로그인 시 신규 사용자 저장 오류 소셜 로그인을 구현하는 과정에서 발생한 트러블 슈팅에 대해 정리해 보려고 합니다.http://auth/auth-code-error#error=server_error&error_code=500&error_description=Database+error+saving+new+user 발생한 오류 🔥Google과 Kakao로 로그인을 시도할 때 신규 사용자를 데이터베이스에 저장하는 과정에서 다음과 같은 오류가 발생했습니다. 해결 과정 🔎기존 트리거 함수는 다음과 같습니다.create function public.add_new_user()returns trigger as $$beginif new.raw_app_meta_data ->> 'provider' = 'email' theninsert into publ.. [Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정 Supabase Auth 선택 이유 ✨Supabase는 PostgreSQL을 사용해 데이터 정규화, 복잡한 쿼리 작업 등 SQL의 모든 기능을 사용할 수 있습니다. 그리고 요즘 떠오르는 기술이며 공식 문서 또한 너무 잘 되어 있기 때문에 적용하기 쉽다고 판단해서 선택하게 되었습니다. 사용 방법 📖Authentication > ProvidersProviders 탭으로 이동하면 다양한 로그인을 선택할 수 있습니다.이메일을 이용해 간단한 로그인 구현과 OAuth를 이용한 소셜 로그인도 구현할 수 있습니다. ✨ Provider를 등록하는 방법은 공식 문서에 너무 잘 나와 있으니 생략하도록 하겠습니다. Google Login with Google | Supabase DocsUse Sign in with Goo.. [트러블 슈팅] Next.js generateStaticParams 정적 경로 생성의 오해와 해결 과정 라이엇 도감 만들기 프로젝트에서 발생한 트러블 슈팅입니다.발생한 오류 🔥Next.js에서 `/champions/[id]`와 같은 동적 경로 페이지를 빌드할 때, 정적 경로가 아닌 동적 경로로 처리되며 `dynamic`으로 표시되는 문제가 발생했습니다.// app > champions > page.tsxexport const generateStaticParams = async () => { const { data: allChampions }: { data: ChampionsList } = await fetchAllChampions(); return Object.keys(allChampions).map((champion) => ({ id: champion, }));}; `generateSt.. Next.js 알아보기 8 (Caching - 어려움 주의) Next.js의 Caching 📖 ❗기억해야 할 핵심 `Next.js는 대부분 영역에서 fetch 함수를 기반으로 캐싱한다`입니다. next.js의 fetch API는 브라우저의 fetch API를 기반으로 next.js에서 확장한 새로운 `fetch API`입니다.그중에서도 build(Full Route Cache)와 웹 서버에 요청(Data Cache)할 때 캐싱을 진행합니다. Full Route CacheNext.js는 빌드 시점에 페이지를 렌더링 하고 그 결과를 캐싱하는 `Full Route Cache` 기능을 제공합니다. 빌드할 때 Full Route Cache에 캐싱된 값이 없기 때문에 `Data Source`에서 값을 가지고 Full Route Cache에 값을 캐싱하고 이후 유저가 웹 서.. 이전 1 2 3 4 5 6 ··· 15 다음
