강의 1(React TDD): TDD 소개 및 개발 환경 설정

TDD 소개 및 개발 환경 설정

개요:
이번 강의에서는 테스트 주도 개발(TDD)에 대해 소개하고, Windows 10에서 개발 환경을 설정하는 방법을 실습합니다. Visual Studio Code(VS Code), Node.js, NPM, Git을 설치하고, 이후 Jest를 활용한 테스트 자동화를 위한 기초 설정을 다룹니다.

---

1. TDD란 무엇인가?

• **TDD(테스트 주도 개발)**란?
  • Red-Green-Refactor 사이클을 중심으로 동작하는 개발 방법론.
  • 실패하는 테스트 작성(Red) → 테스트를 통과하도록 코드 작성(Green) → 코드 개선(Refactor).
  • 코드 품질을 높이고, 버그를 사전에 예방하는 데 유용.
• 왜 TDD를 사용하는가?
  • 코드 안정성 향상.
  • 빠른 피드백 루프 제공.
  • 리팩토링 시 기존 기능을 유지하면서 수정 가능.

---

2. Windows 10에서 개발 환경 설정

2.1. VS Code 설치

• **Visual Studio Code(VS Code)**는 매우 인기 있는 무료 소스 코드 편집기입니다.
• VS Code 공식 웹사이트에서 Windows용 설치 파일을 다운로드하고 설치합니다.

1. 설치 후 기본 확장 설치:
   • ESLint: 코드 스타일을 일관되게 유지하는 도구.
   • Prettier: 코드 자동 포맷팅 도구.
   • Jest: Jest를 지원하는 테스트 도구.
   VS Code 좌측의 확장 아이콘을 클릭하고 ESLint, Prettier, Jest를 설치합니다.

---

2.2. Node.js 및 NPM 설치

• Node.js는 서버 사이드 자바스크립트 환경이며, NPM(Node Package Manager)은 JavaScript 패키지 관리 도구입니다.
• Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치합니다.

1. 설치 후 확인

   node -v
   npm -v

    
   위 명령어를 실행하여 설치가 제대로 완료되었는지 버전을 확인합니다.

 

---

2.3. Git 설치 및 설정

• Git은 버전 관리 시스템으로, 코드의 변경 이력을 관리할 수 있습니다.
• Git 공식 웹사이트에서 설치 파일을 다운로드하여 설치합니다.

1. 설치 후 확인:위 명령어로 설치가 완료되었는지 확인합니다.

   git --version

    
2. 기본 설정:

   git config --global user.name "Your Name"
   git config --global user.email "youremail@example.com"

---

3. Jest와 Jenkins 개요

3.1. Jest 개요

• Jest는 JavaScript 코드의 단위 테스트를 쉽게 작성할 수 있는 테스트 프레임워크입니다.
• 특징:
  • 간단한 설정으로 빠른 테스트 실행.
  • 스냅샷 테스트 지원.
  • 모킹(Mock) 기능 제공.

3.2. Jenkins 개요

• Jenkins는 지속적 통합 및 지속적 배포(CI/CD)를 지원하는 오픈 소스 자동화 서버입니다.
• 특징:
  • 여러 플러그인 지원.
  • 자동으로 코드를 테스트하고 빌드, 배포까지 가능.
  • GitHub, GitLab 등과 통합 가능.

---

4. 실습: 기본 환경 설정

4.1. 프로젝트 폴더 생성

1. VS Code에서 새로운 프로젝트 폴더를 생성합니다.

   mkdir tdd-project
   cd tdd-project

    
2. NPM 초기화:

   npm init -y

    
3. Jest 설치:

   npm install --save-dev jest

    
4. package.json 파일 설정:

   {
     "scripts": {
       "test": "jest"
     }
   }

---

5. 첫 번째 테스트 작성

1. sum.js 파일 생성:

   function sum(a, b) {
     return a + b;
   }
   module.exports = sum;

    
2. sum.test.js 파일 생성:

   const sum = require('./sum');
   
   test('1 + 2는 3이어야 한다', () => {
     expect(sum(1, 2)).toBe(3);
   });

3. VS Code에서 테스트 실행:

   npm test

4. 테스트 결과:
   • 성공적인 테스트 결과가 출력되면 기본적인 Jest 설정이 완료된 것입니다.

---

6. 정리

• 이 강의를 통해 TDD 기본 개념을 이해하고, Windows 10에서 VS Code, Node.js, NPM, Git을 설치하고 설정하는 방법을 실습했습니다.
• 다음 강의에서는 React 프로젝트에서 TDD를 적용하여 컴포넌트 테스트를 실습할 예정입니다.