매드업

RSS

게시글: 33
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
MSW - 더 나이스한 목킹을 위한 고민
이 글은 웹 개발 시 발생하는 백엔드와 프론트엔드 개발 속도 차이 및 API 응답 데이터 의존 로직 테스트의 어려움이라는 두 가지 주요 문제점을 다룹니다. 이러한 문제들은 개발 집중을 방해하고 불필요한 작업을 초래합니다. 글에서는 이러한 문제의 원인을 분석하고, 특히 Mock Service Worker(MSW)를 활용하여 브라우저 및 Node.js 환경에서 효과적인 목업(Mockup) 코드 작성 및 활용 방법을 제시합니다. 이를 통해 개발 생산성을 높이고 테스트 코드 작성의 용이성을 확보하는 방안을 모색합니다.
MSWMockingAPI
매드업·2023년 6월 11일
Frontend
TypeScript 쓰면서 OpenAPI Generator 는 안 쓴다고?
이 글은 TypeScript를 사용하면서 발생하는 RESTful API 타입 정의의 어려움을 해결하기 위한 방안으로 OpenAPI Generator를 소개합니다. 프론트엔드 개발에서 API 오사용으로 인한 런타임 오류는 개발자들에게 큰 골칫거리였으며, TypeScript를 통해 이를 완화할 수 있었지만 API 스펙 변경이 잦아지면서 타입 정의의 번거로움과 비효율성이 증가했습니다. GraphQL이 이러한 문제에 대한 대안으로 제시되었지만, 이 글에서는 OpenAPI Generator를 사용하여 API 스펙으로부터 자동으로 TypeScript 타입을 생성하는 방법을 강조합니다. 이를 통해 개발자는 API 인터페이스 변경에 효율적으로 대응하고 개발 생산성을 향상시킬 수 있습니다.
TypeScriptOpenAPI GeneratorAPI
매드업·2022년 4월 7일
Frontend
프론트엔드 테스트 팁
이 글은 프론트엔드 개발자를 대상으로 다양한 테스트의 종류와 필요성을 설명하고, 특히 React 컴포넌트의 유닛 테스트 및 통합 테스트에 대한 실질적인 팁을 제공합니다. 저자는 테스트를 저그 유닛에 비유하며, 유닛 테스트, 통합 테스트, E2E 테스트의 개념을 소개하고 각 테스트의 중요성을 강조합니다. 또한, React Hook과 SWR Hook을 사용하는 컴포넌트 테스트 시 발생할 수 있는 문제점과 해결 방안, 타이머 처리 방법 등을 구체적인 코드 예시와 함께 설명합니다. 마지막으로 완벽한 테스트를 위한 경험과 후기를 공유하며 글을 마무리합니다.
프론트엔드 테스트유닛 테스트통합 테스트
매드업·2022년 2월 24일
Frontend
React Query vs SWR
이 글은 React 애플리케이션에서 서버 상태 관리를 위한 두 가지 인기 있는 라이브러리인 React Query와 SWR을 비교합니다. 기존의 Redux, MobX와 같은 클라이언트 상태 관리 라이브러리가 서버 상태와 동기화되지 않는 불편함을 해소하기 위해 등장한 React Query와 SWR은 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 과정을 간소화합니다. SWR은 캐시에서 데이터를 먼저 반환하고 최신 데이터를 가져오는 전략을 사용하며, React Query는 서버 상태 관리를 더 쉽게 해주는 것을 목표로 합니다. 글에서는 두 라이브러리의 npm 다운로드 수 추이를 비교하고 기본적인 사용법을 예시 코드를 통해 설명하며, 두 라이브러리의 차이점을 탐구합니다.
React QuerySWR상태 관리
매드업·2021년 12월 29일
Frontend
Redux를 넘어 SWR로(2)
이 글은 이전 글에서 언급된 Redux의 문제점을 바탕으로, SWR이 어떻게 Redux를 대체할 수 있는지 설명합니다. SWR은 Vercel에서 개발한 원격 데이터 페칭을 위한 커스텀 훅으로, URL을 key로, 데이터 페칭 함수를 인자로 받아 컴포넌트에 원격 상태를 쉽게 연결해 줍니다. 특히, SWR은 한 번 페칭한 데이터를 내부적으로 캐시하여 여러 컴포넌트에서 동일한 상태를 공유할 수 있게 해주는 강력한 기능을 제공합니다. 이는 기존 상태 관리 라이브러리의 역할을 대체할 수 있는 가능성을 보여주며, 프론트엔드 개발에서 반복적으로 발생하는 원격 서버 상태 관리 및 UI 표현 작업을 SWR을 통해 효율적으로 처리할 수 있음을 시사합니다.
SWRReactCustom Hook
매드업·2021년 1월 18일
Frontend
Redux를 넘어 SWR로(1)
이 글은 React 프로젝트에서 Redux를 사용하다가 SWR로 전환하게 된 경험을 공유합니다. Redux의 복잡하고 많은 코드량에 대한 불편함을 지적하며, SWR이 어떻게 이러한 문제를 해결하는지 비교 분석합니다. 특히 로컬 상태와 원격 서버 데이터를 동기화하는 과정에서의 번거로움을 SWR이 간소화하는 점을 강조합니다. Redux, MobX, Recoil 등 다양한 상태 관리 라이브러리 사이에서 고민하는 개발자나 비동기 처리 방식에 대한 개선을 원하는 개발자에게 SWR 도입의 장점을 설명하며, Redux 의존성을 제거하기까지의 과정을 상세히 다룹니다.
ReduxSWR상태 관리
매드업·2020년 12월 18일
Frontend
TYPESCRIPT의 단점
이 글은 Typescript 사용 경험이 1달 미만인 작성자가 Typescript의 숨겨진 단점과 각오해야 할 점을 공유하는 내용입니다. 특히 혼자 개발하는 상황에서 Typescript의 타입 정의가 오히려 타자 수만 늘려 개발 속도를 저하시킬 수 있다는 점과, 자바스크립트의 유연성을 해치는 'Any' 타입의 남용 가능성을 주요 단점으로 지적합니다. 또한, React 환경에서 객체지향 프로그래밍의 필요성에 대한 의문을 제기하며, Typescript 도입 시 기대치를 낮추고 단점을 인지해야 실망을 줄일 수 있다고 조언합니다. 다만, 글쓴이는 Typescript 도입 자체에는 여전히 찬성하는 입장임을 명확히 합니다.
TypeScriptJavascript타입스크립트 단점
매드업·2020년 5월 25일
Frontend
리액트와 아토믹 디자인 패턴
이 글은 React 프로젝트에 아토믹 디자인 패턴을 적용한 내부 사례를 소개합니다. 아토믹 디자인은 디자인 요소를 원자(Atom), 분자(Molecule), 유기체(Organism), 템플릿(Template), 페이지(Page)로 나누어 구성하는 패턴으로, 특히 컴포넌트 재사용성이 중요한 React 프레임워크와 잘 맞아떨어집니다. 이 패턴을 통해 중복 코드를 줄이고, 회사 고유의 디자인 요소를 담은 재사용 가능한 컴포넌트를 개발하여 전사 프로젝트에 효율적으로 적용할 수 있습니다. 실제 적용 후기에서는 atom 단계만 잘 구축하면 이후 작업이 순조롭고, 페이지별 스타일링이나 className 관리에 대한 부담이 줄어드는 장점을 경험했다고 언급합니다.
ReactAtomic DesignUI 컴포넌트
매드업·2020년 4월 15일