요즘 이마트 프로젝트에서 LLM을 활용하는 사례에 대해 크게 4가지로 구분하여 공유드리고자 합니다. LLM은 개발 생산성 향상, 코드 품질 개선, 유지보수성 강화 등 다양한 측면에서 긍정적인 영향을 미치고 있습니다.e2e 테스트 with Playwright MCPPlaywright는 멀티 브라우저 환경에서 시각화 테스트를 지원하는 강력한 테스트 라이브러리입니다. 저희는 Playwright MCP(대화형 모드)를 활용하여 자연어 시나리오를 기반으로 e2e 테스트 코드를 작성하고, 이를 통해 테스트 유지보수성을 크게 높였습니다.이마트앱 와인그랩을 통해 와인을 구매하는 시나리오를 예시로 들어보겠습니다. 시나리오는 다음과 같습니다.와인그랩 이동 -> 상품 선택 -> 상품 수량 변경 -> 결제페이지 이동 -> 픽..

오늘은 Vue.js 기반의 이마트 앱에서 '와인그랩' 구매 프로세스를 자동화한 E2E(End-to-End) 테스트 구축기를 공유하려고 합니다. 이 포스팅에서는 Playwright를 선택한 이유부터, 반복적인 로그인 과정을 스마트하게 처리하는 법, 그리고 AI 페어 프로그래밍 도구(Cursor)를 활용해 실제 테스트 시나리오를 작성하는 과정까지, 저의 경험을 아낌없이 나눠보겠습니다.🤔 E2E 테스트, 왜 Playwright일까요?E2E 테스트는 사용자의 여정을 그대로 흉내 내며 프론트엔드부터 백엔드까지 전체 시스템의 통합적인 동작을 검증하는 가장 확실한 방법입니다. 수많은 프레임워크 중 Playwright를 선택한 이유는 명확했습니다.🌐 멀티 브라우저: 코드를 한 번만 작성하면 Chromium, Fir..

인증 vs 인가 인증이란? 유저가 누구인지 확인하는 절차. 회원가입하고 로그인하는 절차를 의미한다. 인가란? 인증 이후, 유저에 대한 권한을 허락하는 절차. 인증된 사용자가 특정 페이지, 특정 api 정보를 호출할 때 보내줘도 되는지 확인하는 과정을 의미한다. 💣접근 제한 접근 제한 은 server에서 하는 인가 와는 다르게 사용자가 누구인지 식별할 수는 없기 때문에 사용자마다 페이지를 구별해서 띄워줄 수는 없다. 하지만 JWT 토큰 인증 방식의 경우, refreshToken의 유무, accessToken의 유무, userId의 유무를 통해 사용자의 로그인 여부 확인할 수 있고 로그인 여부에 따라 페이지 접근 제한을 둘 수 있다. 예를들어 사용자가 로그인을 해야만 들어갈 수 있는 페이지를 요청한다면, 사..

용어 정리 Client 자사 서비스가 실질적으로 운영되는 사이트. 이 프로젝트는 React를 통해 Client를 띄워주고 있다. Authorization Server Google, Kakao, Naver 등 인증에 필요한 아이템을 제공해주는 서버. Client는 ID, PW로 로그인 요청을 해서 Authorization Code를 발급받을 수 있다. Resource Server Google, Kakao, Naver 등 사용자의 개인정보를 가지고있는 애플리케이션 서버. Server는 Authorization Code를 넘겨 개인정보를 응답받을 수 있다. Server 자사 서비스의 Backend를 담당하는 서버. Client로부터 받은 Authorization Code를 Resource Server로 전달해..

SSR(Server Side Rendering) server에서 HTML을 정제해서 브라우저로 전송해 페이지를 띄워주는 방식 특징 server에서 HTML을 완성해서 보내주기 때문에 브라우저에서 우클릭 후 페이지 소스 보기 를 하면 완성된 html을 볼 수 있다. 장점 첫 완성된 페이지를 볼 수 있는 속도가 CSR에 비해 빠르다. 완성된 html이므로 검색엔진이 사이트의 내용을 파악할 수 있다. => 검색에 용이하다. 단점 사용자의 요청에 따라 동적으로 페이지를 변경해주는 속도가 CSR에 비해 느리다. CSR(Client Side Rendering) server에서 완성되지 않은 html을 브라우저로 전송하고, 사용자의 요청에 의해 브라우저 단에서 js로 나머지 컴포넌트를 렌더링하는 방식 특징 완성되지 ..