프론트엔드부트캠프 #패스트캠퍼스프론트엔드 #패스트캠퍼스김민태 #김민태교육 #김민태부트캠프 #김민태의데브캠프 (4) 썸네일형 리스트형 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) 방식과 달리, 기능 단위로 프로젝트를 나눠서 유지보수를.. 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 다음
