co-cherry

"You should write tests if you value your time. Much better to catch a bug locally from the tests than getting a call at 2:00 in the morning and fix it then."— Kent C. Dodds 버그는 발견이 늦을수록 비용이 기하급수적으로 증가한다.설계 단계 대비 프로덕션에서는 최대 100배, CrowdStrike처럼 한 줄이 80억 달러로 이어질 수도 있다. 테스트는 "만일의 보험"이 아니라 개발 속도를 높이는 투자다. Viest + React Testing Library + MSW로 프론트엔드 테스트 전략을 완성하는 법을 알아보자. 테스트가 왜 필요할까?테스트가 없는 코드는 단순히 ..

React 프로젝트를 처음 시작할 때, 파일 구조 같은 건 신경 쓰지 않았다.기능 구현에만 중점을 두고, '일단 되게 만들자'가 목표였으니까.하지만 프로젝트가 커지면서 기존 파일들조차 찾기 힘들어지는 경우가 많았고,기능을 한번 추가하려고 하면 components, hooks, utils, api 폴더를 전부 뒤져야 했다.관련 파일이 여러 폴더에 흩어져 있으니 수정할 때마다 탐색기를 끝없이 스크롤 했다. 팀 프로젝트를 해보면서 팀원마다 각자 본인만의 기준으로 파일을 배치해 팀원들의 코드를 찾기 힘들 때도 많았다. 파일을 빨리 찾거나 추가할 수 있으며, 누가 보더라도 직관적으로 이해되는 프로젝트 구조를 만들 수 있을까? FSD(Feature-Sliced Design) Architecture 프론트엔드 애플..

API 에러 분류 HTTP 상태 코드 (HTTP Status Code)HTTP 요청의 성공/실패 여부를 서버에서 알려주는 코드 API 호출 시, HTTP Status Code로 API 처리 결과를 받고 HTTP Response Body로 응답 값을 받음 정상 호출: 200 반환, 각 API 별 지정된 포맷의 결과값을 받음 비정상 호출: 400/500 반환, 각 API 서버별 에러 코드와 에러 메세지 값을 받음 2XX 성공 상태 코드 200 OK 가장 일반적인 성공 응답, GET/PUT/PATCH 요청 성공, 응답 본문에 데이터가 포함 201 Created 리소스 생성 성공(POST), Location 헤더에 생성된 리소스 URL 포함 202 Accepted 요청 접수됨(처리는 아직 완료 아님), 비동기 ..

이전에 구현한 무한 스크롤 영화 페이지에 상세 페이지 모달을 제작해보았다. 이번 시간에는 아래 항목들을 학습해보려고 한다.바운더리 패턴 useMemo / useCallbackReact DevtoolsSuspense / Error Boundary 패턴 Loading / Error UI를 상위 컴포넌트로 올려서 한 곳에서 처리하는 관심사 분리 패턴 Suspense 로딩 중에 보여 줄 대체 UI로, 자식 컴포넌트들이 로딩을 완료할 때까지 fallback 표시Error Boundary Error를 catch 하는 컴포넌트로 에러 발생 시, fallback 표시 *fallback 로딩/에러 중 보여 줄 대체 UI throw Promise → Suspense가 catch → fallback(로딩UI) 표시t..

4주차 과제로 영화 사이트(CGV)처럼 TMDB를 통해 영화 데이터를 불러와 무한 스크롤 페이지를 구현해보았다. 1. 타입 설정먼저, 영화 리스트와 영화 타입을 먼저 지정해주었다. TMDB API 응답 구조를 그대로 정의하되, 필요하지 않을 것 같은 부분은 빼주었다.MovieListResponse가 API 호출 시 반환되는 최상위 타입이고, 그 안에 Movie 배열이 담기는 구조이다. export interface Movie { id: number; title: string; overview: string; poster_path: string | null; // 포스터가 없을 수 있으므로 NULL 허용 release_date: string; vote_average: n..

TanStack QueryReact 애플리케이션에서 서버 상태(Server State)를 관리하기 위한 비동기 상태 관리 라이브러리 서버에서 데이터를 가져오고, 캐싱하고, 동기화하고, 업데이트 하는 모든 과정을 대신 관리해준다. Q. 왜 필요할까?useEffect + fetch 로 직접 서버 데이터를 관리하면 매번 반복되는 코드를 작성해야 함 const [data, setData] = useState(null);const [isLoading, setIsLoading] = useState(false);const [error, setError] = useState(null);useEffect(() => { setIsLoading(true); fetch('/api/todos') .then(res =..

https://ko.react.dev/learn/managing-state State 관리하기 – ReactThe library for web and native user interfacesko.react.dev Context API컴포넌트 트리 전체에 데이터를 전달하는 React 내장 기능별도의 라이브러리 없이 React가 기본 제공하는 전역 상태 도구 Props drilling 없이 하위 컴포넌트에서 상태를 구독할 수 있다. 장점설치 불필요(React 내장)createContext → Provider → useContext 세 가지만 알면 바로 쓸 수 있음 다크모드 테마, 로그인 유저 정보, 언어 설정처럼 앱 전체에서 읽기만 하는 값(자주 변하지 않음)에 사용하기 좋음단점context 전체를 통째로..

커스텀 훅을 활용한 로직 분리 커스텀 훅(Custom Hook)반복되는 로직을 React의 내장 훅을 활용하여 재사용 가능한 형태로 분리한 사용자 정의 훅 예를 들어, 같은 input 로직이 두 컴포넌트에 있다고 가정해보자. EmailInput (Before)import { useState } from "react";function EmailInput() { const [email, setEmail] = useState(""); const handleChange = (e: React.ChangeEvent) => { setEmail(e.target.value); }; return ( );}export default EmailInput; NicknameInput (Before)import {..

1. SRP(Single Responsibility Principle)SRP(Single Responsibility Principle) 는SOLID 원칙 중 첫 번째 원칙으로, 하나의 클래스는 하나의 책임만 가져야 한다 는 원칙이다.보다 정확하게 말하면, 클래스를 변경해야 하는 이유는 단 하나뿐이어야 한다.즉, 하나의 클래스가 여러 역할을 동시에 수행하면 안 된다는 의미다. 클린 코드(Clean Code) 저서에서는 이렇게 말한다.클래스나 모듈을 변경할 이유가 하나, 단 하나뿐이어야 한다. 여기서 중요한 점은 기능의 개수가 아닌 변경 이유(Change Reason)이다.예를 들어,비즈니스 로직이 변경될 때DB 구조가 변경될 때출력 포맷이 변경될 때서로 다른 이유로 클래스가 수정된다면 그 클래스는 여러 책..