atomicdev 님의 블로그

VS Code, Jest, Jenkins를 활용한 TDD 및 테스트 자동화 구축 프로젝트 개요:이 프로젝트에서는 간단한 계산기 애플리케이션을 TDD 방식으로 개발하고, 이를 Jest와 Jenkins를 사용해 자동화된 테스트 환경을 구축하는 것을 목표로 합니다. 사용자는 더하기, 빼기, 곱하기, 나누기 기능을 수행할 수 있으며, 모든 함수는 TDD로 개발됩니다. 이후 GitLab CI/CD 또는 Jenkins를 통해 테스트 자동화를 구현합니다. 강의 1: TDD 소개 및 개발 환경 설정개요:테스트 주도 개발(TDD)에 대한 소개Windows 10에서 개발 환경 설정VS Code 설치Node.js 및 NPM 설치 (Jest 실행을 위해)버전 관리를 위한 Git 설치Jest와 Jenkins에 대한 개요 (Je..

VS Code에서 React 프론트엔드 개발을 진행하면서 TDD(Test-Driven Development)를 적용하는 것은 충분히 가능합니다. TDD는 코드 작성을 시작하기 전에 테스트를 먼저 작성하고, 그 테스트가 통과할 수 있도록 코드를 작성하는 개발 방법론입니다. React 프로젝트에서 TDD를 적용하려면 여러 가지 도구와 테스트 프레임워크를 사용할 수 있습니다. 아래는 TDD를 적용하는 방법과 주요 도구에 대한 설명입니다.1. TDD 개발 흐름TDD 개발 흐름은 다음과 같습니다:테스트 작성: 테스트 케이스를 먼저 작성합니다. (테스트는 실패 상태로 시작합니다.)코드 작성: 테스트를 통과할 수 있는 최소한의 코드를 작성합니다.리팩토링: 코드를 개선하거나 성능을 최적화하면서 테스트를 지속적으로 통과..

리액트 개발 프로젝트에서 유닛 테스트 자동화 방법 비교리액트(React) 애플리케이션 개발에서 유닛 테스트는 개별 컴포넌트의 코드 품질과 안정성을 보장하는 데 중요한 역할을 합니다. 이 테스트를 자동화하면 개발 생산성을 높이고 실수를 줄일 수 있습니다. 리액트에서 흔히 사용되는 유닛 테스트 자동화 방법들을 비교하고, 각 방법의 장단점을 살펴보겠습니다.1. JestJest는 리액트 애플리케이션에서 가장 많이 사용되는 테스트 프레임워크입니다. 페이스북에서 개발한 이 도구는 리액트 컴포넌트를 위한 유닛 테스트를 지원합니다.특징:스냅샷 테스트: 컴포넌트의 렌더링된 출력을 캡처하고 이후 렌더링과 비교하여 의도치 않은 변경 사항을 감지할 수 있습니다.모킹(Mock) 기능: 모듈 및 컴포넌트를 모킹하여 테스트 대상을..

Feature-Sliced Design(FSD) 아키텍처와 Public API 관리Feature-Sliced Design(FSD)은 프론트엔드 애플리케이션의 기능 분할 설계를 위한 모듈화 및 구조화된 아키텍처 방식입니다. 이 아키텍처를 통해 코드의 가독성 및 유지보수성을 높일 수 있습니다. 이번 글에서는 FSD 아키텍처의 개념과 함께, 공통적으로 사용되는 Layer, Slices, Segments의 구성 방식과 Public API 관리 방식을 소개합니다.1. FSD 아키텍처의 구성 요소FSD는 Layers, Slices, 그리고 Segments로 구분되며, 각각의 목적에 맞게 애플리케이션을 구조화합니다.Layers(레이어)레이어는 애플리케이션의 최상위 디렉토리로, 기능의 큰 영역을 담당합니다. 예를 들어..

타임존과 날짜 처리 라이브러리 소개웹 개발에서 타임존(Timezone)과 날짜(Date) 처리는 글로벌 서비스 구현 시 매우 중요한 부분입니다. 각 나라의 시간대가 다르기 때문에 사용자에게 정확한 시간을 보여주기 위해서는 클라이언트와 서버에서 시간을 올바르게 처리하는 것이 필수적입니다. 이번 글에서는 타임존을 적용하는 방법과 날짜 처리를 위한 자바스크립트 라이브러리 사용법을 예제 중심으로 설명하겠습니다.  1. 타임존(Timezone) 개념타임존은 지구 상의 동일한 로컬 시간을 따르는 지역을 의미합니다. 국가별로 각기 다른 고유한 타임존을 사용하고 있으며, 예를 들어 미국과 한국은 다른 타임존을 가지고 있습니다. 국제 표준 시각인 UTC(Universal Time Coordinated)를 기준으로 특정 ..

클라이언트 상태 관리리액트에서 전역 상태 관리는 매우 중요합니다. 이를 효과적으로 관리하기 위한 다양한 방법들이 있는데, 그 중 많이 사용되는 방법이 Context API와 외부 라이브러리를 활용하는 것입니다. 대표적인 라이브러리로는 Redux, Zustand, Recoil 등이 있습니다. 이 글에서는 각각의 방법들을 비교하고, 상황에 맞는 선택 기준과 예제를 통해 어떻게 적용할 수 있는지 살펴보겠습니다.1. Context API와 Redux 비교Context API는 리액트 자체에서 제공하는 기능으로, props drilling 없이 컴포넌트 트리에서 데이터를 공유할 수 있는 방법입니다. 간단한 전역 상태 관리에는 유용하지만, 복잡한 상태를 다루기에는 아쉬운 점이 있을 수 있습니다.Context API..

React 프로젝트에서 재활용 및 공통화 전략React는 컴포넌트 기반 아키텍처로 재사용성이 높은 코드를 쉽게 작성할 수 있는 구조입니다. 특히, 대규모 프로젝트에서는 여러 부분에서 코드의 중복을 최소화하고 유지보수를 용이하게 하기 위해 코드의 재활용 및 공통화가 중요한 전략 중 하나입니다. 이번 블로그에서는 React 프로젝트에서 재활용할 수 있는 공통 요소들을 효율적으로 관리하고 구현하는 방법에 대해 설명하고, 몇 가지 구체적인 사례를 예시로 들어봅니다.1. 재활용 가능한 컴포넌트 설계 전략1-1. 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리React 컴포넌트를 두 가지 역할로 나누어 생각할 수 있습니다. 프레젠테이셔널 컴포넌트(Presentational Components)는 단순히 UI를 나타..

Zod와 React Hook Form을 사용한 유효성 검사Zod는 타입스크립트에서 유효성 검사를 위해 사용되는 스키마 선언 및 유효성 검사 라이브러리입니다. 이는 타입스크립트가 컴파일 과정에서 타입을 검증할 수는 있지만, 실제 프로그램이 실행될 때는 아무런 역할을 하지 않는 한계를 극복하기 위해 만들어졌습니다. 이를 통해 API로부터 들어오는 데이터를 검증하고, 예상하지 못한 데이터나 오류로부터 프로그램을 보호할 수 있습니다.Zod 기본 사용법먼저, z.object()로 스키마를 선언하고 각 필드의 타입과 규칙을 정의할 수 있습니다. 이렇게 정의된 스키마는 타입을 추론할 수 있고, 이 스키마로부터 생성된 데이터는 검증을 통해 유효한지 확인할 수 있습니다.import { z } from "zod";// 스..

입력 폼 React-Hook-Form 사용법React-Hook-Form은 비제어 컴포넌트를 활용하여 폼 입력을 쉽게 관리하고, 성능을 최적화하는 훅을 제공합니다. 실시간 유효성 검사 및 비동기 처리를 지원하여 폼 데이터를 손쉽게 처리할 수 있습니다.1. 비제어 컴포넌트란?비제어 컴포넌트는 사용자가 입력하는 값이 React의 상태에 의해 즉각적으로 제어되지 않는 컴포넌트입니다. 이는 브라우저의 기본 동작을 유지하면서도 폼 데이터를 관리할 수 있는 장점이 있으며, 제어 컴포넌트와 비교하여 더욱 간단하고 성능적인 이점을 제공합니다.2. React Hook Form의 기본 기능React Hook Form의 기본 훅인 useForm은 다양한 기능을 제공합니다. 주요 기능은 다음과 같습니다:register: 폼 필..

React에서 서버 상태 관리를 마스터하기 (React Query와 SWR 활용)서버 상태 관리는 현대의 React 애플리케이션에서 매우 중요한 역할을 하며, 데이터 페칭, 캐싱, 서버와 클라이언트 간 동기화를 원활하게 합니다. 이번 포스트에서는 서버 상태 관리를 효율적으로 처리하는 두 가지 인기 라이브러리인 React Query와 SWR을 소개하고, 이들이 제공하는 기능과 각각의 장단점을 비교해 보겠습니다.1. 서버 상태 관리 개요React에서 서버 상태를 관리한다는 것은 API를 통해 데이터를 가져오고, 이 데이터를 UI와 동기화하는 것을 의미합니다. 서버 상태 관리를 잘하면 성능을 최적화할 수 있고, 사용자 경험이 크게 향상됩니다. React Query와 SWR은 이러한 작업을 보다 쉽게 처리할 수..