전체 글16 프론트엔드 프로젝트 첫 시작 시, 고려사항들 노트용 - 권한별 라우트 처리- theme, style, 아이콘 관리 파일- 낙관적 업데이트 (React Query - get은 낙관적 업데이트를 하면 데이터를 새로 불러오기 전 보이는 캐시 데이터로 인해 오해를 불러올 수 있음 -> get은 낙관적 업데이트 x, 로딩바로 제어. put/post/remove는 낙관적 업데이트로 등록/수정/삭제 네트워크 성공 전에도 바로 적용된거처럼 낙관적 업데이트를 진행한다. 혹시 네트워크 실패로 등록/수정/삭제가 제대로 이루어지지 않은 경우에는 저장해둔 이전 데이터로 롤백하도록 한다.)- providers 폴더 (AuthProvider, ThemeProvider, QueryProvider,...)- validation schemas- utils, libs, hooks 고려- .. 2026. 2. 9. Complex 컴포넌트 & Headless Hook 아키텍처 정리본 (Table.jsx) 🏛️ Complex 컴포넌트 & Headless Hook 아키텍처 정리대규모 프로젝트에서 테이블과 같은 복잡한 컴포넌트는 UI와 로직이 뒤섞이기 쉽습니다. 시니어 아키텍처에서는 이를 [상태 관리(Hook)] - [명세 정의(Config)] - [그리기(Component)] 세 계층으로 분리합니다.1. 커스텀 훅(useTable)을 사용해야 하는 이유페이지마다 테이블의 기능은 비슷하지만, 관리해야 할 상태(Stateful Logic)가 많기 때문입니다. 이를 훅으로 분리하면 다음과 같은 이점이 있습니다.중복 로직 제거: 페이지네이션, 정렬, 필터링 등 모든 페이지에서 반복되는 코드를 한 곳에서 관리합니다.선언적 프로그래밍: 페이지(Page) 컴포넌트는 "어떤 상태를 가질지"만 선언하고, 복잡한 구현은 훅.. 2026. 1. 21. 훅과 유틸... hook util의 차이를 아는가 "리액트 엔진을 사용하느냐 아니냐"1. util 폴더: "리액트 따위(?) 몰라도 돼" (Pure JS)util 폴더에 들어가는 함수들은 리액트라는 환경에 전혀 의존하지 않는 '순수 자바스크립트/타입스크립트' 로직입니다.특징: 어떤 환경(Node.js, 바닐라 JS, React)에서도 그대로 가져다 쓸 수 있습니다.예시: 날짜 포맷팅(2024-05-20 → 2024년 5월 20일), 숫자 세 자릿수 콤마 찍기, 복잡한 수학 계산 등.테스트: 리액트 컴포넌트를 렌더링할 필요 없이 함수만 불러와서 테스트하면 되니 매우 빠르고 쉽습니다.// 이건 순수 JS 로직이므로 util 폴더에 어울립니다.export const convertToUpper = (str: string) => str.toUpperCase();.. 2026. 1. 21. 리액트가 훅을 구분한다? 리액트가 훅을 구분하는 방식은 "이름(이름 규칙)"과 "실행 문맥(Execution Context)" 두 가지 단계를 거칩니다. 리액트가 훅을 검출하고 관리하는 메커니즘1단계: 컴파일 시점의 구분 (이름 규칙: use...)코드가 실행되기 전, ESLint(개발 도구)는 함수 이름을 보고 훅인지 아닌지 판단합니다.약속된 접두어: 리액트 커뮤니티에서는 모든 커스텀 훅의 이름을 use로 시작하기로 약속했습니다.감시: ESLint는 use로 시작하는 함수를 만나면 "아, 이건 리액트 엔진의 관리를 받아야 하는 훅이구나!"라고 인식하고, 리액트 훅의 규칙(조건문 내 사용 금지 등)을 잘 지키고 있는지 검사합니다.2단계: 실행 시점의 구분 (Dispatcher와 Call Stack)진짜 핵심은 실행될 때입니다... 2026. 1. 21. 이전 1 2 3 4 다음