Tip
-
스키마 유효성 검사 라이브러리 비교(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..
-
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 형식으로 ..
-
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..
-
모노레포(Monorepo) 소개 (feat. 터보레포(Turborepo))Tip 2024. 10. 7. 17:00
최근 소프트웨어 개발 환경에서는 모노레포(Monorepo)를 채택하는 팀이 늘어나고 있습니다.모노레포는 여러 프로젝트나 패키지를 하나의 저장소(repository)에 담는 방식을 의미합니다.모노레포의 장점코드 재사용성 증가공통된 코드나 라이브러리를 여러 프로젝트에서 쉽게 공유할 수 있어, 중복 코드를 줄이고 유지보수가 용이합니다.일관된 개발 환경모든 팀원이 동일한 저장소와 설정을 사용하여 의존성 버전이나 코드 스타일의 일관성을 유지할 수 있어 버그 발생을 줄이고 개발 효율성을 높입니다.변경 사항 추적 용이하나의 저장소에서 모든 변경 사항을 관리하므로 전체 시스템에 어떤 영향을 미치는지 쉽게 파악할 수 있으며, 디버깅과 코드 리뷰가 수월해집니다.협업 향상팀원들이 동일한 코드베이스에서 작업하므로 협업이 원활..