전체 글 (120) 썸네일형 리스트형 TanStack Query로 낙관적 업데이트 구현 (구인/구직 찜) 사용자가 버튼을 클릭했을 때, 서버 응답을 기다리느라 반응이 느리면 사용자는 해당 기능이 오류가 발생했다고 생각을 할 수도 있습니다. 그래서 이번 게시글에서는 `TanStack Query`의 낙관적 업데이트(Optimistic Update)를 활용해 서버 응답을 기다리지 않고도 즉각적으로 UI가 반응할 수 있도록 구현한 내용을 공유해보려고 합니다. 구현 시나리오: 구인/구직 게시물 찜하기 ✨- 사용자가 찜 버튼을 누르면 즉시 UI 변경.- 서버 요청 실패 시 이전 상태로 롤백.- 찜 상태는 게시물 상세 쿼리에 반영되어야 하며, 관련 쿼리 무효화. UI 컴포넌트 📖const RecruitDetailPage = () => { const { favoriteMutate } = useFavoriteMutati.. next-intl을 이용한 다국어 처리 국내 서비스라고 하더라도 글로벌 사용자를 고려해 다국어 지원을 지원하고 있습니다. 이번 프로젝트에서는 `next-intl`을 사용해 간단하고 일관성 있는 다국어 처리 구조를 만들었고, 그 구조와 사용 패턴에 대해 소개해보려고 합니다.next-intl 사용 이유 ✨서버와 클라이언트에서 일관된 처리`next-intl` 은 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 모두에서 일관된 방식으로 데이터를 처리할 수 있습니다. 자동 로딩 및 타입 지원 다국어 메시지 파일을 자동으로 로드하고, Typescript와의 호환성을 제공하여 타입 안정성을 보장해 주기 때문에 실수를 줄이고 편리하게 작업할 수 있습니다. locale 기반 포맷팅 지원숫자, 날짜, 시간 등 다양한 포맷을 lo.. ESLint import, export, object 정렬 자동화 하기 - eslint-plugin-perfectionist 활용 프로젝트에서 코드 스타일을 유지하는 것은 협업과 유지보수에 있어서 매우 중요하다고 생각합니다.특히 import 순서, 객체 속성 정렬 등은 개발자가 직접 정렬하는 경우가 많아 실수하기 쉽습니다.이런 반복적인 정렬 작업을 ESlint로 자동화하는 방법에 대해 소개해보려고 합니다.eslint-plugin-perfectionist 사용 이유 ✨기존 eslint 플러그인 중에서도 import 정렬을 도와주는 것들이 있습니다.근데 `eslint-plugin-perfectionist`는 import, export, 객체, 인터페이스 정렬까지 지원해주고 Custom Grouping과 다양한 정렬 기준을 지원합니다.그중에서도 제가 제일 필요했던 줄 길이에 따른 정렬을 지원한다는 점에서 `eslint-plugin-per.. PerformanceObserver를 활용해 간단한 LCP 측정기 구현 오늘은 웹 페이지의 로딩 성능을 평가하는 중요한 지표 중 하나인 LCP를 `PerformanceObserver`를 사용해 간단한 LCP 측정기를 만들어 보겠습니다.PerformanceObserver란 📖`PerformanceObserver`는 웹 페이지의 성능 데이터를 감지하고 분석하는 API입니다.브라우저가 기록하는 다양한 성능 데이터를 실시간으로 수집할 수 있습니다.구문new PerformanceObserver(callback) 관찰된 성능 이벤트가 기록될 때 호출되는 콜백입니다. entryTypesPerformanceObserver를 사용할 때, `observe()` 메서드를 통해 감지할 항목을 설정할 수 있습니다.Entry Type설명paintfirst-paint, first-contentful.. [트러블 슈팅] 공통 헤더 개발 중 발생한 Typescript 오류 (ReactNode, ReactElement) 발생한 오류 🔥Type error: Property 'props' does not exist on type 'string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise'. Property 'props' does not exist on type 'string'. 공통 헤더를 만드는 과정에서 `leftIcon` props 속성에 접근할 때 위 오류가 발생했습니다.'use client';import { cn } from '@src/utils';import { useRouter } from 'next/navigation';import React from 'react';interface HeaderProps { le.. KINS 프로젝트 초기 세팅 초기 세팅의 중요성 📖프로젝트 초기 세팅은 개발의 방향을 결정짓는 중요한 작업입니다.특히 협업 환경에서 코드 스타일과 퀄리티를 일관되게 유지하는 것이 필수적입니다.이번 글에서 프로젝트 세팅에서 사용된 주요 파일과 설정들을 하나씩 살펴보려고 합니다. ✨ 잘 몰라서 기록용으로 한 줄씩 해석해보려고 합니다!ESLint 설정 📖ESLint는 코드 방식을 일관성 있게 구현할 수 있도록 도와주는 도구입니다. 1. 모듈 가져오기const { FlatCompat } = require('@eslint/eslintrc');const tsParser = require('@typescript-eslint/parser');const tsPlugin = require('@typescript-eslint/eslint-plugi.. 폴리필이란? 폴리필 📖`폴리필`은 자바스크립트 표준에서 새로 추가된 기능을 구현하지 않은 브라우저나 환경에서도 해당 기능을 사용할 수 있게 만들어주는 코드입니다. 예를 들어, 최신 브라우저는 최신 표준의 대부분 기능을 지원하지만, 오래된 브라우저는 지원하지 않는 경우가 많습니다. 이때 폴리필을 통해 부족한 기능을 "채워 넣는" 작업을 합니다. 폴리필은 다음 두 가지 방식으로 작동합니다.새로운 내장 함수 추가예를 들어, `Array.prototype.includes` 같은 함수가 오래된 브라우저에 없을 경우 이를 직접 구현해 사용할 수 있게 만듭니다.기존 함수의 동작 수정브라우저에 이미 존재하는 기능이 최신 표준과 맞지 않다면, 이를 수정해 동작을 맞춥니다. 왜 폴리필이 중요한가요? 📖폴리필은 개발자가 최신 기술로.. 전역 상태 관리, 정말 필요한가? 현대 프론트엔드 개발에서는 저역 상태 관리 도구의 사용이 일반적입니다.하지만 모든 프로젝트에서 전역 상태 관리가 필요하다고는 생각하지 않습니다. 이 글에서는 전역 상태 관리가 왜 필요한지, 언제 사용하는 것이 적합한지에 대해 소개해보려고 합니다.1. 전역 상태란? 📖전역 상태는 앱의 여러 컴포넌트가 공통으로 사용하는 데이터를 의미합니다. 예를 들어로그인된 사용자 정보쇼핑몰의 장바구니 데이터다크 모드와 같은 UI 설정 이러한 데이터는 앱 전반에서 공유되며, 여러 컴포넌트에서 접근하고 수정할 수 있어야 합니다. 2. 전역 상태 관리가 필요한 경우?📖전역 상태 관리가 필요한지 판단하려면 데이터의 범위와 복잡성을 고려해야 합니다. 데이터가 여러 컴포넌트에서 사용될 때예) 로그인된 사용자 정보헤더에서 사용자.. 이전 1 2 3 4 ··· 15 다음
