프론트엔드에서 테스트를 왜 해야 하는가?1️⃣ 버그 조기 발견개발 단계에서 오류를 빨리 잡으면 비용을 크게 절약할 수 있다. 2️⃣ 사용자 경험 보장UIUX가 변경될 때 예상치 못한 문제가 생기는 걸 예방할 수 있다. 3️⃣ 리팩토링 안전성 확보리팩토링 시 기존 기능이 깨지지는 않았는지 확인할 수 있다. 4️⃣ 자동화로 반복 검증 가능CICD 파이프라인에서 배포 전 자동 검증하도록 하면 수동 검증보다 빠르고 정확하게 반복할 수 있다. 5️⃣ 협업 효율성 증가팀원들이 코드 변경 시 의도치 않은 영향을 테스트로 확인할 수 있고, 동시에 테스트 문서 자체가 명세서 역할을 하기도 한다. 무엇을 테스트해야 하는가?1️⃣ 비즈니스 로직ex) 유틸 함수, 커스텀 훅by. Jest/Vitest 2️⃣ 핵심 컴포넌트 동..

JS 실행시간브라우저가 JavaScript 코드를 다운로드 → 파싱 → 컴파일 → 실행하는 데 설리는 시간 전체 • `다운로드`네트워크를 통해 JS 파일을 가져오는 과정 • `파싱`브라우저가 JS 코드를 읽어 AST로 변환하는 과정 • `컴파일`JS 엔진이 코드를 머신코드로 변환하는 과정 • `실행`실제 코드가 동하는 과정 ➡️ JS 실행시간이 길면 페이지 초기 로딩이 늦어지고 사용자 인터랙션이 지연되므로 JS 실행시간 최적화가 필요하다! 🎃 webpack-bundle-analyzer번들의 크기가 클 경우 다운로드 시간, 파싱/컴파일 시간, 실행시간 모두에 악영향을 끼칠 수 있다. 이때 webpack-bundle-analyzer가 도움이 될 수 있는데, webpack-bundle-analyzer는 번들..

합동 세미나에서 FSD에 대해 논의하게 된 것을 계기로, FSD의 공식문서를 요약해보았습니다. 아래를 읽기 전, 이 글을 먼저 읽고 오시면 좋을 것 같습니다! FSD(Feature-Sliced Design)프론트엔드 애플리케이션 구조를 위한 아키텍처 방법론 FSD는 다음과 같은 3단계 계층 구조를 따른다.1️⃣ LayerLayer는 FSD에서 코드를 구분하는 가장 큰 범위로, 코드를 나눌 때는 각 부분이 어떤 기능을 담당하는지와 다른 코드에 얼마나 의존하는지를 기준으로 한다. 총 7개의 Layer가 있으며 담당 기능과 의존성이 많은 것부터 적은 순으로 나열한다. 1. AppRouting, Entrypoint, Global Styles, Provider 등 앱을 실행하는 모든 요소2. Process페이지 ..

✳️ List Virtualization커다란 목록을 조회할 때, 아래와 같이 스크롤이 버벅거리거나 항목이 바로바로 보이지 않는 현상을 쉽게 볼 수 있다.일반적으로 리스트 아이템을 DOM에 렌더링하는 것은 다음과 같은 비용을 필요로 한다.• 각 리스트 아이템마다 DOM 노드를 생성한다. • 각 DOM 노드의 style과 layout을 계산하고 paint한다. • 이때 스크롤이 발생하면 모든 DOM 노드의 reflow, repaint가 발생한다. • 이 과정에서 FPS가 하락하고 CPU 사용률이 증가한다. 이때 List Virtualization을 사용하면 현재 화면에 보이는 리스트 아이템만을 렌더링함으로써 위의 비용을 줄이고 사용자 경험을 개선할 수 있다. 1️⃣ content-visibility: au..

최근 우연히 실무에서 바로 쓰는 Frontend Clean Code를 접하고 그동안 제가 작성해온 코드가 얼마나 💩🪰엉망진창이었는지 반성하는 시간을 가졌습니다. 앞으로는 보다 클린한 코드를 작성하겠다는 굳은 다짐을 담아👊🏻 두고두고 꺼내보기 위해 해당 세션의 내용을 정리해보았습니다! ☝🏻 클린 코드란?읽기 쉽고 유지보수하기 쉬우며 효율적인 코드구글에 클린 코드라고 검색하면 가장 상단에 뜨는 정의이다. 그러나 이 세션에서는 특히 유지보수에 초점을 맞춰 유지보수하기 쉬운 코드라고 설명한다. 이를 좀 더 풀어서 설명하면 원하는 로직을 빠르게 찾을 수 있는 코드라고도 할 수 있다. 이때 하나 유념해야 할 건 무작정 짧은 코드가 클린 코드는 아니라는 것! 아무리 짧더라도 이해하기 어렵고 원하는 로직을 빠..

2주차 세미나 공유과제로 Render Blocking과 FOUT 없이 구글 웹 폰트를 사용하는 방법에 대해 학습하며 웹 폰트 성능 최적화 전략에 흥미를 가지게 되었고, 이번 기회에 웹 폰트 성능을 최적화하기 위해 일반적으로 많이 사용되는 방법들을 제대로 정리해보고자 본 아티클을 작성하게 되었습니다. ☝🏻 웹 폰트란?웹 폰트란 대부분의 운영체제에 설치되어 있지 않은 커스텀 폰트로, 브라우저가 폰트 파일을 인터넷에서 다운로드하여 사용한다. 웹 폰트는 개성있는 디자인이 가능하다는 장점이 있지만 폰트 파일 다운로드 시간이 소요된다는 단점이 있기 때문에 성능 최적화를 위한 고민이 반드시 필요하다. 웹 폰트가 요청, 다운로드, 페인트되는 과정은 다음과 같다. `T0~T1` 브라우저가 HTML 문서를 요청하고, H..