전체 글 (45) 썸네일형 리스트형 Zustand가 상태를 어떻게 기억하고 관리하는가 1. Zustand는 어떻게 동작하는가?Zustand는 내부적으로 다음 세 가지 개념을 중심으로 작동합니다.store 객체: 상태와 상태를 변경할 수 있는 함수를 담고 있는 저장소구독자(subscribers): 상태 변경을 듣고 반응하는 컴포넌트들set 함수: 상태를 변경하고 구독자에게 알려주는 트리거import { create } from 'zustand';const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })),}));2. Zustand의 기억력: 상태 저장 방식Zustand는 내부적으로 Vanilla JS 객체를 사용한 상태 저장소를 가지고 있어요.즉, 상태는 J.. TanStack Query는 서버 상태를 어떻게 관리할까? 1. TanStack Query의 핵심 개념TanStack Query는 서버 상태를 관리하기 위해 Query와 Mutation이라는 두 가지 개념을 사용한다.Query: 서버에서 데이터를 가져오는 역할 (useQuery 사용)Mutation: 데이터를 변경하는 역할 (useMutation 사용)이를 활용해 서버와 클라이언트 간의 상태를 일관성 있게 유지할 수 있다.또한, Query Key라는 개념을 통해 데이터를 구분하고 관리한다. Query Key는 특정 데이터를 식별하는 고유한 키이며, 동일한 Query Key를 가진 데이터는 캐싱되어 효율적으로 관리된다.2. TanStack Query의 내부 동작 원리1) 요청 및 응답 흐름TanStack Query의 useQuery가 실행되면 다음과 같은 과정이 .. FSD(FEATURE-SLICED DESIGN) 폴더 구조 완전 정복 🤔 "우리 프로젝트 폴더 구조, 이게 최선일까?"프론트엔드 개발을 하다 보면 프로젝트가 커질수록 파일이 난잡해지고 유지보수가 어려워지는 경험을 해봤을 것이다. 컴포넌트는 어디에 둬야 할까?비즈니스 로직은 어디에 배치해야 할까?API 호출 로직은 어디에 둬야 하지?페이지가 많아질수록 관리가 점점 힘들어지는데...이 고민을 해결해 줄 폴더 구조가 바로 FSD(Feature-Sliced Design) 이다.🔥 FSD(Feature-Sliced Design)란?FSD는 기능(Feature) 중심으로 코드를 분리하는 방식으로, 러시아 개발자 커뮤니티에서 처음 정립된 폴더 구조이다.기존의 페이지(Page)-컴포넌트(Component)-서비스(Service) 방식과 달리, 기능 단위로 프로젝트를 나눠서 유지보수를.. Next/Image를 활용한 이미지 최적화 이번 글에서는 Next.js의 Image 컴포넌트를 활용한 이미지 최적화 방법에 대해 정리해 보겠습니다. next/image는 이미지 로딩 성능을 최적화하고, 다양한 화면 크기에 맞춰 이미지를 자동으로 조정해 주는 기능을 제공합니다. 각 주요 속성들을 어떻게 활용할 수 있는지 살펴보겠습니다.기본 사용법next/image를 사용하여 이미지를 최적화하려면, 아래와 같은 형식으로 컴포넌트를 사용합니다.import Image from 'next/image'export default function Page() { return ( )} 필수 속성src: 이미지의 경로입니다. 외부 URL 또는 내부 경로를 사용할 수 있습니다.width 및 height: 이미지의 원본 크기(픽셀 단위)를 지정합니다. 이 .. Next Auth란? 현재 카카오 소셜 로그인을 구현하면서, JWT Access Token 값을 어떻게 해야 안전하게 보관할 수 있는지 고민하던 와중에 해당 라이브러리를 알게 되었습니다. 특히, Oauth Provider를 제공하여 이를 이용해 원하는 소셜 로그인을 빠르게 구현할 수 있다고 하는데요. 이번 글에서는 Next Auth가 무엇인지 기존 방식과 무엇이 다른지 알아보도록 하겠습니다. Next Auth를 이용한 인증 시스템 구현1. Next Auth 소개Next Auth는 Next.js 애플리케이션에서 로그인을 쉽게 구현하는 데 필요한 여러 기능을 제공하는 라이브러리입니다. 다양한 OAuth 제공자(구글, 페이스북 등)와 쉽게 통합할 수 있습니다.이메일 기반 로그인, 가입 기능을 지원합니다.JWT를 사용한 토큰 기반.. 타입스크립트를 그냥 타입만 지정하는 언어라고 생각했나요? 많은 개발자가 타입스크립트를 처음 접할 때, 단순히 "자바스크립트에 타입만 추가된 언어"라고 오해하는 경우가 많은 것 같습니다. (저 역시도..!) 하지만 타입스크립트는 단순한 타입 지정 이상의 강력한 기능을 제공합니다. 오늘은 타입스크립트가 제공하는 다양한 기능에 대해 탐구해보겠습니다. 1. 타입 시스템 이상의 역할타입스크립트의 가장 큰 특징은 정적 타입 시스템이지만, 그게 전부는 아닙니다. 타입스크립트는 코드 품질을 높이고 유지보수를 쉽게 만들어주는 다양한 기능을 제공합니다.1.1. 강력한 타입 추론타입스크립트는 명시적인 타입 선언 없이도 변수나 함수의 반환 타입을 자동으로 추론합니다. 이는 코드의 가독성을 유지하면서도 타입 안정성을 확보할 수 있도록 도와줍니다.function add(a: numbe.. 6주차 학습일지 1. forEach()와 map() 차이점공통점둘 다 배열을 순회(iterate)하며 각 요소에 대해 특정 작업을 수행할 때 사용합니다.forEach()주요 특징: 반환 값이 없습니다.목적: 배열 요소를 단순히 반복하고, 각 요소에 대해 어떤 동작을 수행하는 데 사용됩니다.map()주요 특징: 새로운 배열을 반환합니다.목적: 배열 요소를 변형하여 새로운 배열을 생성하는 데 사용됩니다.차이점forEach()는 반환 값이 없고 단순한 반복 작업에 적합하며, map()은 변형된 데이터를 새로운 배열로 반환합니다.2. 이벤트 루프란?자바스크립트의 비동기 처리를 관리하는 메커니즘으로, 태스크(작업)들을 실행할 순서를 결정합니다.구조Call Stack(호출 스택): 현재 실행 중인 함수가 저장되는 공간Web API.. 5주차 학습일지 export와 export default의 차이점exportexport는 모듈에서 여러 항목을 내보낼 때 사용됩니다. 하나의 모듈에서 여러 가지 함수, 객체, 변수 등을 내보낼 수 있으며, 이름 기반으로 가져오기(named export)가 이루어집니다.사용 예시// utils.jsexport const add = (a, b) => a + b; export const subtract = (a, b) => a - b;가져오기 방법// main.jsimport { add, subtract } from './utils'; console.log(add(5, 3)); // 8 console.log(subtract(5, 3)); // 2위 코드에서 볼 수 있듯이, export로 내보낸 항목은 중괄호 {}를 사용하여.. 이전 1 2 3 4 ··· 6 다음
