전체 글

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..

로그인, 회원가입, 인풋의 기본 템플릿을 정리합니다.인풋// Input.tsximport { ComponentProps, useId } from "react";type InputProps = { label?: string; required?: boolean; type? : "text" | "password";} & ComponentProps;function Input({ label, required, id, type = "text", ...props }: InputProps) { const inputUid = useId(); const inputId = id || inputUid; return ( {label && ( ..

오늘부터 next.js 공식문서를 하나씩 파헤쳐보려고 합니다.시작으로, 제가 잘 몰랐던 Template.tsx 부터 해보겠습니다.template.js템플릿 파일은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사합니다.경로 전체에서 지속적으로 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시(on Navigation) 각 하위 레이아웃에 대해 새 인스턴스를 만듭니다.export default function Template({ children }: { children: React.ReactNode }) { return {children}}   흔하지는 않지만 원하는 경우 레이아웃 대신 템플릿을 선택할 수 있습니다.사용 효과(예: 페이지 조회 수 기록) 및 사용 상태(예: 페이지별 피드백..