atomicdev 님의 블로그

Storybook 사용하는 방법개요:Storybook은 React 컴포넌트 개발을 위한 독립적인 개발 환경을 제공하는 도구입니다. UI 컴포넌트를 다양한 상태에서 테스트하고, 문서화하며, 개발과 디자인 협업을 효율적으로 진행할 수 있게 해줍니다. 이번 블로그에서는 Storybook을 React 프로젝트에 설정하고 사용하는 방법을 실습과 함께 설명합니다.1. Storybook이란?Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 오픈 소스 도구입니다.주요 기능:컴포넌트 개발 속도 향상.다양한 상태에서 UI 컴포넌트 테스트.디자인과 개발 간의 효율적인 협업.UI 컴포넌트를 문서화.2. Storybook 설치 및 설정2.1. React 프로젝트에 Storybook 설치Storybook을..

TDD 소개 및 개발 환경 설정개요:이번 강의에서는 테스트 주도 개발(TDD)에 대해 소개하고, Windows 10에서 개발 환경을 설정하는 방법을 실습합니다. Visual Studio Code(VS Code), Node.js, NPM, Git을 설치하고, 이후 Jest를 활용한 테스트 자동화를 위한 기초 설정을 다룹니다.1. TDD란 무엇인가?**TDD(테스트 주도 개발)**란?Red-Green-Refactor 사이클을 중심으로 동작하는 개발 방법론.실패하는 테스트 작성(Red) → 테스트를 통과하도록 코드 작성(Green) → 코드 개선(Refactor).코드 품질을 높이고, 버그를 사전에 예방하는 데 유용.왜 TDD를 사용하는가?코드 안정성 향상.빠른 피드백 루프 제공.리팩토링 시 기존 기능을 유지..

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..

React 기반 프론트엔드 개발에서 테일러링 가능한 검증된 개발 방법론React를 기반으로 한 프론트엔드 개발은 그 특성상 다양한 방법론을 적용할 수 있으며, 프로젝트에 맞게 조정(Tailoring)할 수 있는 여러 검증된 개발 방법론이 존재합니다. React는 컴포넌트 기반 아키텍처를 제공하기 때문에, UI 재사용성, 유지 보수성, 그리고 확장 가능성을 최적화하는 방법론을 잘 선택하는 것이 중요합니다.이번 글에서는 React 기반 프론트엔드 개발에서 사용할 수 있는 테일러링 가능한 검증된 개발 방법론을 소개합니다. 각 방법론은 특정한 상황에서 적합하며, 프로젝트의 특성에 따라 유연하게 조정할 수 있습니다.1. 컴포넌트 기반 개발(Component-Driven Development, CDD)**Compo..