[3/9까지 50% 할인] 프론트엔드 TDD 완전정복

🤔 이런 고민, 해본 적 있나요?

"이직 면접에서 프론트엔드 테스트를 어떻게 하냐고 질문받았는데 대답을 못했어요." - 1년차 김OO

"서비스 운영 중에 잦은 수정으로 생기는 이슈에 불안해요."- 2년차 박OO

"테스트의 필요성을 느껴서 도입했지만, 팀에서 지나친 생산성 저하를 느껴서 방치하다가 결국 다 제거했어요." - 3년차 이OO

그래서 준비했습니다.👊 프론트엔드 TDD 완전정복 강의 👊

🎯 이 강의에서 배우는 것

1. 최신 테스팅 툴 - Playwright, Vitest, MSW의 활용법
1. 가장 강력한 e2e 테스팅 툴 - Playwright
2. ESM환경에 최적화된 테스팅 프레임워크 - Vitest
3. API 모킹을 테스트 코드와 분리할 수 있는 - MSW

2. 기획서에서 시작하는 테스트 주도 개발
1. 개발 전 간단하게 요구사항 분석 및 개발전략 수립
2. 개발 단위를 더 작게 나눌 수 있는 테스트 설계

3. 테스트용 데이터의 생성 및 관리
4. 생산성 높은 테스트 설계
5. 동적 데이터를 활용한 테스트 범위 확장

✨ 이 강의만의 차별점

1. 최신 테스팅툴 활용 - Playwright, Vitest, MSW로 구성된 현재 프론트엔드 테스트에서 가장 강력한 스택들을 다룹니다.
2. 실무와 가까운 예제 - 입문용 기초예제가 아닌 복잡한 도메인인 게시판 CRUD를, api가 제공되기 전에 개발합니다.
3. 테스팅 툴 강의가 아닌 TDD 강의 - 단순히 도구의 사용법을 가르치는 것이 아니라, 어떻게 활용해서 효과적으로 개발하는지 배웁니다.
4. 효율적인 테스트 설계 - 어떠한 테스트가 효율적인지 스스로 판단할 수 있는 명확한 이론을 제공합니다.

👨‍💻 강의 학습 대상

🐣 프론트엔드 테스트를 처음 접하는 1~3년 차 개발자

🤝 TDD를 실무에 도입하고 싶은 팀원 및 팀 리더

🛠 Playwright, Vitest, MSW를 제대로 익히고 싶은 개발자

🔄 기존에 테스트를 도입했지만 유지보수 어려움을 겪었던 분

📚 선수 지식

• react나 next에 대한 기본 사용 경험
• 테스트를 해본 적은 없어도 괜찮지만, "describe, test, expect" 같은 기본적인 테스트 문법을 들어본 적 있다면 더 쉽게 따라올 수 있습니다.

📌 강의 정보

🎥 강의 구성: 16섹션(59강) - 11시간 15분 36초

📚 강의 링크: 프론트엔드 TDD 완전정복

💬 카카오톡: Dulee.dev의 1:1 오픈프로필

📩 이메일: [email protected]

⚡ 4/6까지 25% 할인! - 119,000원 이후 가격 인상 예정 ⚡

💳 결제 주의 사항

• 구매하신 제품은 디지털 컨텐츠로 접근 권한을 받으신 경우 환불이 불가능합니다.
• 유료 컨텐츠 시청시 frontierclubs의 아이디가 필요합니다.
• 한번 구매하신 제품은 평생 시청 가능합니다.
• 접근 권한은 결제 후 24시간 이내로 부여됩니다. 연락처로 연락주시면 더 빠르게 확인 가능합니다.

📖 강의 목차

1. 강의 소개 [무료 공개]
2. 세팅 및 환경 구성 [무료 공개]
3. MSW 세팅 및 기초 [무료 공개]
4. UI 개발
1. UI 개발 사전준비 [무료 공개]
2. Header UI [무료 공개]
3. 컨텐츠 상세페이지 메인 UI
4. 컨텐츠 상세페이지 UI 마무리
5. 컨텐츠 리스트 UI
6. 컨텐츠 생성과 수정 UI
5. Header 개발
1. 테스트용 데이터 생성
2. Header 컴포넌트 개발
3. Playwright POM 활용
4. MSW를 활용한 API 모킹
5. 정리 및 회고
6. 컨텐츠 상세페이지 개발
1. Header 리팩토링
2. 컨텐츠 상세페이지 개발
7. 컨텐츠 리스트 페이지 개발
1. 컨텐츠 리스트 페이지 개발 [무료 공개]
2. 컨텐츠 리스트 pagination 테스트 작성 [무료 공개]
3. countAll API 모킹
4. pagination 마무리
5. 테스트 수정
6. content-items의 pagination 개발
7. content-items의 sort 개발(1)
8. content-items의 sort 개발(2)
9. content-items의 search 개발
10. content-items 학습 회고
8. 컨텐츠 생성 페이지 개발
1. create content page 기획서 작성
2. create content page 입력 바인딩
3. create content page 유효성 확인
4. 공용 로그인 가드 개발
5. create content page 썸네일 업로드 테스트
6. 컨텐츠 생성 폼 유효성 테스트
7. 컨텐츠 생성 테스트 작성
8. 컨텐츠 생성 API 개발
9. vitest custom matcher
10. create content page 마무리
11. cretae content page 학습 회고
9. 동적 데이터 활용 및 컨텐츠 수정 페이지 개발
1. msw에 동적 데이터 추가
2. 동적 데이터 리셋 버튼 추가
3. vitest 테스트 변경
4. contentCreated fixture 삭제
5. playwright 테스트 변경
6. content edit page 기획서 작성
7. content edit page guard 개발
8. content edit page header 개발
9. content edit page 초기 상태 개발
10. content edit page 양식 유효성 개발
11. content edit page 컨텐츠 수정 개발
12. content edit page 학습 회고
10. 컨텐츠 삭제 기능 개발
1. 컨텐츠 삭제를 위한 컨텐츠 상세페이지 수정
2. 컨텐츠 삭제 기획서 및 테스트 코드 작성
3. 컨텐츠 삭제 개발
11. 모킹을 통한 컨텐츠 CRUD 마무리
12. 실제 서버 환경과 호환
1. 실제 서버에 호환 가능하게 vitest 변경
2. 실제 서버에 호환 가능하게 nextjs 및 playwright 변경
13. 컨텐츠 CRUD 전체 학습 회고
14. 테스트 이론
15. TDD 강의 제작 후기
16. TDD 강의 오류 수정