atomicdev 님의 블로그

React 프로젝트 상태 관리React 프로젝트에서 상태 관리는 애플리케이션의 성능, 유지 보수성, 개발 효율성을 결정짓는 중요한 요소입니다. 여러 상태 관리 라이브러리가 있지만, 그 중에서 Redux, Zustand, Jotai, Recoil이 가장 많이 사용됩니다. 이 블로그 글에서는 각각의 상태 관리 라이브러리의 개념과 장단점을 비교하고, React 프로젝트에서 올바른 선택을 할 수 있도록 도움을 드리겠습니다.1. ReduxRedux란?Redux는 전역 상태 관리 도구로, 애플리케이션 상태를 한 곳에서 관리하고, 상태 변화가 예측 가능하도록 도와줍니다. 상태를 변화시키는 함수는 **액션(action)**과 **리듀서(reducer)**를 통해 이루어지며, 이를 통해 상태를 일관되게 관리할 수 있습니..

R2디자이너는 데이터를 시각화하고 복잡한 보고서를 손쉽게 작성할 수 있도록 돕는 리포트 디자인 도구입니다. 이 도구는 다양한 데이터 소스와 연동할 수 있어, 실무에서 자주 사용하는 데이터 분석 리포트, 영업 보고서, 재무 보고서 등의 문서를 빠르고 효율적으로 작성할 수 있습니다.R2디자이너의 강력한 기능 중 하나는 사용자 친화적인 인터페이스로, 코딩 지식이 없어도 누구나 시각적 요소를 활용해 리포트를 디자인할 수 있습니다. 차트, 표, 이미지, 텍스트 박스 등의 다양한 컴포넌트를 드래그 앤 드롭 방식으로 추가할 수 있으며, 이를 통해 복잡한 데이터를 시각적으로 깔끔하게 표현할 수 있습니다.또한 PDF, Excel, HTML 등 다양한 형식으로 리포트를 내보낼 수 있어, 실무에서 다양한 용도로 활용 가능합..

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

환경 변수 변경 사항을 바로 적용하는 방법Windows 환경에서 시스템 환경 변수를 수정할 때, 해당 변경 사항을 즉시 적용해야 할 때가 있습니다. 기본적으로 시스템 환경 변수를 수정한 후에는 변경 사항이 새로 열린 프로그램에서만 적용됩니다. 하지만 기존에 열려 있던 터미널이나 애플리케이션에서 즉시 적용되도록 하는 방법은 몇 가지가 있습니다.이 글에서는 환경 변수 변경 사항을 즉시 적용하는 방법을 설명합니다.1. 환경 변수란?환경 변수는 운영 체제나 프로그램이 실행되는 데 필요한 다양한 정보를 저장하는 변수입니다. 프로그램의 실행 경로나 필요한 설정 값을 시스템 레벨에서 관리할 수 있습니다.일반적으로 환경 변수는 시스템 설정을 변경하거나, 개발 환경을 설정할 때 사용되며, 예를 들어 자바나 파이썬 같은 ..

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

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

1강: 리얼그리드 설치 및 환경 설정개요:이 강의에서는 리얼그리드를 리액트 프로젝트에 연동하는 방법을 배웁니다. 리액트 프로젝트를 생성하고, 리얼그리드 패키지를 설치한 후 기본 환경 설정을 완료하여 리얼그리드를 사용할 준비를 마칩니다.1. 리액트 프로젝트 생성먼저 리액트 프로젝트를 생성해야 합니다. 다음 명령어로 새로운 리액트 프로젝트를 생성할 수 있습니다.npx create-react-app realgrid-democd realgrid-demo create-react-app 명령어를 사용하여 프로젝트를 초기화한 후 프로젝트 디렉토리로 이동합니다.2. realgrid-react 패키지 설치리얼그리드 패키지를 프로젝트에 추가합니다. npm 또는 yarn을 사용하여 패키지를 설치할 수 있습니다.npm ins..

리얼그리드를 리액트에서 사용하는 튜토리얼을 기반으로, 실제 설치 및 활용 가이드 입니다.1강: 리얼그리드 설치 및 환경 설정개요: 리얼그리드와 리액트를 연동하는 방법을 배웁니다. 리액트 프로젝트에 리얼그리드 패키지를 설치하고 기본 환경을 설정하는 과정을 다룹니다.리액트 프로젝트 생성realgrid-react 패키지 설치기본 프로젝트 구조 및 환경 설정실습: 리액트 프로젝트에 리얼그리드 패키지 적용하기2강: 리얼그리드 기본 구성 및 라이선스 설정개요: 리얼그리드의 기본 구성 요소와 라이선스를 설정하는 방법을 학습합니다. 그리드 생성 후 기본적인 UI와 데이터를 시각화하는 예제를 다룹니다.라이선스 발급 및 적용 방법그리드 컴포넌트 생성실습: 간단한 그리드 생성 및 데이터 시각화3강: 그리드 컬럼 생성 및 데..

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