전체 글
-
스키마 유효성 검사 라이브러리 비교(feat. Zod vs Yup vs Joi)Tip 2025. 1. 5. 18:38
클라이언트와 서버 간 데이터 교환이 빈번해지면서, 데이터의 일관성과 정확성을 보장하는 것이 중요한 과제가 되었습니다.이는 단순히 버그를 줄이는 것을 넘어, 개발 생산성과 시스템의 안정성에 직접적인 영향을 미치는 문제입니다.오늘은 기존에 자주 사용했던 Yup과 Joi 그리고 최근에 자주 사용되는 Zod에 대해 소개해 보겠습니다.1. 왜 스키마 유효성 검사가 필요한가?1.1 데이터 무결성과 유지보수서비스를 운영한다면 기능이 늘어나고 서비스 구조가 복잡해지기 쉽습니다.API 요청, 응답, DB 저장 구조가 점점 복잡해지면, 예상치 못한 형태의 데이터가 들어와 서비스 전체가 흔들릴 수 있습니다.스키마 유효성 검사를 통해 입력 데이터의 무결성을 보장하면, 추후 에러가 발생해도 디버깅 지점이 뚜렷해지고 유지보수가 ..
-
C4 Model for Visualizing Frontend Architecture (Feat. FSD)Tip 2024. 12. 29. 18:34
1. C4 Model for Visualizing Frontend Architecture먼저, C4 모델은 소프트웨어 아키텍처를 네 가지 수준으로 시각화합니다. (Context, Container, Component, Code)이 접근법은 시스템을 직관적이고 명확하게 이해할 수 있도록 돕습니다.그러나 전통적인 C4 모델은 백엔드 중심의 시스템에 적합하며, 프런트엔드의 특수성을 담기엔 한계가 있습니다.Visualizing Frontend Architecture는 이러한 한계를 극복하기 위해 설계되었습니다.이 방법론은 프런트엔드의 도메인 특화된 요구사항과 기술 스택을 시각적으로 표현할 수 있게 합니다.크게 아래와 같이 구성될 수 있습니다. FE 앱을 Context(전체 시스템에서의 FE의 역할) → Cont..
-
Next.js App Router의 인터셉트 라우트(Intercept Route)와 병렬 라우트(Parallel Route) 알아보기Next.js 2024. 12. 15. 19:43
Next.js 13 이후 도입된 App 디렉터리 기반의 라우팅 시스템은 기존 pages 디렉터리 방식에 비해 유연하고 모듈화 된 라우팅 구성 방식을 제공합니다. 특히 app 디렉터리 내에서 Layout, Server Components, 그리고 클라이언트 컴포넌트 개념을 통한 세밀한 구조 관리가 가능해졌습니다.그중 인터셉트 라우트(Intercept Route)와 병렬 라우트(Parallel Route)는 기존에는 구현하기 까다롭던 UX 패턴을 손쉽게 구현할 수 있는 좋은 기능이었습니다.1. 인터셉트 라우트(Intercept Route) : 요청을 가로채는 새로운 방식인터셉트 라우트는 특정한 요청이 들어올 때 기존의 라우트 흐름을 가로채어(인터셉트) 원하는 UI나 플로우를 제공하는 기능입니다. 예를 들어,..
-
HTTP 클라이언트 라이브러리의 변화 Axios에서 Got, Ky로Tip 2024. 12. 8. 19:39
프런트엔드와 백엔드 개발 모두에서 HTTP 통신은 필수적이다.REST API 호출, 마이크로서비스 간 통신, 외부 서비스 연동 등 다양한 시나리오에서 단순한 HTTP 요청/응답을 넘어 훨씬 복잡해진 요구사항이 있다.많은 개발자들이 이제 막 웹 생태계에 입문할 때는 fetch나 Node.js의 기본 http 모듈로 시작한다.하지만 일정 수준 이상의 프로젝트 규모나 복잡도, 유지보수성을 요구하는 상황이 되면 fetch 단독 사용은 점차 비효율적으로 느껴지며, 보다 강력한 기능을 제공하는 HTTP 클라이언트 라이브러리로 옮겨가게 된다.이 글에서는 프런트엔드 생태계에서 흔히 사용되는 Axios, 그리고 최근 들어 각광받고 있는 Got(Node.js 환경)과 Ky(브라우저 환경)에 대해 살펴보고, 왜 단순한 fe..
-
실무에서 유용한 MSW(Mock Service Worker) 활용 가이드Tip 2024. 11. 30. 16:54
프런트엔드 개발을 하다 보면 백엔드 API가 완성되지 않은 상태에서 작업해야 하는 API 의존성 문제는 항상 개발 속도와 품질에 큰 영향을 미칩니다.이런 상황에서 모킹(Mocking)은 필수적이지만, 기존 방식에는 한계가 있습니다.오늘은 개발 생산성을 높여주는 MSW(Mock Service Worker)에 대해 깊이 있게 알아보겠습니다.1. 기존 모킹 방식의 한계1. 모듈 단위의 모킹Jest와 같은 테스트 프레임워크에서 jest.mock()을 사용하여 모듈을 모킹 하는 것이 일반적입니다.하지만 이 방법은 함수나 모듈 단위로만 모킹이 가능하며, 실제 네트워크 요청을 대체하지는 않습니다.2. 통합 테스트의 어려움엔드투엔드(E2E) 테스트나 통합 테스트에서는 실제 API 서버와의 연동이 필요합니다.하지만 백엔..
-
OpenAPI 3.0 스펙 완전 정복Tip 2024. 11. 24. 19:12
오픈 API 스펙은 현대 웹 개발에서 API를 정의하고 문서화하는 데 필수적인 도구가 되었습니다.특히 OpenAPI 3.0은 직관적이고 효율적인 API 디자인을 가능하게 해 줍니다. OpenAPI 3.0이 개발 생태계에 어떤 영향을 미치는지, 그리고 실제 서비스에서 어떻게 활용할 수 있는지 심도 있게 다뤄보려 합니다.1. OpenAPI란 무엇인가?OpenAPI는 RESTful API의 명세를 작성하기 위한 언어 중 하나로, 이전의 Swagger 스펙을 기반으로 발전하였습니다.API의 구조, 요청과 응답 형식, 인증 방법 등을 정의합니다.이는 API 소비자와 생산자 간의 명확한 계약을 제공하여, 개발 효율성과 유지보수성을 높여줍니다.1.1 주요 특징언어 및 플랫폼 독립적: JSON 또는 YAML 형식으로 ..
-
React Portal에 대해 알아보기 (Feat. Next.js 예시)React 2024. 11. 16. 15:57
React를 사용하다 보면 컴포넌트 트리 구조 내에서 DOM 구조와 시각적인 표현이 일치하지 않는 상황을 마주할 때가 있습니다.이런 경우에 React Portal은 강력한 도구로 활용될 수 있습니다.이번 글에서는 React Portal의 작동 원리부터 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.1. React Portal이란 무엇인가?React Portal은 React 16부터 도입된 기능으로, 현재의 컴포넌트 계층 구조 밖의 DOM 노드로 자식을 렌더링 할 수 있게 해 줍니다.일반적으로 React 컴포넌트는 부모 컴포넌트의 DOM 노드 내에 렌더링 되지만, Portal을 사용하면 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있으면서, 그리하여 논리적으로는 기존의 컴포넌트 트리 구조를 유지할 ..
-
React Floating Button 만들기 (with Intersection Observer)React 2024. 11. 9. 21:13
플로팅 버튼(Floation Button)은 사용자 경험을 높이기 위해 자주 사용되는 요소 중 하나입니다.Intersection Observer를 활용해 Footer 영역에서 멈추는 플로팅 버튼을 구현해 보겠습니다.1. 인피니티 스크롤 구현인피니티 스크롤은 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠를 불러오는 기능입니다.간단한 예제로 구현해 보겠습니다.// App.jsimport React, { useState, useEffect } from 'react';function App() { const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => i)); const loadMore = () => { setItems((prevI..