전체 글 (118) 썸네일형 리스트형 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. 전역 상태 관리가 필요한 경우?📖전역 상태 관리가 필요한지 판단하려면 데이터의 범위와 복잡성을 고려해야 합니다. 데이터가 여러 컴포넌트에서 사용될 때예) 로그인된 사용자 정보헤더에서 사용자.. [모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 서비스를 개발하고 배포하는 과정에서 중요한 요소 중 하나는 사용자 피드백을 수용해 지속적으로 제품을 개선하는 것입니다.이번에는 `Release 1.0.0` 첫 배포 이후 사용자 피드백 기반으로 기능 추가와 버그 수정 과정, 버전 관리의 중요성에 대해 공유해보려고 합니다. 1. Release 1.0.0 첫 배포! 📖초기 목표서비스를 초기 사용자에게 선보이기 위해 핵심 기능에 집중했습니다. `핵심 기능` : 스탬프 관리, 지도, 앨범, 추천 관광지 2. 사용자 피드백 기반 개선 과정 📖Release 1.0.1🔥 fix 수정된 문제폰트 오류: 특정 브라우저에서 글꼴이 올바르게 표시되지 않는 문제를 해결했습니다.스와이퍼 중앙 정렬 오류 : 콘텐츠 정렬이 어긋나는 문제를 수정해 UI를 강화했습니다.비로그인 .. [성능 최적화] Next.js HydrationBoundary를 활용한 서버-클라이언트 데이터 최적화 Next.js 서버 컴포넌트와 Tanstack Query를 활용해 성능 최적화하는 방법에 대해 소개해보려고 합니다.서버 - 클라이언트 데이터 최적화 📖✨ Next.js의 서버 컴포넌트에서 데이터를 미리 패치해 클라이언트 컴포넌트로 넘겨준다면 초기 렌더링을 개선할 수 있습니다. ✨ 기존 코드기존에는 클라이언트 컴포넌트에서 `Tanstack Query`를 사용해 데이터를 패칭을 했습니다.const MainComponent = () => { const userId = useUserId(); const { data: tourismList, isPending isError } = useGetTourismListQuery(userId); ...} 리팩토링 코드`HydrationBoundary`와 `.. 이전 1 2 3 4 ··· 15 다음
