천천히, 꾸준히
기록하는 개발 블로그
개발과 관련된 코드, 생각 등의 기록을 공유하는 개인 블로그입니다.
단로그 — ai-엔지니어링-1편-파운데이션-모델과-평가.md
---
title: "AI 엔지니어링 — 1편: 파운데이션 모델과 평가"
date: 2026-09-02
tags: [AI]
---
> 『AI 엔지니어링』 : https://product.kyobobook.co.kr/detail/S000217939673
---
## 들어가며
최근 AI의 빠른 발전 속에서, 프론트엔드 개발자의 역할이 어디까지 확장될 수 있을지에 대한 얘기가 많이 나오고 있습니다. 풀스택 개발자로 이동하는 흐름도 종종 보입니다. 저도 동료 개발자들과 모이면 항상 이런 얘기를 나누고 있습니다 :)
실제 업무에서 저 역시 Claude Code, Cursor 등을 활용해서 개발을 하고, AI 면접 등 AI 기반 서비스를 만들어보기도 했습니다. 그러다 문득 "AI 엔지니어는 구체적으로 어떤 역할을 하는 직업일까? 내가 해 온 것도 AI 엔지니어링이라 할 수 있을까?"라는 궁금증이 생겨, 이참에 관련 책을 읽으며 공부해 보기로 했습니다.
저처럼 비슷한 고민을 하고 계시다면 이 책을 한번 읽어보시길 추천합니다. 앞으로의 커리어 방향도 함께 고민해볼 수 있는 좋은 기회가 될 것입니다.
자주 사용하는 AI 용어들에 대한 이해를 바탕으로, 올해부터는 프론트엔드 개발자를 "AI 프론트엔드 엔지니어"라고 불러보려 합니다.
---
title: "Agent Slack Bot 만들기 (feat. Chat SDK)"
date: 2026-08-16
tags: [AI]
---
Vercel에서 만든 `Chat SDK`를 간단하게 알아보고, 이를 활용해서 슬랙봇을 만들어보겠습니다. 이후 설명에 나오겠지만 어댑터 구조를 통해 디스코드나 팀즈에도 간단하게 적용할 수 있습니다.
> 사용된 코드는 [Github](https://github.com/geonhwiii/slack-knowledge-bot)에서 확인할 수 있습니다.
>
> 예제를 위해 만든 코드로, 실제 운영보다는 참고용으로 보시면 좋을 것 같습니다.
<br />
---
## Chat SDK
Vercel이 만든 **TypeScript 챗봇 프레임워크**로 Slack, Teams, Discord, Google Chat, Telegram, WhatsApp, GitHub, Linear 같은 플랫폼을 어댑터에 넣기만 하면 됩니다.---
title: "글쓰기와 독서, 추상화 그리고 AI"
date: 2026-07-07
tags: [Frontend]
---
저는 다른 개발자의 블로그 글을 읽거나, 기술문서, 개발 책을 보는 것을 좋아합니다.
여러 기술 블로그 글을 보다보면, 문득 이런 생각이 듭니다.
글이 잘 읽힌다는 것은 이해하기 쉽게 글을 작성했다는 것이고, 보통 이런 글은 좋은 글이라고 말할 수 있습니다.
제가 생각하는 좋은 코드의 기준도 이것과 비슷합니다. 코드가 잘 읽힌다는 것은 이해하기 쉽게 코드를 작성한 것이고, 좋은 코드라고 할 수 있습니다.
<br />
---
<br />
---
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 키 등이 모두 해당됩니다.자주 다루는 주제
ReactTypeScriptReact QueryArchitectureToolingJournal
함께 일한 동료들이 전하는 이야기.
“열정적으로 업무에 대해 탐구하고 의견을 제안합니다. 항상 수용적인 태도로 상대방의 의견을 받아주고, 본인의 주장도 상대방을 생각하는 태도로 잘 전달할 줄 아는 장점이 있습니다.”
“확실한 의사 표현과 빠른 작업 속도가 강점입니다. 또 트렌드, 인사이트를 많이 찾아보고 팀에 공유도 많이 해주시는 편이라 건휘님이 관심을 갖고 있는 기술적 영역과, 적용해볼 수 있는 다양한 작업들까지 아이디어를 확장해볼 수 있어 많은 도움이 됩니다.”
“주어진 과업에 최선을 다하며, 믿고 맡길 수 있는 동료입니다. 문제를 만날때 해결 할 수 있는 여러가지 아이디어를 제시하는 점이 큰 장점입니다.”
“책임감이 강해서 누구보다 업무 집중도가 뛰어납니다. 본인이 만든 작업물에 큰 애정이 있어서 지치지 않고 즐기며 일하는 모습을 보일 때가 있습니다.”
“디스코드에 생각을 공유해 주시는 걸 보면, 지속적으로 본인만의 고민을 이어나가고 그걸 해결하고자 하는 의지가 뛰어난 분이라고 생각했어요.”
“배운 것들을 금방 업무에 적용해보고, 그게 좋은 방법이든 안좋은 방법이든 스스로 근거를 세워보고, 피드백 받고, 반영하고 이런 과정들이 빠르게 진행되는 모습이 좋았던 것 같아요.”
“꾸준히 최선을 다해 작성하신 코드를 들고 와서 깨지고, 그러고 나서 다시 들고와서 깨지고를 반복하시는 모습이 인상적이었습니다”
“작업 속도도 빠르고 많은 아이디어를 가지고 있어 타 직무에서도 건휘님을 통해 많은 인사이트를 얻고 있습니다. 그리고 누구보다 우리 서비스를 '잘' 만들고자 하는 의지가 강하고, 상황을 객관적으로 판단하려는 모습이 보입니다”
“본인의 감정 상태를 가감없이 드러내고 늘 질문을 이끌어가는 건휘님 보면서 많이 배웠습니다! 어디 가서도 좋은 리더가 되실 거에요”
최근 글
모든 글 보기 →SEP 2, 2026·AI
AI 엔지니어링 — 1편: 파운데이션 모델과 평가
『AI 엔지니어링』을 읽으며 메모한 용어를 바탕으로AI를 활용하여 프론트엔드의 관점으로 정리합니다.
AUG 16, 2026·AI
Agent Slack Bot 만들기 (feat. Chat SDK)
Chat SDK의 사용법과 이를 활용하여 Agent Slack Bot을 만들어봅니다
JUL 7, 2026·Frontend
글쓰기와 독서, 추상화 그리고 AI
개발자로서 글을 쓰는 것에 대한 생각, 독서에 대한 생각, 추상화와 AI에 대한 생각을 정리합니다.
JUL 2, 2026·Performance
X의 피드 성능과 스크롤 복원 따라잡기 (1)
X의 피드는 스크롤을 아무리 내려도 성능이 뛰어나고, 상세 피드를 보고 돌아와도 스크롤 위치가 바로 복원됩니다. 어떤 원리인지 예제와 함께 알아봅니다.