“새는 알에서 나오려고 투쟁한다. 알은 세계다.” 데미안을 읽은 독자가 아니더라도 한 번쯤은 들어봤을 말이라고 생각한다. 이는 내가 가장 싫어하는 말이자, 동시에 좋아하는 말이기도 하다.학창시절 귀에 딱지가 앉도록 들었다. 아버지께서 학년이 달라질 때마다 하셨던 말씀이었다. 스스로 감싸고 있는 이 세상을 스스로 깨내어야 한다는 말, 나 스스로 알을 깨지 못한다면 그 세상에 갇혀 죽는다는 말이다.그리고 그 알을 깨는 과정은 꽤나 힘이 많이 드는 일이다. 아니, 무엇이 내 알인지 파악하는 것부터 힘든 일이라고 생각한다.나는 살아오면서 두 번의 알을 깨었고, 최근 세 번째 알을 깬 것 같아 이 글을 적기 시작했다. 첫 번째 알첫 번째는 고등학교 2학년 2학기 중간고사였다. 사람마다 기준은 다르겠지만, 공부를 ..

안녕하세요 ~ 프론트엔드 개발자 이효린입니다 :D혹시 이런 경험 있으신가요?테스트 코드를 쓰고 싶지만, 작성 비용이 높아서 미뤄지는 상황테스트를 도입했지만, 결국 몇 명만 작성하게 되는 구조AI로 테스트 코드를 생성해봤지만, 실제로는 수정이 더 오래 걸리는 경험저희 팀도 비슷한 문제를 겪고 있었습니다.저희 팀이 딱 이 세 가지를 겪고 있었어요. 😇이 글은 QA 인력 없이 E2E 테스트를 도입하면서, AI가 정확한 테스트 코드를 생성할 수 있는 구조를 어떻게 설계했는지 정리한 글입니다.왜 E2E였나요?사실 처음부터 E2E를 생각한 건 아니었어요. 유닛 테스트, 통합 테스트도 고려했거든요.근데 저희 팀 상황을 생각해보면,수동 검증이 이미 "사용자 플로우 단위" 로 이루어지고 있었어요"이 버튼 누르면 이 모..

안녕하세요 ~ 프론트엔드 개발자 이효린입니다 :D 혹시 이런 경험 있으신가요? 다른 사람이 짠 코드를 인수인계 받았는데, 어디서부터 봐야 할지 모르겠는 경험.components/ 폴더를 열었더니 파일이 35개. 어떤 게 공통 컴포넌트인지, 어떤 게 특정 페이지에서만 쓰이는 건지 전혀 감이 안 잡히더라고요. 결국 파일을 하나하나 열어보면서 "이게 어디서 쓰이는 거지?" 하며 코드 탐정이 되어야 했어요. 😅 새로운 팀원이 합류했는데, 구조 설명에 30분이 걸리는 경험."이쪽은 이렇게 되어 있고, 근데 여기는 좀 달라요, 이건 예외적으로..." 설명하다 보면 저도 헷갈리기 시작하더라고요. 페이지 컴포넌트가 너무 커져서 쪼개기 시작했는데, depth만 깊어지는 경험.pages/DataSource/compone..

안녕하세요, 프론트엔드 개발자 이효린입니다 :) 저희 팀이 개발 중인 서비스 eXemble에는 실시간으로 서버 자원을 모니터링하는 대시보드를 제공하고 있습니다. 이 과정에서 여러 라인 차트를 동시에 hover할 때 모든 차트의 툴팁이 같은 시간에 동기화되어야 했습니다. 첫 번째 API 응답에서는 툴팁 동기화가 잘 동작했지만, 데이터가 지속적으로 유입되기 시작하자 이상한 현상이 발생했습니다. 일부 차트의 툴팁만 업데이트 되거나, 서로 다른 시간의 값이 표시되거나, 심지어 툴팁이 사라지는 버그가 랜덤하게 발생했습니다. 처음엔 단순한 상태 관리 문제라고 생각했습니다. 하지만 파고들수록 TanStack Query의 캐싱 전략, ECharts 인스턴스의 업데이트 타이밍, React 렌더링 사이클이 얽힌 복합적..