요즘 이마트 프로젝트에서 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..

앱 스킴 연속 호출 문제와 JavascriptInterface를 활용한 해결 방법모바일 앱과 웹이 연동되는 하이브리드 앱 환경에서는웹에서 네이티브 기능을 호출하기 위해 앱 스킴을 사용하게 됩니다. 하지만 실제 프로젝트에서 앱 스킴 호출 시 여러 가지 문제를 경험했고,이를 JavascriptInterface 방식으로 전환하여 해결할 수 있었습니다. 이번 글에서는 앱 스킴 호출에서 발생한 대표적인 이슈들과,이를 어떻게 트러블슈팅했는지 공유드리고자 합니다.🧩 발생한 이슈1) 앱 스킴 동시 호출 시 일부 명령 무시 앱 스킴을 연속으로 호출할 경우,첫 번째 명령만 실행되고 이후 명령은 무시되는 현상이 발생했습니다.emart.app.cmd('페이지 이동');emart.app.cmd('페이스 아이디 열기'); //..

최근 1년간 LLM을 밀도 있게 활용하면서 다양한 생각을 하게 되었습니다.이 글은 단순히 개발자뿐 아니라, 비개발자 분들께도 충분히 적용되는 이야기입니다. 오늘은 현재 LLM(대형 언어 모델)의 수준과 한계, 그리고 앞으로의 발전 가능성,더 나아가 우리가 어떤 방향의 인재로 성장해야 하는지에 대해 이야기해보려 합니다.🔍 LLM, 어디까지 와 있을까?요즘 AI는 단순히 ‘보조 도구’ 수준을 넘어 기능 구현의 주체로도 활용 가능한 단계에 와 있습니다.예를 들어, AI 모델이 탑재된 Cursor 에디터는 단순한 규칙만 입력해도상용 수준의 코드와 테스트까지도 자동으로 생성해줍니다. 정확히 기능 요구사항만 전달하면,사람이 직접 코드를 작성하지 않아도 될 정도로 빠르고 정교한 결과물을 만들어냅니다. 하지만, 정말..

🤔이슈 정의 자식 컴포넌트 2개의 데이터를 비동기로 호출하는데 이 때 두 컴포넌트 모두 데이터가 존재하지 않다면, emit을 통해 데이터 존재 여부를 상위 컴포넌트로 전달해주고, 상위 컴포넌트의 렌더링을 막으려고 했다. // Parent.vue // FirstChild.vue FirstChild // SecondChild.vue SecondChild FirstChild와 SecondChild의 data 존재 여부와 상관없이 Parent는 렌더링되지 않는다. 렌더링에 조건이 걸리지 않는 것으로 보아 동작 순서에서 문제가 있다는 추측을 할 수 있다. vue의 생명주기 내가 헷갈리는 부분은 beforeUpdate 전까지이므로 거기까지만 알아보겠다. data, computed, methods, watch 등 정..

🤔문제 정의3, 2, 1, 0 카운트 다운을 진행하는 컴포넌트를 동작시키기 위해 setInterval을 사용해 3에서 1초마다 countDown을 동작하고, count가 0이 되었을 때, clearInterval을 사용해 setInterval을 중지하는 로직을 구현 중이었다.clearInterval 동작 여부를 구분하기 위해 isIntervalStop이라는 식별자를 flag로 사용하였다.일반 변수로 플래그 선언const [count, setCount] = useState(3);const [isStartCountDown, setIsStartCountDown] = useState(false);let isIntervalStop = false;const buttonClickHandler = () => { s..