천천히, 꾸준히
기록하는 개발 블로그

---
title: "X의 피드 성능과 스크롤 복원 따라잡기 (1)"
date: 2026-07-02
tags: [Performance]
---

<Video src="https://i.imgur.com/5xpqaqV.mp4" client:visible />

> 예제 코드는 Claude Code로 작성하여 [stackblitz](https://stackblitz.com/~/github.com/geonhwiii/x-feed-scroll-restoration-example?file=src/components/Feed.tsx)에서 확인할 수 있습니다.

`X.com`을 둘러보다보니 피드를 수천개를 보아도 성능이 뛰어나고, 돌아와도 스크롤 위치가 부드럽게 복원되는 것을 보았습니다. 여기서 궁금한 포인트는 3가지가 있습니다.

1. 수만개의 피드를 보여도 뛰어난 피드의 성능
2. 돌아와도 스크롤 위치가 부드럽게 복원되는 이유
3. 피드의 높이가 모두 다른데 스크롤 위치가 정확히 복원되는 방법

직접 X의 HTML을 살펴보며 알아보도록 하겠습니다.

<br />

---
title: "2026 Frontend Security Best Practices"
date: 2026-06-11
tags: [Frontend]
---

최근 TVi**, Za**, 패스트\*\*\* 등 여러 기업에서 개인정보 유출 사고가 잇따라 발생하고 있습니다.

요즘 프론트엔드는 SSR, RSC 등 서버와 클라이언트를 모두 다루게 되면서, 보안 이슈가 그 어느 때보다 중요해졌습니다.

React, Next.js, npm 사례만 봐도, 보안 문제는 이제 남의 일이 아님을 알 수 있습니다.

이번 글에서는 프론트엔드 개발자가 꼭 알아야 할 보안 지식과 실전 체크포인트를 정리해보겠습니다.

---

## 1. Credential 유출

**Credential(자격증명)** 이란 특정 서비스에 접근할 수 있는 열쇠입니다. API 키, 데이터베이스 접속 정보, OAuth 시크릿, AWS IAM 키 등이 모두 해당됩니다.

---
title: "AI 시대, knip으로 Dead Code 말끔히 정리하기"
date: 2026-05-29
tags: [Frontend, CI]
---

최근에 AI로 코드를 많이 작성하면서, 코드의 이해와 퀄리티에 대한 이슈가 많이 부각되고 있습니다.

생성 속도가 빨라진만큼, 코드가 방대해지고 기획도 자주 바뀌면서 **dead code**(사용하지 않는 코드)가 빠르게 쌓입니다.

이번에는 knip을 사용해 사용하지 않는 코드를 정리하고, 이를 린트와 함께 CI에 적용하여서 프로젝트 관리하는 방법을 알아봅니다.

실제 회사의 모노레포 프로젝트에 knip을 도입하고, biome·knip·테스트를 GitHub Actions에 적용하여 **158개 파일, 8,443라인, 16개 의존성**을 걷어냈고, 매 PR에 적용되도록 자동화하였습니다.

## 1. knip

[knip](https://knip.dev/)은 프로젝트 안에서 **사용하지 않는 파일·export·의존성**을 찾아주는 데드코드 분석 도구입니다. 단순히 문자열을 검색하는 것이 아니라, 프레임워크와 도구 설정을 바탕으로 진입점부터 import 그래프를 따라가며 실제로 도달 가능한 코드와 그렇지 않은 코드를 구분합니다.

knip을 도입하는 이유를 다음과 같이 설명합니다.

---
title: "[번역] TanStack Router and Query"
date: 2026-05-27
tags: [번역, React]
---

> 원문 : https://tkdodo.eu/blog/tan-stack-router-and-query

TanStack Router가 TanStack Query와 잘 통합된다는 것은 놀라운 일이 아닙니다. 결국 같은 `스택`에서 나왔으니까요. 그런데 잠깐 — TanStack Router는 이미 캐싱을 지원하지 않나요?

```tsx title="Loader Data" twoslash
export const Route = createFileRoute('/dashboard/$dashboardId')({
  component: Dashboard,
  staleTime: 10_000,
  loader: ({ params }) => fetchDashboard(params.dashboardId),
});

function Dashboard() {
  const dashboard = Route.useLoaderData();

---
title: "번들러 완전 정복 — webpack부터 tsdown까지"
date: 2026-05-26
tags: [React]
---

> 이 글은 동일한 코드를 7개 번들러/빌드 도구로 각각 빌드해보는 실습 프로젝트를 바탕으로 작성했습니다.  
> Github Project 참고: [bundler-example](https://github.com/geonhwiii/2026-bundler-example.git)

---

## 들어가며

프론트엔드 개발을 하다보면 webpack부터 시작해서 rollup, esbuild, tsup, vite, rolldown, tsdown 등 새로운 번들러와 빌드 툴이 계속해서 등장합니다. 왜 이렇게 많은 번들러가 등장하는 걸까요?

각 도구들은 단순히 트렌드가 아니라, 이전 세대 번들러가 가진 한계나 새로운 환경(브라우저, Node.js, 개발 방식 등)에서 발생하는 문제를 해결하기 위해 만들어집니다.

이 글에서는 번들러가 존재하는 이유부터 시작해서, 현재 프론트엔드 생태계에서 주요하게 쓰이는 7개 도구를 동일한 소스 코드로 직접 빌드해보며 비교합니다.