문서

ESLint와 AST로 코드 퀄리티 높이기

전성 토스 · 토스 기술 블로그

AI 핵심 요약

사람이 코드 컨벤션을 일일이 확인하는 데 한계가 있고, 커뮤니티 ESLint 규칙만으로는 사내 라이브러리나 SSR 환경의 제약을 충분히 다루기 어려웠습니다. 정규식 대신 AST를 사용하면 실제 함수 호출과 문자열·주석을 구분할 수 있으며, AST Explorer로 노드 구조를 확인한 뒤 ESLint의 `create`와 노드 방문자, `context.report`를 이용해 규칙을 구현할 수 있습니다. 토스는 HTTP 링크, deprecated API, 금지 패키지, SSR에서 안전하지 않은 라이브러리 사용 등을 검사하는 자체 규칙을 플러그인으로 배포해 컨벤션을 유지합니다. 조직 고유의 사용 맥락을 정적 분석 규칙으로 자동화하면 코드 리뷰에만 의존하지 않고 오류와 안티패턴을 사전에 발견할 수 있다는 점을 보여줍니다.

정규식은 문자열이나 주석 속 코드와 실제 실행 구문을 구별하지 못하므로 AST 기반 분석을 활용하세요.
AST Explorer에서 파서별 노드 구조를 확인하면 규칙을 구현하기 전에 필요한 구문 정보를 파악할 수 있습니다.
ESLint 규칙은 `create` 함수에서 노드 타입별 방문자를 반환하고, 위반 시 `context.report`로 알릴 수 있습니다.
조직의 라이브러리 사용 방식이나 SSR 제약처럼 범용 플러그인이 다루지 못하는 기준은 자체 규칙으로 보완할 수 있습니다.

소개

ESLint와 AST로 토스에서 코드 퀄리티를 높인 방법에 대해 소개드려요.

비슷한 학습 자료

컨퍼런스 if kakao

접근성 작업을 도와주는 ESLint plugin 개발기 / if(kakaoAI)2024

컨퍼런스 if kakao

팀의 접근성 개선 작업 중, “Unit test나 Storybook 없이 접근성 위반을 바로 확인할 수는 없을까?“라는 고민이 들었습니다. 이를 해결하기 위해 접근성 위반 사항을 자동으로 알려주는 ESLint 플러그인을 개발한 경험을 공유합니다. 모빌리티에서 셔틀과 버스대절 서비스를 개발하고 있는 Eddie입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-39 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024

프론트엔드 소프트웨어 테스트

문서 박서진/이다용

es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지

문서 박서진/이다용

안녕하세요, 토스 Frontend Engineering Head 박서진, 토스뱅크 Frontend Developer 이다용입니다. 오늘은 토스의 작은 유틸리티 함수 라이브러리로 시작한 es-toolkit이 어떻게 일주일에 2천만 회 이상 다운로드되고, Yarn이나 Recharts 같은 핵심 라이브러리에서도 사용되었는지 그 성장한 과정을 소개해 드릴게요. [서진] es-toolkit의 시작 프론트엔드 개발자로서 throttle, debounce 나 uniq 같은 함수들이 자주 필요해요. 그런데 지금까지는 자신 있게 이러한 유틸리티 함...

프론트엔드 프로그래밍 언어