atomicdev 님의 블로그

환경 변수 변경 사항을 바로 적용하는 방법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) 기능: 모듈 및 컴포넌트를 모킹하여 테스트 대상을..

모든 브라우저에서 구글, 넷플릭스 자동 로그아웃 하는 방법요즘은 다양한 기기에서 구글(Google)과 넷플릭스(Netflix)를 자주 사용하게 됩니다. 하지만 때로는 공용 컴퓨터나 다른 기기에서 로그아웃을 하지 않거나, 나도 모르게 자동 로그인이 설정되어 있어 보안에 문제가 될 수 있습니다. 이 글에서는 모든 브라우저에서 구글과 넷플릭스 계정을 자동 로그아웃하는 방법을 단계별로 설명하겠습니다.1. 구글 계정에서 모든 기기 자동 로그아웃하기구글 계정은 다양한 서비스(이메일, 유튜브, 드라이브 등)에서 사용되기 때문에, 보안을 위해 계정에서 완전히 로그아웃하는 방법을 알아두는 것이 중요합니다.1.1 구글 계정에서 로그아웃하는 방법구글 계정 관리 페이지로 이동먼저, 구글 계정 관리 페이지로 이동합니다.로그인 ..

VS Code에서 GitLab 및 GitHub 프로젝트 연결하고 개발 환경 셋업하는 방법VS Code(Visual Studio Code)는 가볍고 강력한 코드 편집기로, GitLab이나 GitHub와 같은 코드 저장소를 쉽게 연결해 사용할 수 있습니다. 이를 통해 협업 프로젝트에 참여하거나 개인 프로젝트를 원활하게 관리할 수 있습니다. 이번 글에서는 VS Code에서 GitLab 및 GitHub 프로젝트를 연결하고 개발 환경을 셋업하는 방법을 단계별로 자세히 설명해 드리겠습니다.1. VS Code 설치 및 Git 통합 확인먼저, VS Code가 설치되어 있어야 하며, Git이 로컬 컴퓨터에 설치되어 있어야 합니다. Git은 코드 버전 관리를 위한 필수 도구이므로, 프로젝트를 GitLab이나 GitHub와..

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