![]()
모든 옵션 사용시 검색 액션이 두 번 들어가는 구조입니다.옵션 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..
![]()
이미지를 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..
![]()
로그인, 회원가입, 인풋의 기본 템플릿을 정리합니다.인풋// 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}} 흔하지는 않지만 원하는 경우 레이아웃 대신 템플릿을 선택할 수 있습니다.사용 효과(예: 페이지 조회 수 기록) 및 사용 상태(예: 페이지별 피드백..
![]()
Awaited, ReturnType타입스크립트에서 Awaited 와 ReturtnType 에 대해 공부하였습니다.타입스크립트에서 Awaited>를 사용하여 타입을 지정하는 방식은 함수 foo의 반환 타입이 Promise일 때 유용합니다. 이를 통해 foo 함수의 비동기 작업이 완료된 후의 결과 타입을 추론할 수 있습니다.Awaited 타입 유틸리티Awaited는 타입스크립트에서 비동기 함수의 결과 타입을 추론하는 데 사용되는 유틸리티 타입입니다. Promise가 반환하는 값의 타입을 추출합니다.ReturnType 타입 유틸리티ReturnType는 주어진 함수 타입 T의 반환 타입을 추출하는 유틸리티 타입입니다.typeof 연산자typeof 연산자는 변수나 함수의 타입을 가져오는 데 사용됩니다.예제// 비..
![]()
cva with 타입스크립트?포켓몬 도감 비스무리한 개인과제 프로젝트를 하면서,cva 라이브러리를 사용 중에 타입지정에 매우 애를 먹었습니다.원래 이렇게 쓰는건가 싶습니다...? 더 공부해봐야겠습니다 ㅠㅠ아래의 예는 포켓몬의 타입 18개에만 해당하는 것이라 문제가 덜하지만속성인지 뭔지는 게임의 세대가 변화될때마다 추가되어서 뭐 몇개인지도 모르겠어요. 이것을 다 리터럴 타입으로 지정하자니 너무 힘들고 해서 mapped type 을 사용하긴 했는데되는건지 뭔지 모르겠습니다? 관련 내용을 정리합니다.cva chip 컴포넌트 만들기포켓몬의 18가지 타입에 맞는 Chip 컴포넌트를 만들기 위해 기존의 chipVariants 객체에 포켓몬 타입별 색상을 추가합니다.각각의 타입에 적절한 배경색, 테두리색, 텍스트 색..
![]()
이번엔 tanstack query 의 공식문서 중 Advanced Server Rendering 항목을 공부하였습니다.아래 내용을 정리합니다. 이번 포스팅 내용이 app router 에 해당합니다.Advanced Server Rendering이 가이드에서는 스트리밍, 서버 컴포넌트 및 Next.js 앱 라우터와 함께 React 쿼리를 사용하는 모든 것을 배울 수 있습니다. 이 가이드에 앞서 서버 렌더링 및 하이드레이션 가이드를 읽어보시는 것이 좋으며, 이 가이드에서는 SSR과 함께 React Query를 사용하기 위한 기본 사항을 설명하고 성능 및 요청 워터폴과 프리페칭 및 라우터 통합에 대해서도 유용한 배경 지식을 담고 있습니다. 시작하기 전에 SSR 가이드에 설명된 초기데이터 접근 방식은 서버 컴포넌..
![]()
이번엔 tanstack query 의 공식문서 중 Server Rendering & Hydration 항목을 공부하였습니다.아래 내용을 정리합니다. 중요! 이번 포스팅 내용은 페이지 라우터 버전입니다. 앱 라우터 버전은 다음 포스팅에 있습니다 Server Rendering & Hydration이 가이드에서는 서버 렌더링에 React 쿼리를 사용하는 방법을 알아봅니다.배경 지식은 프리페칭 및 라우터 통합 가이드를 참조하세요. 그 전에 성능 및 request waterfall 가이드도 확인해 보세요.스트리밍, 서버 컴포넌트 및 새로운 Next.js 앱 라우터와 같은 고급 서버 렌더링 패턴에 대해서는 고급 서버 렌더링 가이드를 참조하세요.서버 렌더링 & React 쿼리그렇다면 서버 렌더링이란 무엇일까요?이 가..
![]()
tanstack query 의 공식문서 중 Prefetching & Router Integration 항목을 공부하였습니다.아래 내용을 정리합니다. Prefetching & Router Integration특정 데이터가 필요할 것으로 예상되는 경우 미리 가져오기를 사용하여 캐시를 해당 데이터로 미리 채우면 더 빠른 환경을 제공할 수 있습니다.몇 가지 다른 프리페칭 패턴이 있습니다:이벤트 핸들러에서컴포넌트에서라우터 통합을 통해서버 렌더링 중(라우터 통합의 또 다른 형태)이 가이드에서는 처음 세 가지를 살펴보고, 네 번째는 서버 렌더링 및 수화 가이드와 고급 서버 렌더링 가이드에서 자세히 다룰 것입니다. 프리페칭의 구체적인 용도 중 하나는 요청 워터폴을 피하는 것인데, 이에 대한 자세한 배경과 설명은 성능 ..
![]()
Structural TypingTypeScript에서 타입을 축약해도 작동하는 이유는 TypeScript의 구조적 타이핑(structural typing) 덕분입니다. TypeScript는 객체의 실제 형태(shape)를 기반으로 타입을 확인합니다. 즉, 필요한 속성만 지정해도, 해당 속성들이 존재하면 타입이 유효하다고 판단합니다.축약한 타입이 작동하는 이유부분 타입 매칭: TypeScript는 객체가 정의된 타입을 충족하는지 확인할 때, 필요한 속성만 일치하면 타입이 맞다고 판단합니다. 축약된 타입 정의에서도 필요한 속성만 일치하면 타입이 유효하다고 판단합니다.유연한 타입 시스템: TypeScript는 유연하게 타입을 해석하므로, 특정 속성만 필요한 경우 전체 타입을 정의하지 않아도 됩니다.예제 설명축..
![]()
튜터님께서 타입을 검사할 때 너무나도 유용한 코드를 알려주셨습니다.이 코드는 미리 정의된 타입 디스크립터와 동적으로 정의된(통신의 결과 등)객체의 타입을 검증하려는 목적을 가지고 있습니다. 타입스크립트에 대한 이해가 더욱 깊어진 것 같습니다!!전체 코드, 주석 참고!// 다른 형태를 가진 객체를 아래의 로직을 활용해 검사해 보려면,// 1) 이 인터페이스를 검사할 객체와 같게 바꾸고interface MyObject { value: number;}type TypeDescriptor = { [P in keyof T]: string;};function checkType(obj: any, typeDescriptor: TypeDescriptor): boolean { for (const key in..
![]()
createObjectUrl파일을 다룰때, 이미지 파일등의 미리보기를 띄우거나 할 경우에 유용하게 사용할 수 있다고 합니다!이 간단한걸 몰라서 막 base64로 바꾸고 했었습니다 ㅠ.ㅜ사용법은 매우 간단합니다. 그냥 URL.createObjectUrl(file) 입니다.. function handleFileInput(event) { const file = event.target.files[0]; const url = URL.createObjectURL(file); // URL을 사용하여 파일을 미리 보기 document.getElementById('preview').src = url; } // HTML // // 간단하지만 몰랐던 것! 정리..
![]()
이번 개인과제에서는 250개의 배열을 리턴하는 api 를 사용해야 했습니다.그런데 이것을 한번에 화면에 렌더링 하자니 무언가 마음에 들지 않아서react-intersection-observer 를 사용해보고 싶어졌습니다.1 ) 전체 배열을 부분 배열화 하여 2차원 배열 생성이를 위해서 250 길이의 배열을 20개씩 나누기로 했습니다.그래서 이를 수행하는 간단한 util 함수를 작성하였습니다.// util 함수function makeChunkArray(array: T[], chunkSize: number): T[][] { const chunks = []; for (let i = 0; i { const fetchCountries: FetchCountries = async () => { ..
![]()
네이버 지도 관련 마지막입니다.네이버 지도 api 에서 정보창을 만들 때 기본적으로 문자열만 받는데,이부분을 리액트 컴포넌트로 할 수 없을까 고민하다가 나온 결론입니다.React.createRoot, React.render 조합function SetInfoWindowContent( type, searchedValue, htmlAddresses, infoWindow, place = null, navigate = null, marker = null, user = null, contracts = []) { // 임시 컨테이너 생성 const container = document.createElement('div'); container.style...
![]()
리팩토링은 미래의 나에게.. ㅋㅋ참고용으로만 올려야겠습니다.네이버지도 with React - Step by Step 2initGeocoder.jsfunction initGeocoder( infoWindow, map, searchInputRef, searchButtonRef, marker, setSelectedGeoData, setSelectButtonDom, user) {map.addListener('click', (e) => { searchCoordinateToAddress( infoWindow, map, e.coord, setSelectButtonDom, setSelectedGeoDa..
![]()
팀플 주간이 끝났습니다!팀원분들의 노력 덕분에 무리없이 프로젝트를 완료 할 수 있었습니다. 아웃소싱 프로젝트(aka 외부 api 사용 프로젝트)에서 저희는 네이버 지도 api 를 활용하여운동 모임 사이트를 기획했고, 5일이라는 짧은 시간동안 요구사항을 대부분 구현했습니다.오늘은 그 중 제가 담당했던 네이버 지도 api 에 관한 사항을 정리하려고 합니다.네이버지도 with React - Step by Step 1네이버 지도 api script 동적 로드네이버 지도 api 를 이용하기 위해서는 https://openapi.map.naver.com/openapi/v3/maps.js 라는 스크립트를 로드해야 합니다index.html 에서 script 태그로 로드해도 되지만, 좀 더 동적인 방식을 고려하였습니다사..
![]()
함수형 업데이트Zustand의 set 함수에서 상태를 업데이트할 때, 두 가지 방식 모두 사용할 수 있습니다:단순한 상태 업데이트:이 방식은 상태를 직접적으로 업데이트합니다. set 함수에 객체를 전달하면 Zustand는 해당 객체를 기존 상태에 병합(merge)합니다.setUser: (user) => set({ user }),setLoggedIn: (isLoggedIn) => set({ isLoggedIn }),함수형 상태 업데이트:이 방식은 함수형 업데이트를 사용하여 상태를 업데이트합니다. 이 패턴은 주로 이전 상태에 의존하는 상태 업데이트가 필요할 때 사용됩니다. 예를 들어, 상태의 특정 부분을 변경할 때 이전 상태를 참조해야 할 경우에 유용합니다.setUser: (user) => set(() =>..
![]()
Zustand 스토어에서 expends의 초기값을 설정하는 방법으로 useQuery를 사용할 수 있지만, useQuery는 React 컴포넌트 내부에서만 사용할 수 있습니다. 대신 Zustand와 Tanstack Query를 함께 사용하여 상태를 관리할 수 있는 패턴을 사용할 수 있습니다.다음은 Zustand와 Tanstack Query를 함께 사용하여 초기 데이터를 설정하는 방법입니다.1. Tanstack Query와 Zustand 설정먼저, react-query 라이브러리와 Zustand를 설치해야 합니다.npm install @tanstack/react-query zustand2. Zustand 스토어 설정Zustand 스토어를 설정하고, expends 상태를 관리하는 방법을 정의합니다.import..
![]()
리액트에서 Context API를 사용하지 않고 Tanstack Query를 사용하여 Supabase의 인증 상태를 관리하고 확인하는 방법은 다음과 같습니다.1. Tanstack Query 설정import { QueryClient, QueryClientProvider, useQuery } from 'react-query';import { supabase } from './supabaseClient';const queryClient = new QueryClient();function App() { return ( );}2. 인증 상태 확인const fetchSession = async () => { const { data: { session }, error } = await ..
