공부 (105) 썸네일형 리스트형 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에 값을 캐싱하고 이후 유저가 웹 서.. Next.js 알아보기 7 (Route Handler & Server Action) Route Handler 📖webRequest와 Response APIs를 쓸 수 있는 핸들러를 만들 수 있게 끔 허용해 restful 한 api를 만들 수 있게 해 줍니다. 서버, 클라이언트 컴포넌트 개념을 포함하는 React 컴포넌트 개념을 벗어나 `route.ts`파일을 다루게 됩니다. 사용 방법api > apiTest 폴더를 만든 후, 하위에 route.ts 파일을 생성해 주고 아래 코드를 적습니다.export async function GET(request: Request) { console.log("GET /api/test");}export async function POST(request: Request) { console.log("POST /api/test");}export async.. 이전 1 2 3 4 5 6 ··· 14 다음
