전체 글
-
실무에서 유용한 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..
-
pnpm으로 갈아타기Tip 2024. 10. 25. 15:35
프론트엔드 개발을 하다 보면 다양한 패키지 매니저를 접하게 되는데, npm, Yarn 외에도 요즘 각광받고 있는 또 다른 선택지가 있습니다. "Performant npm"의 약자인 pnpm은 설치 속도와 디스크 공간 활용 면에서 탁월한 성능을 자랑합니다.pnpm의 장점1. 빠른 설치 속도pnpm은 패키지를 중앙 캐시에서 관리하고, 하드 링크를 통해 설치하기 때문에 일반적인 npm이나 Yarn보다 훨씬 빠릅니다.하드 링크 : 파일 시스템에서 동일한 파일을 여러 경로에서 접근할 수 있게 해주는 방식으로, 실제 파일은 하나만 저장되며 여러 위치에서 공유됩니다. 이를 통해 중복 저장을 피하고 디스크 공간을 절약하면서도 빠르게 설치가 가능합니다.2. 디스크 사용 효율성동일한 패키지를 여러 프로젝트에서 사용할 때,..
-
Yarn Berry로 갈아타기Tip 2024. 10. 22. 14:51
프론트엔드 개발자라면 패키지 매니저 선택에 대해 고민해 본 적이 있을 것입니다.이 글에서는 Yarn Berry가 무엇인지, 그리고 주요 특징과 장단점을 살펴보겠습니다.Yarn Berry란?Yarn Berry는 2020년 1월에 출시된 Yarn의 최신 버전으로, Yarn 2.x 이후의 릴리스를 의미합니다.'Berry'라는 별칭을 사용하는데, 이는 Yarn의 대대적인 개선과 혁신을 상징합니다.Yarn 클래식(1.x)과는 상당히 다른 접근 방식을 취하며 새로운 사용자 경험을 제공합니다.특히 Yarn Berry는 Zero-Install, Plug'n'Play(이하 PnP), 향상된 성능 등을 강조하며 많은 주목을 받고 있습니다.Yarn Berry의 주요 특징1. Plug'n'Play(PnP) 지원Yarn Ber..
-
TypeScript 유틸리티 타입 소개JS & TS 2024. 10. 11. 14:38
TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..
-
모노레포(Monorepo) 소개 (feat. 터보레포(Turborepo))Tip 2024. 10. 7. 17:00
최근 소프트웨어 개발 환경에서는 모노레포(Monorepo)를 채택하는 팀이 늘어나고 있습니다.모노레포는 여러 프로젝트나 패키지를 하나의 저장소(repository)에 담는 방식을 의미합니다.모노레포의 장점코드 재사용성 증가공통된 코드나 라이브러리를 여러 프로젝트에서 쉽게 공유할 수 있어, 중복 코드를 줄이고 유지보수가 용이합니다.일관된 개발 환경모든 팀원이 동일한 저장소와 설정을 사용하여 의존성 버전이나 코드 스타일의 일관성을 유지할 수 있어 버그 발생을 줄이고 개발 효율성을 높입니다.변경 사항 추적 용이하나의 저장소에서 모든 변경 사항을 관리하므로 전체 시스템에 어떤 영향을 미치는지 쉽게 파악할 수 있으며, 디버깅과 코드 리뷰가 수월해집니다.협업 향상팀원들이 동일한 코드베이스에서 작업하므로 협업이 원활..