kasumil의 코딩 공작소

[AI E2E] Playwright와 로컬 LLM으로 목표 기반 테스트 만들기: 래퍼 구조·설정·검증 한계

기존 Playwright E2E는 개발자가 클릭 순서와 기대 결과를 코드로 정한다. 여기에 로컬 LLM을 붙이면 현재 DOM을 읽고 다음 행동을 고르게 할 수 있다. 이번에는 이 실행부를 작은 래퍼로 분리해 여러 JavaScript 프로젝트에서 재사용할 수 있게 정리했다.이 글의 AI E2E는 목표 기반 브라우저 자동화 파일럿을 뜻한다. 검증의 중심은 가짜 데이터로 만든 화면과 제한된 동작이다. 실제 서비스 전체를 AI가 알아서 검증한다는 의미로 사용하지 않는다. 계정, 운영 주소, 비공개 저장소 링크와 실제 로그는 공개하지 않는다.1. AI에게 맡기는 부분과 코드로 고정하는 부분가령 “목록에서 조건에 맞는 항목을 열어라”라는 목표가 있다고 하자. 기존 테스트는 대상 버튼과 클릭 순서를 직접 지정한다. ..

[Next.js] Playwright E2E 적용하기: 설치부터 화면 검증·CI·실패 분석까지

빌드와 타입 검사가 통과해도 버튼을 눌렀을 때 화면이 열리지 않거나, 뒤로가기를 했는데 상태가 어긋나는 문제는 남을 수 있다. 이런 흐름을 실제 브라우저에서 반복해서 확인하려고 Playwright E2E를 적용했다.이 글은 처음 설정하는 순서와 실제 적용하면서 확인한 내용을 함께 정리한 문서다. 예시는 가짜 화면과 로컬 주소만 사용한다. 실제 서비스 주소, 계정, 저장소 이름, 운영 환경값은 포함하지 않았다.1. E2E로 어디까지 확인할 것인가E2E(End-to-End)는 사용자가 화면에 진입하고, 누르고, 이동하는 흐름을 검증하는 테스트다. 단위 테스트가 함수 하나를 확인한다면, 브라우저 테스트는 라우팅·렌더링·상호작용이 연결되는지 확인한다.다만 이 글의 적용 환경에서는 API와 분석 전송을 가짜 응답..

[Docker] Watchtower 교체와 자동 배포 보안 점검

컨테이너 자동 업데이트 도구도 하나의 소프트웨어다. 애플리케이션 이미지를 갱신해 주는 도구라고 해서 그 도구 자체의 보안 점검을 빼면 안 된다.이번에는 오래된 Watchtower를 유지보수되는 포크로 교체하고, 사전 점검과 격리 테스트, 교체 후 주기 실행까지 확인했다. 실제 서비스 이름이나 주소, 인증 파일, 내부 설정은 제외하고 적용 순서만 정리한다.1. 이미지 이름보다 유지보수 상태를 먼저 본다기존 containrrr/watchtower 저장소는 보관 처리된 상태다. 후보로 검토한 것은 nicholas-fedor/watchtower의 1.24.0 릴리스이며, 해당 프로젝트가 배포하는 이미지는 nickfedor/watchtower다. 비슷한 이름의 이미지를 임의로 선택하지 않고 프로젝트 문서와 릴리스..

[Docker] Nginx CVE 수정과 안전한 이미지 교체

오래된 컨테이너를 점검하다 보면 애플리케이션 코드만 고쳐서는 해결되지 않는 취약점이 나온다. Nginx 실행 파일뿐 아니라 이미지 안의 OS 패키지와 라이브러리까지 같이 보기 때문이다.이번에는 Nginx 이미지를 검사하고, 필요한 모듈을 확인한 뒤 새 이미지로 교체했다. 이 글은 그 과정을 일반적인 예제로 정리한 것이다. 주소, 계정, 내부 경로, 실제 운영 설정은 포함하지 않았다.1. 먼저 실행 중인 이미지를 확인한다태그 이름이 같아도 이미지 내용은 바뀔 수 있다. 검사 대상은 태그만 적어 두지 말고 이미지 ID와 digest까지 확인하는 편이 좋다.# 는 본인이 관리하는 Nginx 컨테이너 이름으로 바꾼다.docker inspect --format '{{.Image}}' docker image ins..

API를 구현해도 요청 파라미터와 응답 형태를 코드에서 매번 찾아야 한다면, 프런트엔드와 백엔드 사이의 계약을 확인하기 어렵다. 이번에는 Node.js 백엔드의 기존 Swagger 문서를 실제 응답에 맞게 정리하고, Next.js App Router의 BFF에도 별도의 API 문서를 추가했다.서비스는 NAS에서 컨테이너로 운영하는 구성이지만, 문서화 자체는 NAS에 종속되지 않는다. 이 글은 실제 API 명세를 공개하는 글이 아니라, 일반 예시로 Swagger 적용 방법을 설명한다. 운영 서버의 식별 정보와 민감한 설정은 제외했다.적용 상태: Next.js BFF의 운영 문서 차단은 배포에 반영했다. Node.js 백엔드의 로컬 전용 문서 제한은 구현과 검증을 마친 후보이며, API 무중단 배포 작업과 ..

NAS에서 컨테이너를 계속 배포하다 보면 예전 이미지가 쌓인다. 그렇다고 오래됐다는 이유만으로 지우면 롤백할 때 필요한 이미지까지 없어질 수 있다.이번에는 보관 기간 대신 개수를 기준으로 정리했다. 저장소별 최신 이미지 5개를 기본으로 남기고, 실제 배포와 복구에 필요한 이미지는 개수와 관계없이 보호하는 방식이다.1. 최근 5개는 삭제 한도가 아니라 기본 보존 개수같은 이미지에 태그가 여러 개 붙어 있을 수 있으므로 태그 수가 아니라 고유 이미지 단위로 계산한다. 날짜가 지났다고 삭제하는 규칙은 넣지 않았다.대상 저장소별 최신 고유 이미지 5개현재 운영 슬롯과 이전 배포 슬롯의 이미지실행 중이거나 중지된 모든 컨테이너가 참조하는 이미지이름 있는 태그가 붙어 있는 이미지이 조건 중 하나라도 해당하면 남긴다..

프로젝트를 컨테이너로 운영하다 보면 실행 중인 컨테이너와 실제로 사용할 수 있는 서비스를 구분해야 할 때가 있다.프로세스가 살아 있어도 DB 연결이 끊어질 수 있고, 빌드가 성공해도 운영 서버에 새 이미지가 반영되지 않을 수 있다. 배포 직후 새 페이지는 열리지만 이전부터 열어 둔 브라우저에서만 오류가 발생하기도 한다.이번에는 프로젝트에 추가한 헬스체크의 용도와 관리자 화면 확인, CI/CD, 이전 배포를 보존하는 스왑 대응을 정리했다. 실제 운영 주소와 계정 정보는 제외했다.1. 헬스체크로 무엇을 확인할 것인가헬스체크는 검사 범위를 정하는 것부터 시작한다.생존 확인(Liveness): 애플리케이션이 요청에 응답하는지 확인한다.준비 상태 확인(Readiness): DB 같은 필수 의존성을 포함해 요청을 ..

이 글은 개인 FO의 Next.js App Router 슬롯 스왑 구현과 확인한 시험 결과를 정리한 것이다. 현재 동작, 재현 방법, 초기 시행착오를 분리하고 중복된 추가 기록을 통합했다. 회사 Pages Router 환경은 이번 변경의 배포·검증 대상이 아니다. A·B·C는 설명용 버전 이름이며 실제 배포 식별자, 내부 주소와 인증 정보는 생략했다.1. 배포 전환과 이전 탭 지원은 다른 문제다서버를 A에서 B로 바꿔도 이미 열린 탭에는 A의 코드와 라우터 상태가 남는다. 이 상태를 Version Skew라고 한다. 이전 RSC 응답만 정상이어도 그 응답이 요구하는 JS/CSS를 받지 못하면 화면은 실패할 수 있다. 따라서 배포 식별, 요청 중계, 이전 빌드 보존, 브라우저 복구를 각각 검증해야 한다.P..

사내에서 앱을 배포하는데 있어, 심사 이런것들때문에 배포를 못하는 상황에서다운로드 기능을 구현해야했다.그런데, 왜 안되냐 봤더니, 외부 브라우저로 기능을 구현했는데, docx같은 파일은 다운이 바로 되지만 pdf는 브라우저 접속이 가능한것.그래서 다운이 안되더라.브라우저에선 이걸 다운받아야하는건지. 아니면 접속인지를 모르니까.cdn은 다행히 우리가 쓰고있는걸 사용이 가능해서Content-Disposition: attachment헤더에 이걸 이용하면 되더라.다운로드 기능이 없어도 외부 브라우저로 접속시 해당 내용이 다운되게 한다.https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Content-Disposition Content-Disposi..

보완: App Router 적용에서 확인한 공통 한계이후 같은 이전 슬롯 중계 아이디어를 App Router에 적용하면서, 데이터 요청이 성공해도 정적 자원이나 앞단 프록시에서 실패할 수 있다는 점을 확인했다. Pages Router와 App Router의 요청 형식은 다르지만, 이전 빌드 보존과 중계 경로, 청크 제공, 실패 복구를 함께 검증해야 한다는 한계는 공통적이다. 아래 원문의 설계 흐름은 유지하되, 버전 지원과 자동 Reload를 단정했던 설명은 조건부로 보완했다.데이터 200과 페이지 이동 성공은 같지 않다Pages Router의 Data Route가 200이어도 그 페이지에서 새로 필요한 JS/CSS까지 정상이라는 뜻은 아니다. 이미 받은 자원은 동작하더라도, 아직 받지 않은 이전 빌드 청..