컴포넌트가 35개인데, 어디에 파일을 둬야 할까? — FSD 도입기
·
기타
안녕하세요 ~ 프론트엔드 개발자 이효린입니다 :D 혹시 이런 경험 있으신가요? 다른 사람이 짠 코드를 인수인계 받았는데, 어디서부터 봐야 할지 모르겠는 경험.components/ 폴더를 열었더니 파일이 35개. 어떤 게 공통 컴포넌트인지, 어떤 게 특정 페이지에서만 쓰이는 건지 전혀 감이 안 잡히더라고요. 결국 파일을 하나하나 열어보면서 "이게 어디서 쓰이는 거지?" 하며 코드 탐정이 되어야 했어요. 😅 새로운 팀원이 합류했는데, 구조 설명에 30분이 걸리는 경험."이쪽은 이렇게 되어 있고, 근데 여기는 좀 달라요, 이건 예외적으로..." 설명하다 보면 저도 헷갈리기 시작하더라고요. 페이지 컴포넌트가 너무 커져서 쪼개기 시작했는데, depth만 깊어지는 경험.pages/DataSource/compone..
ECharts 툴팁 동기화 버그, 4번의 가설 끝에 찾은 진짜 원인
·
🩵 React
안녕하세요, 프론트엔드 개발자 이효린입니다 :) 저희 팀이 개발 중인 서비스 eXemble에는 실시간으로 서버 자원을 모니터링하는 대시보드를 제공하고 있습니다. 이 과정에서 여러 라인 차트를 동시에 hover할 때 모든 차트의 툴팁이 같은 시간에 동기화되어야 했습니다. 첫 번째 API 응답에서는 툴팁 동기화가 잘 동작했지만, 데이터가 지속적으로 유입되기 시작하자 이상한 현상이 발생했습니다. 일부 차트의 툴팁만 업데이트 되거나, 서로 다른 시간의 값이 표시되거나, 심지어 툴팁이 사라지는 버그가 랜덤하게 발생했습니다. 처음엔 단순한 상태 관리 문제라고 생각했습니다. 하지만 파고들수록 TanStack Query의 캐싱 전략, ECharts 인스턴스의 업데이트 타이밍, React 렌더링 사이클이 얽힌 복합적..
옵시디언 + 클로드 코드로 나만의 RAG 챗봇 만들기 | Claudian 설치 방법
·
기타
안녕하세요 ~ 프론트엔드 개발자 이효린입니다 :D 다들 어떤 노트패드 어플리케이션을 사용하시나요 ? 저는 Notion을 매우 애용했고, 약 5년간 Notion을 꾸준히 써오던 중 최근에 Obsidian이라는 툴을 알게되면서, 개인 노트 필기는 Obsidian만 사용하게 되었어요. 그 이유는파일이 내 로컬 컴퓨터에 저장된다.마크다운(.md) 기반이라 가볍고, 어떤 에디터에서도 열 수 있다.플러그인 생태계가 정말 풍부해서 내 입맛대로 커스터마이징이 가능하다.그래프 뷰(Graph View) 기능으로 내가 작성한 노트들이 서로 어떻게 연결되어 있는지 시각적으로 확인할 수 있다.위 장점들 중에서 1번, 내가 작성한 문서가 내 로컬 컴퓨터에 저장된다는 것이 가장 마음에 들었어요. 내가 작성한 문서가 내 로컬 컴퓨터..
[DX 개선] 실수가 많아진다면 그것은 환경 문제이다 - Husky로 코드 품질 지키기
·
⚓️ 개발환경
안녕하세요 ! 프론트엔드 개발하는 이효린입니다. 오늘은 사내 프로젝트에서 husky 도입하는 과정에서 왜 도입하게 되었고, 어떠한 부분을 기대할 수 있는지에 대해 작성해보겠습니다. 과거 취준생 시절 팀 프로젝트를 하던 당시에 다음처럼 CI/CD 파이프라인의 빌드 실패가 빈번하게 발생해 큰 불편을 겪었습니다. 주로 개발자마다 커밋 전에 타입 검사, 린트, 포맷 등을 개인 습관에 의존하다 보니, 사소한 코드 오류나 스타일 문제 조차 CI 단계에서 뒤늦게 발견되는 경우가 많았기 때문입니다. 이로 인해 다음과 같은 문제들이 발생했습니다.코드 리뷰와 병합을 반복적으로 중단해야 함CI 실패 후 원인 파악과 수정으로 팀 생산성 저하작은 실수로 인해 전체 파이프라인 낭비팀 전체 코드 품질과 일관성 관리에 어려움코드리뷰..