Next.js 환경에서 cookie 설정하기

이번에 두 개 이상의 쿠키를 설정하는 방법을 몰라서 삽질을 했습니다. 다른 분들은 저처럼 삽질하지 마시라고 기록합니다!🤣 우선 기본적인 쿠키 설정 방법 예시입니다. ✨ 쿠키 설정 예시 import { serialize } from "cookie"; export async function POST(res: Response) { ... const ACCESS_SERIALRIZE = serialize("kakaoAccessToken", access_token, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: expires_in, path: "/", }); return NextResponse.j..

• format_list_bulleted 개발관련/Next
• · 2024. 1. 9.
• textsms

Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (2)

이전 시간 카카오와 Supabase앱을 만들어 연동하였습니다. ⬇️ 이전 포스팅을 못보셨다면 아래로 이동하여 세팅을 먼저 해주세요! ⬇️ Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1) 이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authen lurgi.tistory.com 이제 본격적으로 간단한 화면을 구현해 보겠습니다! 우선 Next App을 만들어 줍시다. npx create-next-app@l..

• format_list_bulleted 개발관련/Next
• · 2023. 12. 9.
• textsms

Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1)

이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free. supabase.com Supabase는 구글의 Firebase와 유사한 서비스인데요, 쉽게 생각하면 백엔드 기능을 가지고 있는 서비스라고 생각하시면 됩니다. 데이터 베이스를 쉽게 다룰 수 있게 해주기 때문에 풀스택 개발에..

• format_list_bulleted 개발관련/Next
• · 2023. 12. 9.
• textsms

Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러

Next.js와 Typescript 환경에서 “모듈에 대한 선언 파일을 찾을 수 없습니다” 라는 에러가 발생하였습니다. 그리고 이 문제를 해결하는 방법을 소개하려고 합니다. 1️⃣ 사용하고자 하는 해당 라이브러리가 TS를 지원하는지 확인하자 우선적으로 살펴봐야 하는 것입니다. 옛날 라이브러리 같은 경우 pure esm.js파일만 가지고 있고 타입설정을 따로 해놓지 않는 경우가 있을 수 있습니다. 이런 경우에는 @node_modules/@types//index.d.ts 파일을 생성하여 직접 작성해주어야 합니다. 제가 사용하고자 하는 use-sound는 업데이트 한지 꽤 되긴 했지만, TS를 지원하는 라이브러리입니다. 2️⃣ TS를 지원한다면 npm의 @types/ 를 확인하자 npm i -D @types/..

• format_list_bulleted 개발관련/Next
• · 2023. 12. 7.
• textsms

Next.js에서 Clerk.js 사용하여 구글 연동 로그인 만들기

Clerk | Authentication and User Management The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”. clerk.com ✨Clerk.js ? clerk.js 라이브러리는 로그인 구현을 도와주는 무료 JS라이브러리입니다. clerk.com 홈페이지의 메인 화면에는 인증 뿐만 아니라, 유저 매니징까지 할 수 있는 라이브러리라고 소개하는데요, React, Next.js 뿐만 아니라 다양한 프레임워크, 바닐라 JS에서도 사용할 수 있는 도구라고 합니다! clerk.js는 정말 간단하게 ..

• format_list_bulleted 개발관련/Next
• · 2023. 11. 16.
• textsms

[Next.js] 전역 객체, .env 타입 설정하기

😥발생한 문제? "use client"; import { useEffect } from "react"; const KakaoMap = () => { useEffect(() => { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API}&autoload=false`; document.body.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { const containe..

• format_list_bulleted 개발관련/Next
• · 2023. 10. 9.
• textsms