728x90 전체 글108 프론트엔드 E2E 테스트 실패 분석 개선하기 - 영상과 JSONL 로그 E2E 테스트를 작성하는 시점이전에 프론트엔드 테스트 자동화 - Vitest와 E2E 사용해보기 라는 글을 작성했다. 당시에는 AI와 기능 개발을 진행한 뒤, 작업이 거의 끝난 시점에 E2E 테스트 스펙을 작성하도록 하는 방식을 사용했다.하나의 기능을 개발하는 동안 AI와 요구사항, 예외 케이스, 실제 동작 방식 등을 계속 주고받기 때문에 작업이 끝날 즈음에는 AI도 해당 기능이 어떤 시나리오로 동작해야 하는지 어느 정도 파악하고 있다.그래서 새로운 컨텍스트에서 E2E 테스트를 처음부터 작성하도록 요청하는 것보다, 기능 개발을 진행했던 컨텍스트의 마지막 단계에서 테스트까지 작성하도록 하는 편이 내가 의도한 시나리오를 반영하기 쉬웠다. 최근 토스 프론트엔드 개발자들의 E2E 테스트 활용 사례를 보면서 비.. 2026. 9. 10. git worktree로 병렬 작업하기 — 충돌 검사까지 Claude Code 스킬로 자동화 배경: 같은 레포를 여러 번 클론해서 병렬로 작업했다한 프로젝트에서 여러 작업을 동시에 진행할 때, 나는 같은 레포지토리를 서로 다른 폴더에 각각 클론해두고 썼다.폴더마다 터미널을 열고 Claude Code를 띄워서 각각 다른 작업을 하고, 끝나면 그 폴더에서 커밋/푸시하는 식이다.돌아가긴 하는데 매번 신경 쓸 게 있었다.지금 어느 폴더에 있는지 pwd로 확인하고 작업을 시작한다.작업이 끝나도 바로 커밋하지 않는다. 다른 폴더에서 같은 파일을 건드렸으면 나중에 충돌이 나기 때문에, 먼저 확인하고 나서 커밋/푸시한다.그 "확인"이라는 게 결국 파일 목록을 눈으로 비교하는 일이었다.클론이 서로 남남이라서, 상대 폴더의 작업을 보려면 push/fetch를 거쳐야 한다.git worktree를 쓰면 하나의 레포.. 2026. 8. 17. 바이브 코딩으로 웹 스크래핑 도구 만들기 (여행 맛집 찾다가 직접 만든 키워드 분석 도구) 반복되는 패턴을 찾다 여행을 준비할 때마다 반복되는 패턴이 있다.검색창에 "치앙마이 추천 맛집"을 치고, 나온 블로그 글들을 하나씩 열어보면서 스크롤하고, 어딘가 노션이나 메모장에 옮겨 적고.그걸 10개, 20개 하다 보면 30분이 훌쩍 지난다. 결국 "이 정도면 됐겠지" 하고 넘기는 경우가 많다.이걸 반복하다가 대학 때 했던 게 갑자기 생각났다.파이썬으로 웹 크롤링해서 키워드 빈도를 분석하고 그래프로 뽑아보던 것.당시엔 앱 스토어에서 후기를 크롤링 했던거라 투박했는데, 이걸 제대로 만들면 블로그 글 50개를 일일이 읽지 않아도"어디가 많이 언급됐는지"를 한눈에 볼 수 있겠다는 생각이 들었다. 그래서 만들었다. 직접 코딩한 건 아니고, AI와 대화해가며 완성했다. 어떻게 만들었나 — 바이브 코딩 과정.. 2026. 8. 2. 프론트엔드 테스트 자동화 - Vitest 와 E2E 사용해보기 프론트엔드 개발을 하다 보면 "이 부분 건드렸는데 다른 데 문제 생기지 않을까?" 하는 불안감이 항상 따라온다.실제로 그런 경험도 있었다. 어떤 페이지의 버그를 수정했는데, 잘 돌아가던 다른 기능에서 새로운 결함이 생긴 것이다.그 이후로 테스트 자동화 필요성을 더 강하게 느끼게 됐고,이번에 사내 프로젝트에 Vitest와 Playwright 기반의 E2E 테스트를 본격적으로 적용해보려고 한다. Vitest vs E2E — 뭐가 다른가둘 다 "테스트"라는 단어를 쓰지만 역할이 완전히 다르다.처음에는 "E2E가 있으면 Vitest는 필요 없는 거 아닌가?"라는 생각도 했는데, 쓰임새가 다르다. 테스트 항목VitestE2E (Playwright)날짜/시간 계산 로직✅❌API 응답 가공 함수✅❌필터/정렬 조건 .. 2026. 7. 5. 이전 1 2 3 4 ··· 27 다음 728x90 반응형
