React
프론트엔드에서 테스트는 어떻게 진행할까?
프론트엔드 테스트는 왜 필요할까? 버튼 하나의 조건을 바꿨는데 모달이 열리지 않을 수 있고, API 응답 구조가 조금 바뀌었는데 리스트가 렌더링되지 않을 수 있습니다. 또는 로그인 여부에 따라 보여야 할 페이지가 잘못 노출될 수도 있습니다. 특히…
카테고리
React
이 카테고리 글 10개
- React
폴더 구조와 아키텍처에 대해서 알아보자!
폴더 구조 & 아키텍처 프론트엔드 프로젝트가 작을 때는 보통 components, hooks, utils, api, pages 정도로 폴더를 나눠도 큰 문제가 없습니다. 하지만 기능이 많아지고, 로그인, 게시글, 댓글, 마이페이지, 관리자 기능,…
- React
에러 핸들링 & 안정성 - 프론트엔드 에러 처리
프론트엔드에서도 에러처리가 필요하다 서비스를 운영하기 위해 백엔드의 지원은 필수적이지만, 만일 백엔드 서버가 아프거나, 네트워크 상황이 좋지 않아 제대로 통신이 이루어지지 않았을 때, 에러처리가 필요하다. 만일 단순한 API를 요청이 실패하여 에…
- React
Profiler부터 memo까지 제대로 사용해보자!
React 렌더링 최적화 실전 Profiler부터 memo까지 제대로 사용해보자! React에서 성능 최적화를 이야기할 때 가장 많이 나오는 키워드는 useMemo, useCallback, React.memo입니다. 하지만 이들을 어떻게 올바르게…
- React
TanStack Query 에 대해서 알아보기!
왜 TanStack Query를 사용해야 할까요? TanStack Query는 React 애플리케이션에서 서버 상태(Server State) 를 효율적으로 다루기 위한 라이브러리입니다. 예전에는 React Query라는 이름으로 많이 알려져 있었…
- React
상태 관리 전략 비교 - Context API, Zustand, Redux Toolkit 중 무엇을 선택해야 할까?
상태 관리 전략 비교 Context API, Zustand, Redux Toolkit을 어떻게 선택해야 할까? React를 공부하다 보면 어느 순간부터 단순히 컴포넌트를 만드는 것보다 더 중요한 고민을 하게 됩니다. 바로 상태를 어떻게 관리할 것…
- React
React Hook 완전 이해하기
React Hook 완전 이해 단순한 함수가 아닌 React의 핵심 인터페이스 React를 사용하다 보면 자연스럽게 useState, useEffect, useRef와 같은 Hook을 접하게 됩니다. 대부분의 개발자는 Hook을 각각의 기능 단위…
- React
React useState 완전 이해하기
useState 완전 이해하기 렌더링을 제어하는 상태 관리의 본질 React에서 useState는 가장 기본적인 Hook이지만, 단순한 상태 저장 도구로 이해하기에는 부족한 개념입니다. useState는 값을 저장하는 기능을 넘어서, 렌더링을 제…