Data Availability First Pattern이란TkDodo의 Status Checks in React Query 글에서 소개된 패턴이다.리액트 쿼리 사용 시 이미 캐시된 쿼리가 있을 때, refetch에서 에러가 발생해도 캐시된 데이터를 계속 보여주는 패턴이다.코드로 보는 편이 빠를 것 같다.일반적으로 리액트 쿼리를 아래와 같이 사용한다.const {data, isPending, error} = useTodos()if (isPending) { return 'Loading...'}if (error) { return 'An error has occurred: ' + error.message}return {data.map(renderTodo)}이 경우 refetch에 실패하는 경우 캐시된 데이..

클로드 코드 스킬을 에이전트로 생성하거나 skill-creator로 생성하는 경우 동작은 잘 하지만 불필요하게 시간을 낭비하는 안티패턴이 포함되는 경우가 있다. 예를 들어 ! 커맨드를 사용하여 전처리할 수 있는 경우에도 Bash 도구를 사용하는 경우다.이 글에서는 삽질하며 알아낸 안티패턴들에 대해 정리하고자한다.v2.1.92 기준으로 작성됨안티패턴 1: 잘못된 예약어 사용에이전트에게 스킬을 생성해달라고하면 아래와 같은 스킬에서 지원하지 않는 예약어를 사용해버린다.${CLAUDE_PLUGIN_ROOT}${ARGUMENTS:-develop}다음의 예약어만 스킬에서 사용할 수 있다.- `$ARGUMENTS` — 전체 인자 문자열- `$ARGUMENTS[N]` — N번째 인자 (0-indexed)- `$N` —..

배경요새 J-POP을 자주 듣기도 하고 일본어 공부도 조금씩 하고있다.노래 가사에서 단어를 추출해서 Anki 덱으로 만들어 단어 공부를 하고 있는데 이 과정이 은근 불편하다.나무위키에서 가사 검색 -> LLM으로 단어 추출 (csv) -> Anki 덱으로 등록뭐랄까 엄청 불편하지는 않은데 사소하게 불편하다...그래서 그냥 클로드 코드 스킬로 위의 과정을 자동화했다./lyrics-to-anki Pretender 오피셜히게단디즘세팅필요한 것Anki (데스크탑 버전)클로드 코드Anki 세팅카드 노트 유형 추가Anki -> 도구 -> 노트 타입 관리 -> 추가 -> 추가:Basic 이름 변경으로 원하는 유형 이름으로 변경한다.나의 경우 일본노래(2026-03-23)로 변경했다. 필드… 클릭1: Front, 2..

배경에이전틱 코딩 도입으로 코드 생성 속도가 비약적으로 상승했다. 짧은 시간에 더 많은 코드가 만들어지고 자연스럽게 MR의 양도 늘어났다.그러나 MR 리뷰는 여전히 개발자의 영역이다. 코드를 읽고, 맥락을 파악하고, 정책 위반이나 장애 위험 등을 사전에 확인하고, 코멘트를 남기고, 수정 사항을 재확인하는 과정은 아직 자동화하기 어렵다.이 또한 AI를 이용하여 자동화할 수 있다고 말하는 사람도 있겠지만, 누가 책임을 질 것인가? 코드 작성의 생산성은 증대되었으나, 리뷰는 그대로이다. 생산성의 병목이 코드 작성에서 코드 리뷰로 옮겨갔다.앤트로픽의 Agentic SDLC에서도 이를 확인할 수 있다.MR 리뷰가 가장 큰 병목그림에서 보듯 휴먼 리뷰가 가장 큰 병목이다. 여기서 휴먼 리뷰는 본인 리뷰와 팀원의 M..

이 글은 FE에서 유지보수 가능한 e2e 테스트 코드 작성 방법 대해서 다룬다.대상은 playwright의 실행 및 기본적인 문법을 알고있다고 가정한다. FE에서 e2e에 대한 찬반 및 도입 이유찬성유닛, 통합 테스트와 달리백엔드와 연계하여 실제 동작 검증환경 변수, 인증 문제 등을 파악할 수 있음... 반대테스트 실행 시간이 오래 걸림flaky하다 (테스트 코드의 문제가 아니라, 네트워크 타이밍 이슈 등으로 인해서 깨지기 쉽다)유지보수 비용이 큼QA 팀의 하위호환으로 불필요하다고 판단되기도 한다.https://tech.kakaoent.com/front-end/2023/230209-e2e/ 도입 이유먼저 나는 FE에서 e2e가 필수라고 생각하지는 않는다.QA 팀 역할의 하위호환이 맞다고 생각하며,백엔드의..

이 글은 프론트엔드에서 테스트 코드의 필요성에 대해 경험을 바탕으로 정리하였다.먼저 테스트 코드의 장단점에 대해서 간략하게 알아보고,테스트 코드가 없었을 때 얼마나 나쁜 상황이 되는지를 실제 경험을 바탕으로 말해보려한다. 프론트엔드에서 테스트코드가 잘 작성되지 않는 이유- 추가적인 개발 비용 및 일정 압박- UI를 포함하는 높은 테스트 코드 작성 난이도- 백엔드에 비해 상대적으로 장애가 크리티컬하지 않다고 인식됨- 테스팅 도구(vitest, playwright 등), 좋은 품질의 테스트 코드를 위한 학습 비용등등이러한 이유로 테스트 코드는 항상 우선순위에서 밀린다. 그럼에도 테스트 코드의 장점- 리팩토링 안정성 기능 수정이나 추가 시 심리적 안정감을 주고, 테스트 실패 지점으로부터 빠르게 버그를 해결할..

이 글에서는 유저 인증 상태를 어떻게 관리하는지에 대한 고민과 나름의 해결방법에 대해서 다룬다. 리액트 쿼리만 사용했을 경우 발생하는 DX 문제를 살펴보고, 이를 해결하기 위해 Context를 의존성 주입 도구로서 활용하는 방법을 소개한다.또한, 이 접근 방식이 유발할 수 있는 워터폴 요청 문제와 이를 피하기 위한 방법에 대해서도 다룬다. 문제 상황 (DX 관점)예를 들어, 헤더, 대시보드, 프로필 등 여러 컴포넌트에서 유저의 값에 접근해야하는 경우리액트 쿼리만 사용하게 된다면 다음과 같은 코드를 작성해야한다.export function useGetMe() { return useQuery({ queryKey: ["me"], queryFn: () => getMe(), staleTime: ..

이 글에서는 소프트 내비게이션의 LCP(Largest Contentful Paint)를 측정하는 방법에 대해서 다룬다.LCP 측정에는 web-vitals 라이브러리와 측정 자동화 및 반복 시행을 위해 playwright를 사용한다. 들어가기에 앞서웹 성능 지표웹 성능 지표 중 코어 웹 바이탈은 링크에서 자세한 설명을 확인할 수 있다.- 최대 콘텐츠 페인트 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 지 2.5초 이내에 LCP가 발생해야 합니다. - 다음 페인트에 대한 상호작용 (INP): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 INP가 200밀리초 이하여야 합니다.- 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니..