TDD로 배우는 웹 FE (1) Intro

2023. 3. 3.·🎨 프론트엔드 공부/기타

📍TDD란?

- Test Driven Development (TDD) : 테스트 주도 개발

- 켄트 백의 저서에서 처음 등장한 개념

- 테스트를 먼저 만들고, 테스트를 통과하기 위한 코드를 짜는 개발 방법

⭐원하는 대로 동작하는지 빠르게 피드백을 받는 것 (더 자주, 더 빨리 피드백 받기)

- 최소 기능이 동작하는 것을 확인하면 리팩토링

 

📍계산기 앱을 TDD로 구현하기

✅필수 구현 기능

- 사칙연산

- 2개의 숫자를 다루는 계산기

 

✅개발 과정

1. UI없이 사칙연산되는 프로그램만 만들기

- 일단 console.log 가 포함된 코드 작성

 

 

- 그 다음, 내부 로직을 완성(클래스를 구현하는 등)

 

2. input으로 사용자 입력 받고 이벤트 처리하기

 

3. 숫자 UI 추가하고 이벤트 처리하기

 

4. UI 레이아웃 잡기

 

5. 스타일링

 

 

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • [원티드 FE 프리온보딩] 7-1. 소프트웨어 테스트
  • TDD로 배우는 웹 FE (2) Cypress
  • RTKQ - tags, providesTags, invalidatesTags
  • getState 메서드
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (510)
      • 🎨 프론트엔드 공부 (247)
        • JS & TS (86)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
TDD로 배우는 웹 FE (1) Intro
상단으로

티스토리툴바