![]()
모바일에서 테스트해야만 할때개발을 하다보면 모바일에서 직접 보고 싶을때가 있습니다. 그럴때는 자신의 와이파이 IP 를 알아낸 뒤모바일기기에서 localhost:3000 대신192.168.xx.xx:3000 으로 접속하면 됩니다. 그런데 해당 상황에서 nextjs 라우트핸들러를쓰거나 뭐 하면 fetch 가 다 실패하게 됩니다. 왜냐하면 localhost:3000으로 잡혀있는데날라오는곳은 192.168.xx.xx 여서 그런것 같습니다. 예를들어 로그인 시 api/auth/login 으로 날린다~ 라면이 요청이 실패하게 되고 loaded failed 등의 에러가 잡힐 것입니다. 이럴때 임시적으로 대처할 수 있는 방법을 찾았습니다.package.json 수정방법은 간단했습니다.package.json 에 아래와 ..
![]()
Auth session missing!수파베이스 auth 사용중에자꾸만 마주치는 auth session missing!이것을 해결하기 위해 별 방법을 다 써보고 했지만레딧이나 깃헙이슈에도 같은 문제를 겪는 사람들이 많은 걸 보니뭔가 수파베이스에 문제가 있는 것 같기도 합니다. 아무튼 서버측에서 날리는 fetch 의 결과가tanstack query 의 prefetch query 와 함께 쓸 때 미들웨어서는 getUser 가 잡히지만prefetch query에서는 안 잡힌다거나혹은 자꾸 있었다 없었다 하는 문제를 해결해보고자(십중팔구 auth session missing...)안되면 fetch를 할 때 쿠키를 직접 같이 배달해보자라고 생각했습니다.그래서 fetch 함수를 다음과 같이 작성했습니다.fetche..
![]()
얼러트 모달이 여기저기 필요해서서버, 클라이언트 관계없이 아무데서나 호출해서 쓸 수 있도록아래처럼 사용하고 있었습니다. 그런데 이 방법에 문제가 조금 있었습니다.그냥 써도 무방한 정도였지만 해결해보기로 하였습니다. 문제는 번들 사이즈가 너무 크다는 점 이었습니다.여기저기서 호출 하는 함수인데 무거우면 안될 것이라 판단했습니다.원래 버전원일을 찾아보니 createRoot 를 하기 위해 가져온ReactDom 이 번들사이즈가 132kb 정도로 무거웠습니다.그래서 이것을 제거하고 다른 방법을 사용하기로 했습니다.하지만 그러면 컴포넌트를 사용해서 아무데서나 body에얼러트 모달을 부착할 수가 없었습니다.import CustomAlert from '@/components/organisms/common/CustomA..
![]()
webp 로 변환이 필요해사용자가 만약 몇십메가짜리 이미지를 넣으면 어떡할 것인가?라는 문제에서 이미지를 webp로 변환하는 로직을 작성해보았습니다. 서버로 파일을 보내면 라우트핸들러에서webp로 변환하고 수파베이스에 저장하는 단순한 방법입니다.클라이언트 에서일단 useState 든 뭐든 File 이 변수에 저장되어 있어야 합니다.const formData = new FormData();formData.append('imageFile', imageFile);const payload: StoryData = formData;mutate(payload); 클라이언트에서는 위처럼 처리합니다.애초에 form 태그를 쓰고 있다면 new FormData(여기에 e.target 넣을것) 요렇게 하면 될 것 같고아니라면..
![]()
Lazy LoadingLazy loading은 Next.js에서 애플리케이션의 초기 로딩 성능을 개선하는 데 도움을 주며, 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄여줍니다. 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들에 포함되도록 합니다. 예를 들어, 사용자가 모달을 열려고 클릭할 때까지 모달의 로딩을 지연시킬 수 있습니다. Next.js에서 lazy loading을 구현하는 두 가지 방법이 있습니다:next/dynamic을 사용한 동적 가져오기React.lazy()와 Suspense를 사용기본적으로 서버 컴포넌트는 자동으로 코드 분할이 되며, 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 전송할 수 있습니다. La..
![]()
Supabase를 사용하여 데이터를 가져온 후, 변경된 값을 업데이트할 수 있습니다. 그러나 데이터 객체를 직접 수정하기보다는 새로운 객체를 만들어서 업데이트하는 것이 더 안전합니다. 다음은 그 예제입니다:데이터를 가져와 필요한 필드를 업데이트합니다.업데이트된 데이터를 Supabase를 통해 upsert로 저장합니다.아래는 코드 예제입니다:import { useState, useEffect } from 'react';import { createClient } from '@supabase/supabase-js';import { Tables } from '@/types/supabase.ts'import useAuth from "@/context/auth.context.ts"const supabase = cr..
![]()
실시간 채팅 메시지를 로컬 상태가 아닌 Supabase 테이블에 저장하기 위해서는 메시지를 전송할 때마다 Supabase 데이터베이스에 삽입(insert) 작업을 수행하고, 채팅 페이지가 로드될 때 메시지를 불러와야 합니다. 이를 위해 다음과 같은 작업을 수행할 수 있습니다:메시지 전송 시 Supabase 테이블에 저장: 사용자가 메시지를 전송할 때, Supabase 테이블에 메시지를 저장합니다.메시지 불러오기: 채팅 컴포넌트가 마운트될 때 Supabase 테이블에서 메시지를 불러옵니다.먼저, Supabase 클라이언트 설정을 하고 메시지를 저장하고 불러오는 기능을 추가합니다."use client";import supabaseClient from "@/supabase/supabaseClient";impo..
![]()
5. useMutation 을 위한 세팅route handler 를 향해 fetch 를 날릴건데,이것을 useMutation 으로 처리하고자합니다.먼저 mutationFn 에 들어갈 함수를 만듭니다.export async function postNaverLogIn(): Promise { if (!window.location.hash) return null; const hash = window.location.hash.substring(1); const params = new URLSearchParams(hash); const accessToken = params.get('access_token'); const url = '/api/auth/callback/naver'; t..
![]()
supabase OAuth 는 naver provider 미지원!! 상황은 이러합니다.supabase auth 를 쓰고 있다.그런데 supabase auth 는 naver Provider 를 지원하지 않는다...하지만 naver login 구현도 하고 싶다!여기에 더해 우리는 기본 auth 스키마만 쓰는 것이 아니라유저를 커스텀하기 위한 buddies 테이블도 public 에 두고 있습니다.따라서 아래와 같이 되는 것이 가장 좋겠죠네이버 로그인시 auth 스키마에 insert 될 수 있다면sql trigger 에 따라 자동으로 buddies 테이블에는 insert된다.하지만 역시 쉽지않습니다. auth 스키마에 직접 insert 하는 방법은supabase 문서 어디에도 없습니다. 공식적으로 없는 것 같습..
![]()
state와 UI를 리턴하는 커스텀 훅이 필요해우리에겐 state와 UI(컴포넌트)를 리턴하는 커스텀 훅이 필요합니다. 여기서 state는 전역상태로 관리되면 안되는 상황이므로커스텀 훅에서 리턴하는 state 는 독립적이어야 합니다. 또한 비슷한 UI를 반복적으로 사용해야 하는데 렌더링해야하는데이터종류는 2가지(여정테마/버디즈성향)인 상황입니다. 따라서 커스텀 훅의 리턴은 named export가 될 수 없으므로 객체가 아닌 배열어야 합니다.그렇다면 [컴포넌트, 스테이트] 이렇게 반환하기만 하면 될 것 같습니다.리턴할 컴포넌트먼저 리턴할 컴포넌트를 atoms 레벨에 만들었습니다.type PreferThemeProps = { selectedTheme: string[]; handleThemeCha..
![]()
처음 생각한 다이나믹 헤더 의사 코드export default function Page({ params, searchParams,}: { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined }}) { return My Page}Next.js 에서 slug 와 query string 을 가져올 수 있는 위 코드를 사용해서layout.tsx 혹은 page.tsx : (서버컴포넌트 겠죠..? 아마) 에서동적으로 주소에따라 MobileHeader.tsx 컴포넌트로 넘겨주는 props 를 다르게 한다!위 방법은 동적 라우팅에서만 사용가능! 따라서 middleware 설정 추가확인해보니 위 방법은 동적 라우팅..
![]()
팔로잉을 측정하는 방법을 추가하기 위해 buddy_following_counts와 buddy_follower_counts 두 컬럼을 각각 업데이트하는 로직을 작성해야 합니다. 여기서는 buddy_following_counts는 사용자가 팔로우하는 사람의 수, buddy_follower_counts는 사용자를 팔로우하는 사람의 수를 의미합니다.트리거 함수에서 팔로우 및 팔로잉 수를 모두 업데이트하도록 코드를 수정하겠습니다.테이블 및 트리거 설정먼저 buddies 테이블에 buddy_following_counts와 buddy_follower_counts 컬럼을 추가합니다.ALTER TABLE buddiesADD COLUMN buddy_following_counts INT DEFAULT 0,ADD COLUMN..
![]()
Enum?다음과 같은 배열이 있을때, 이것을 Enum 으로 처리할지 그냥 Union type 으로 할지 의사결정이 필요했습니다.export const buddyThemes = [ '계획', '즉흥', '빨리빨리', '느긋느긋', '촬영', '감상', '깔끔쟁이', '자연인', '가성비', '가심비',];export const tripThemes = [ '도시', '자연', '유명맛집', '로컬맛집', '힐링', '액티비티', '쇼핑', '관광',];TypeScript에서는 enum을 사용하여 이러한 배열을 기반으로 enum 타입을 만들 수 있다고 합니다.다음은 두 배열을 기반으로 만든 enum 타입의 예시입니..
![]()
auth.users 를 보강하기위해 public.users 생성supabase auth 를 사용할 경우, auth.users 스키마만으로는프로젝트 필요한 정보들을 모두 컨트롤 할 수 없습니다. 그래서 보통 users 같은 테이블을 하나 만들어서 쓰는 것이 보통이라고 합니다.그래서 저희도 이에 해당하는 buddies 테이블을 만들었습니다. 하지만 문제는 유저가 회원가입 혹은 소셜로그인을 하여auth.users 에 로우가 추가되어도, 직접 만든 buddies 테이블(public.buddies) 에는로우가 자동으로 추가되지 않는다는 점입니다. 그래서 이를 해결하기 위해 간단한 SQL 사용해보기로 했습니다.auth.users 변경시 자동으로 users 테이블에 로우를 추가처음에는 아래 정도의 로직을 생각했습니다..
![]()
SQL로 테이블 만들기최종프로젝트는 여지껏 진행해본 프로젝트에 비해 규모가 큽니다..당연히 테이블 수도 많고 서로 연결된 테이블도 많습니다. 우리는 4일동안 기획회의를 진행하면서 DB 테이블 구조에 대한 고민을 정말 많이 했습니다.백엔드 전문에게는 이정도 규모는 정말 작은 규모에 속하겠지만,프론트엔드인 우리에게는 새로운 도전에 가까웠습니다. 그리하여, 노션에 표로 정리함과 동시에 drawsql 이라는SQL schema 작성을 도와주는 사이트를 같이 이용했습니다. 이 사이트의 장점은, 시각적으로 보면서 작성한 SQL 을 SQL파일로 export 해준다는 것입니다. 대략 이런 식의 구조를 만들고 SQL 로 export 한 뒤 좀 더 다듬었습니다.(두개의 테이블이 더 있지만, 해당 테이블은 팀원분께서 직접 ..
![]()
수파베이스 auth 를 사용할 때, auth.users 스키마에 row 추가시(즉 회원가입시)자동으로 custom users(프로젝트별로 이름은 다를것) 테이블에 auth.users 스키마에 추가되는 데이터를 가져오는 방법을 연구했습니다.SQLCREATE OR REPLACE FUNCTION public.handle_new_user_custom()RETURNS TRIGGER AS $$BEGIN-- 아래 buddy 어쩌구는 프로젝트에 맞게 수정하면 됩니다.INSERT INTO public.buddies (buddy_id, buddy_email, buddy_nickname, buddy_profile_pic)VALUES ( NEW.id, NEW.email, NEW.raw_user_meta_dat..
![]()
Sharp를 사용하지 않고 이미지를 10px로 리사이즈하고 Base64로 변환하는 작업을 클라이언트 측에서 수행하려면 HTML5 Canvas API를 사용할 수 있습니다. 이 방법은 이미지의 크기 조정을 수행하고 결과를 Base64로 인코딩하는 데 사용할 수 있습니다.다음은 클라이언트 측에서 이 작업을 수행하는 방법입니다:1. 이미지 로드 및 Canvas를 사용한 크기 조정 및 Base64 변환 함수const loadImage = (src: string): Promise => { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "anonymous"; // CORS가 필요한..
![]()
모든 옵션 사용시 검색 액션이 두 번 들어가는 구조입니다.옵션 1 따로 가고요.(옵션1 고성능 검색이 가능할 경우 시도 - 자동완성, 등등)옵션 1 - 키워드옵션 2~9 따로 갑니다.(아래는 완전일치)옵션 2 - 지역? - trip_destination옵션 3 - 일시? - trip_start_date / trip_end_date옵션 4 - 선호성별? - trip_wanted_sex옵션 5 - 경비? - trip_cost 옵션 6 - 인원수? - trip_max_buddies_counts 옵션 7 - 만남장소? - trip_meet_location (만약에 속도느리면 인덱싱 걸고...)(아래2개는 세개 중 한개라도 일치하는것 다 가져온다음에, 가능하면 우선순위로 필터링)옵션 8 - 테마? - trip_t..
![]()
이미지를 10px 사이즈의 base64 문자열로 변환하는 함수를 작성하기 위해, 먼저 이미지를 불러와서 크기를 조정한 후 base64 형식으로 인코딩해야 합니다. 서버 사이드에서 이미지를 처리하기 위해 sharp 라이브러리를 사용할 수 있습니다. 이를 Next.js API 라우트를 통해 구현할 수 있습니다.다음은 이미지를 10px 사이즈로 변환하고 base64 문자열로 반환하는 API 라우트를 작성하는 방법입니다:1. sharp 라이브러리 설치먼저 sharp 라이브러리를 설치합니다.npm install sharp2. API 라우트 작성src/pages/api/getBase64.ts 파일을 생성하고 다음 코드를 추가합니다:import type { NextApiRequest, NextApiResponse }..
![]()
nextjs 14버전에서 pwa 를 셋업하는 방법에 대해 알아보았습니다.1. next-pwa 설치yarn add next-pwa yarn add -D webpack2. next.config.mjs 수정아래와 같이 수정합니다.import withPWAInit from "next-pwa";const withPWA = withPWAInit({ dest: "public",});/** @type {import('next').NextConfig} */const nextConfig = {};export default withPWA(nextConfig);3. 퍼블릭에 manifest.json/public 폴더에 아래와 같이 manifest.json 파일을 작성합니다.{ "name": "My Next.js P..
![]()
Step 7. 프로바이더 로그인 버튼 예시"use client";import useAuth from "@/hooks/useAuth";import { showAlert } from "@/lib/openCustomAlert";import { usePathname } from "next/navigation";import { FcGoogle } from "react-icons/fc";function GoogleLogInButton() { const { loginWithProvider } = useAuth(); const pathname = usePathname(); const handleClickGoogle = async () => { if (pathname === "/recove..
![]()
여기에서 이어집니다.Step 4. signup & login & logout 라우트 핸들러 작성이메일회원가입 / 로그인 / 로그아웃 용 라우트 핸들러를 작성합니다.회원가입 / 로그인 로그아웃시에는 여기로 요청날리면 됩니다.(3편 콘텍스트api 활용 에서 자세히 설명)// api/auth/signup/route.tsimport { createClient } from "@/supabase/server";import { NextRequest, NextResponse } from "next/server";export async function POST(request: NextRequest) { const data = await request.json(); const name = data.name a..
![]()
1. 라이브러리 설치리액트 인터섹션 옵저버 설치npm install react-intersection-observer탠스택쿼리 설치npm install @tanstack/react-query @tanstack/react-query-devtools2. 탠스택쿼리 프로바이더 설정프로바이더 만들기"use client";import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query";import { ReactQueryDevtools } from "@tanstack/react-query-devtools";function makeQueryClient() { return new QueryClient({ default..
![]()
기본 세팅가장 먼저 supabase 기본 auth 를 보강해줄 users public table 이 필요합니다. 컬럼명타입용도입력방법외래키iduuidauth 스키마 연결자동입력(유니크)Ocreated_attimestampz작성일자동입력Xemailvarchar회원식별회원가입 시 자동입력Xnicknametext회원식별회원가입 시 자동입력Xavatartext마이페이지 렌더링회원가입 시 자동입력Xintroductiontext마이페이지 렌더링마이페이지에서 입력X 위와 같이 테이블을 생성하고, 아래 sql 을 적용합니다.-- 새로운 트리거 함수 생성CREATE OR REPLACE FUNCTION public.handle_new_user_custom()RETURNS TRIGGER AS $$ BEGIN INSERTI..
![]()
수파베이스를 사용한 인증/인가를 구현하면서 애를 많이 먹었습니다.특히나 자료들이 대부분 조금 오래된 버전들이 많아서 더욱 힘들었습니다. 예를들어 나름 1년~6개월 전쯤에 작성된 자료임에도 Page 라우터를 사용하는 자료라거나,혹은 use client 를 사용해서 처리해야만 하는 클라이언트 사이드 로직을 알려주는 경우가 많았습니다. 하지만 공식홈페이지 자료에는 불친절하긴해도 어찌저찌 방법이 거의 다 나와있긴했고이를 참고하여 이메일 로그인, 비밀번호 찾기, 소셜로그인(깃헙, 구글, 카카오)을 구현하는데 성공했습니다. 과정을 복기하며 하나하나 메모해두려고 합니다.Step 1. Supabase clientNext.js 에서 Supabase 를 최적으로 사용하기 위해서는,이제Supabase Client 를 두 가..
![]()
Lodash의 isEmpty를 사용하지 않고 바닐라 자바스크립트로 객체가 빈 객체인지 확인하는 방법을 정리합니다.방법 1: Object.keys 사용function isEmpty(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object;}const obj = {};console.log(isEmpty(obj)); // trueconst nonEmptyObj = { key: 'value' };console.log(isEmpty(nonEmptyObj)); // false방법 2: for...in 루프 사용function isEmpty(obj) { for (let key in obj) { if (obj.hasOwnProperty..
![]()
React Router의 navigate 함수는 보통 React 컴포넌트 안에서 사용됩니다. 그러나, 일반 JavaScript 파일에서 navigate 함수를 사용하려면 React Router의 내비게이션 기능을 직접 접근할 수 있어야 합니다. 이를 위해, React 컨텍스트나 커스텀 훅을 활용할 수 있습니다.Step-by-Step GuideReact Router의 내비게이션 컨텍스트 사용: React 애플리케이션의 루트 레벨에서 내비게이션 컨텍스트를 설정합니다.커스텀 훅을 사용하여 내비게이션 함수 제공: 내비게이션 기능을 커스텀 훅으로 캡슐화하여 일반 JavaScript 파일에서 접근할 수 있게 합니다.일반 JavaScript 파일에서 내비게이션 함수 사용: 일반 JavaScript 파일에서 내비게이션..
![]()
Suspense 컴포넌트를 Provider 또는 Layout처럼 분리하여 재사용하는 법을 알아보았습니다.이렇게 하면 코드를 더 깔끔하게 유지하고, 여러 곳에서 Suspense 기능을 쉽게 사용할 수 있을 것 같습니다..Step-by-Step GuideSuspenseProvider 컴포넌트 생성:Suspense 컴포넌트를 감싸는 SuspenseProvider 컴포넌트를 생성하여, fallback UI를 중앙에서 관리할 수 있습니다.App.js에서 SuspenseProvider 사용:SuspenseProvider 컴포넌트를 App 컴포넌트에서 사용하여, 하위 컴포넌트들이 지연 로딩되는 동안 보여줄 UI를 지정할 수 있습니다.예제 코드SuspenseProvider.jsimport React, { Suspens..
![]()
try...catch 문에서 에러를 던질 때, 두 가지 방법 사이의 차이를 알아보겠습니다에러를 그대로 던지는 경우 (throw error):새로운 에러 객체를 생성하여 던지는 경우 (throw new Error(error.message)):1. throw errortry { // something to try...} catch (error) { console.error("Error fetching data:", error); throw error;}기존 에러 객체: catch 블록에서 잡힌 원래의 에러 객체를 그대로 다시 던집니다.스택 트레이스 보존: 원래의 스택 트레이스가 보존됩니다. 즉, 에러가 처음 발생한 위치와 관련된 디버깅 정보가 유지됩니다.에러 타입 보존: 원래 에러의 타입이 ..
![]()
class 프로퍼티 선언방법 두가지방식 1:class Book { constructor( public title: string, public author: string, public publishedDate: Date ) {}}방식 2:class Book { public title: string; public author: string; public publishedDate: Date; constructor( title: string = '타이틀', author: string = '저자', publishedDate: Date = new Date() ) { this.title = t..
