- Видео 18
- Просмотров 197
두리
Добавлен 17 май 2022
실무에서의 웹개발을 다룹니다.
5-3강: select 테스트 자동화 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Next.js와 Playwright를 사용해 select의 테스트 자동화 방법을 배웁니다.
TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다.
해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
타임라인
00:00 학습내용
00:07 기획서 작성
01:48 UI 작업
07:05 테스트 작성
08:50 playwright 디비거로 단일 테스트 실행
09:35 playwright 디비거로 로케이터 얻기
11:50 기능개발
13:44 초보자가 많이하는 실수
15:27 Playwright 빠르게 잘하는 방법
17:39 seo를 고려한 더 나은 방식
#nextjs #playwright #tdd #vitest #e2e #testing #frontend
TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다.
해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
타임라인
00:00 학습내용
00:07 기획서 작성
01:48 UI 작업
07:05 테스트 작성
08:50 playwright 디비거로 단일 테스트 실행
09:35 playwright 디비거로 로케이터 얻기
11:50 기능개발
13:44 초보자가 많이하는 실수
15:27 Playwright 빠르게 잘하는 방법
17:39 seo를 고려한 더 나은 방식
#nextjs #playwright #tdd #vitest #e2e #testing #frontend
Просмотров: 1
Видео
5-2강: checkbox와 radio 테스트 자동화 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 22 часа назад
Next.js와 Playwright를 사용해 checkbox와 radio의 테스트 자동화 방법을 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 학습내용 00:10 기획서 작성 02:54 UI 작업 13:21 checkbox 테스트 작성 17:46 checkbox 기능 개발 19:32 radio 테스트 작성 22:40 radio 기능 개발 #nextjs #playwright #t...
Nextjs 기본앱 1분만에 테스트하기
Просмотров 52 часа назад
Nextjs기본앱을 Playwright을 통하여 테스트 자동화 해보았습니다. 이를통해서 TDD와 e2e 테스트의 유용함을 체감할 수있습니다. 타임라인 00:00 테스트 대상: 1. 랜딩페이지 타이틀 2. deploy now 버튼 액션 00:05 작성된 테스트 코드 00:14 랜딩페이지 타이틀 테스트 00:17 deploy now 버튼 액션 테스트 00:24 테스트의 필요성 00:47 잘못 개발된 경우 테스트 실패 00:55 수정후 테스트 성공 #nextjs #playwright #tdd #vitest #e2e #testing #frontend
5-1강: input text, div contentEditable 테스트 자동화 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 144 часа назад
input text와 contentEditable의 테스트 자동화 방법을 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 학습내용 00:09 기획서 작성 02:26 ui개발 16:40 playwright config 변경 및 기본 구조 정리 19:30 input-text-labeled 테스트 작성 24:38 input-text-labeled 개발 26:10 input-text-p...
4강: 카운터 버튼 테스트 자동화하기 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 189 часов назад
카운터 버튼의 테스트 자동화 방법을 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 학습내용 00:15 기획서 작성 02:06 UI 개발 09:26 테스트 파일 작성 11:55 playwright config 변경 12:24 1테스트 실행 13:09 기능 개발 14:47 1테스트 실행 14:57 -1테스트 작성 및 실행 15:26 리셋 테스트 작성 및 실행 15:50 playwr...
3강: Playwright 설치 및 기본 사용법 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 512 часов назад
playwright의 설치 및 기본 사용법을 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 학습내용 00:07 Playwright 설치 00:35 테스트 demo 실행 00:58 Playwright 익스텐션 설치 01:35 익스텐션으로 테스트 실행 01:48 소요시간 주석 설명 01:54 ui모드 소개 03:03 디버거 소개 05:05 outro #nextjs #playwrig...
2강: Vitest 설치 및 기본 사용법 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 1012 часов назад
Vitest 설치 및 기본 사용법을 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 학습내용 00:15 기본값으로 새Nextjs설치 00:58 Vitest 설치 01:22 첫 테스트 파일 작성 02:44 Vitest 익스텐션 설치 03:42 실행 범위 확인을 위한 테스트 추가 04:35 버튼으로 실행하기 04:51 마우스 오른쪽 클릭으로 실행하기 05:13 testing 탭 소개...
1강: Playwright과 Vitest를 써야하는 이유 - Nextjs와 Playwright, Vitest로 TDD 입문하기
Просмотров 4614 часов назад
Playwright과 Vitest를 사용하여야 하는 이유를 배웁니다. TDD(Test-Driven Development)를 실무에서 적용하고 싶은 개발자를 위한 입문용 코스입니다. 이 코스에서는 Playwright과 Vitest의 기초적인 활용법과 TDD의 워크플로우를 체험할 수 있습니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 무엇을 배울 수 있나요? 00:12 학습대상 00:18 어떻게 진행되나요? 00:33 기술선택의 이유 - nextjs 00:53 기술선택의 이유 - vitest 01:01 기술선택의 이유 - playwright 02:31 outro #nextjs #playwright #td...
Next js 기본앱으로 1분만에 playwright 맛보기
Просмотров 2416 часов назад
#nextjs #playwright #tdd #react #e2e #frontend 타임라인 00:00 nextjs 기본앱으로 1분만에 playwright 체험하기 00:10 테스트 대상: 1. 랜딩페이지 타이틀 2. deploy now 버튼 액션 00:16 작성된 테스트 코드 00:32 테스트 결과 00:42 테스트를 해야하는 이유 01:04 잘못 개발된 경우 테스트 결과 01:15 수정후 통과된 테스트 01:23 outro
Next.js와 Playwright, vitest로 TDD 입문하기 2-1강: nextjs에 vitest, playwright 설정하기
Просмотров 4719 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/ 타임라인 00:00 nextjs 설치 01:37 vitest 설치 03:53 playwright 설치 05:00 vitest 익스텐션 설치 06:08 keyboard short cut...
Next.js와 Playwright, vitest로 TDD 입문하기 2-2강: 요구사항에 맞춰 개발 기획서 작성하기
Просмотров 1119 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
Next.js와 Playwright, vitest로 TDD 입문하기 2-3강: 로그인 페이지 ui 개발하기
Просмотров 419 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
Next.js와 Playwright, vitest로 TDD 입문하기 2-4(1)강: TDD로 이메일 양식 오류 개발하기
Просмотров 619 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
Next.js와 Playwright, vitest로 TDD 입문하기 2-4(2)강: TDD로 이메일 양식 오류 개발하기
Просмотров 519 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
Next.js와 Playwright, vitest로 TDD 입문하기 2-5강: TDD로 제출버튼 활성화 개발하기
Просмотров 319 часов назад
Nextjs와 playwright, vitest로 TDD 입문하기 #nextjs #playwright #vitest #tdd nextjs만 알아도 tdd를 배우는데 어려움이 없도록 하였습니다. 실전부터 이론까지! 실무에 바로 적용할 수 있는 TDD(Test-Driven Development) 강의! 최신 도구인 Playwright와 Vitest를 활용해 빠르고 효과적으로 테스트하는 방법을 배웁니다. 해당시리즈: frontierclubs.com/series/431e9f30-c8d0-46fc-9acb-51ff8c000ba9/
Next.js와 Playwright, vitest로 TDD 입문하기 2-6강: TDD로 로그인 성공/실패 개발하기(api모킹)
Просмотров 219 часов назад
Next.js와 Playwright, vitest로 TDD 입문하기 2-6강: TDD로 로그인 성공/실패 개발하기(api모킹)
Next.js와 Playwright, vitest로 TDD 입문하기 2-7강: api연동 후 통합테스트
Просмотров 319 часов назад
Next.js와 Playwright, vitest로 TDD 입문하기 2-7강: api연동 후 통합테스트
Next.js와 Playwright, vitest로 TDD 입문하기 2-8강: 마무리 및 회고
Просмотров 719 часов назад
Next.js와 Playwright, vitest로 TDD 입문하기 2-8강: 마무리 및 회고
좋은강의 감사합니다. 한국어로 된 playwright 강의는 많이 없던데 덕분에 도움 많이 받았습니다
전 TDD를 좋아하는데요. 저도 Playwright관련 강의가 없는게 좀 충격(?)이어서 만들게 됬습니다 ㅎㅎ
정정 00:53의 vitest를 선택한 이유에 트리쉐이킹은 vite의 장점이라 "vitest는 es모듈을 활용해 가벼운 환경에서 실행되지만 jest는 webpack같은 번들러를 거친다" 로 수정하겠습니다