안동민 — 4년차 프론트엔드 개발자. 디자인 시스템과 성능 사이 어딘가에서 일합니다. 지금은 만들고 싶은 것을 차근차근 다듬는 중.
total 29
Next.js의 RSC Payload와 서버 컴포넌트 렌더링
Next.js App Router에서 서버 컴포넌트가 HTML과 RSC Payload로 나뉘어 렌더링되는 흐름을 정리한다.
프론트엔드 캐시 정리 3: TanStack Query와 SWR
TanStack Query와 SWR을 이해하려면 stale, gc, invalidation, 즉시 반영을 나눠서 봐야 한다.
마케팅 글 자동화를 위한 AI 서버 분리 과정
마케팅 글 자동화 POC를 실제 어드민 기능으로 옮기면서 AI 서버를 분리하고, 프롬프트와 프리셋을 운영 가능한 구조로 바꾼 과정
브라우저에서 SSE 스트리밍, 뭘 써야 하나
AI 채팅 UI를 만들다가 스트리밍이 한 번에 쏟아지는 현상을 디버깅했다. EventSource와 fetch+getReader()의 차이, 그리고 브라우저가 스트림을 다루는 방식을 정리했다.
프론트엔드 캐시 정리 2: Next.js 캐시와 15·16 비교
Next.js 캐시는 서버 캐시와 Router Cache를 분리해서 봐야 이해하기 쉽다.
프론트엔드 캐시 정리 1: 브라우저 캐시와 캐시 레이어
프론트엔드 캐시를 이해하려면 먼저 bfcache와 HTTP 캐시를 분리해서 볼 필요가 있다.
회사에서 마케팅 글 자동화 만든 이야기
신제품 마케팅 글을 AI로 자동화하려고 했는데, 잘 쓰인 프롬프트보다 버튼 하나가 더 중요했다.
Claude Code 서브에이전트, 설정만 해놓고 안 쓰고 있었다
에이전트 설정을 다 켜놨는데, 한 달 치 데이터를 까보니까 실제로 쓰고 있는 건 executor뿐이었다.
Next.js App Router에서 RSC Prefetch 중복 요청을 줄인 과정
같은 RSC prefetch 요청이 여러 번 반복되던 원인을 링크 복제와 수동 prefetch 호출에서 찾았다.
React 컴포넌트 인스펙터와 QA 자동화 도구 만들기
15개의 디자인 QA 티켓을 처리하면서 반복되던 컴포넌트 찾기와 QA 기록 작업을 크롬 익스텐션으로 줄인 과정
Back to Basic : 자료구조로 살펴보는 리액트 의 렌더링
React의 작동 원리를 공부하다 보면 다음과 같은 말을 자주 듣게 됩니다“React는 가상돔을 사용해 렌더링을 최적화한다”“Fiber 구조가 도입되면서 중단 가능한 렌더링이 가능해졌다”“React는 스케줄러를 통해 작업 우선순위를 조절한다”...
필요해서 만들어버린 웹표준 검사기 크롬익스텐션 With Cursor AI
최근 회사에서 공공기관에 납품해야 하는 프로젝트를 진행하면서 웹표준을 준수해야 합니다라는 요구사항을 받았습니다.
역사속으로 사라지는 CRA
이번 블로그에서는 CRA가 더 이상 유지되지 않는 이유와 리액트 팀이 프로젝트를 시작할 때 권장하는 방식을 소개하려합니다
프론트개발자가 인프라와 씨름하는 법
최근에 프론트 배포 파이프라인에서 문제를 발견하고 해결 과정을 복기 하면서 웹이 서빙되고 배포할때 필요한 개념들을 다시 공부해 보았습니다.
2024년 회고
크로스핏을 처음 접한 건 22년도였을 것이다. 그때 막 개발자로 취준을 준비하던 시기였고, 전공 외에 다른 영역으로 취업을 준비한다는 불안감에 매일매일 성취감을 운동에서 얻었던 시기였다.
개발자가 영어도 잘해야하나요? 서평
이 서평은 길벗 출판사에서 책을 제공받아 작성된 서평입니다이 책은 이전부터 관심이 있었던 책이었다.
자발적 B작업(2), 상세페이지로 들어가는 시간이 느려요.
최근에 회사에서 아래와 같은 요청사항이 들어왔다.'상세페이지를 들어가는데 많이 느린 것 같아요'그렇다. 항상 미루고있던 숙제같은 성능개선의 요구사항을 받았던 것이다.
자바스크립트 + 리액트 디자인 패턴 스터디 - 중간 회고
지난 9월 7일 토요일 스터디 킥오프부터 매주 자바스크립트 + 리액트 디자인 패턴이라는 책으로 스터디를 진행하고 있는 중입니다. 아직 스터디가 끝나지 않았지만 1달 정도 지남 & 책의 중반을 다 읽음의 진행 상황에서 회고를 가져보는 게 좋을 것 같아서 글로 정리했습니다
[글또] 삶의 지도
29년 정도 되는 삶을 돌아봤을 때, 현재 나를 이루고 있는 점 같은 순간들일 존재 하는 것 같다. 그런 순간들을 나열하다 보면 지도가 되지 않을까 싶어서 몇 가지 순간을 (혹은 기간들을) 정리해 보았다.
자발적 B작업(1), 매 번 반복되는 일회용, 아니 이벤트 페이지... 개선기 with supabase
자발적 B작업이란, 책에서 "더글러스 엥겔바트"의 작업 구분법을 가져와서 A작업 (원래 하기로 했던 일), B작업 (A작업을 개선하는 일), C작업 (B작업을 개선하는 일) 로 나누어 설명합니다. 이 부분을 읽었을 때, "나는 회사에서 A작업만 하고 있는 게 아닐까
web 에서 video 를 넣는 방법, <video/>
프론트엔드 영역에서 web을 이루는 요소가 많지만 내가 잘 다뤄보지 못한 영역은 video 영역이였습니다.그러나, video를 사용해서 만들어진 웹들은 굉장히 많고 web 에서 어떻게 다루는지 궁금하여 이 글을 작성하였습니다.
구름톤(kakao x goorm) in Jeju 4기 대상 후기 - 바로해루
필자의 경험을 위주로 작성된 글입니다. 다소 감정적이고 주관적일 수 있어요.
TDD Clean Code with JavaScript 4기- 1주차
nextstep 에서 진행하는 TDD Clean Code with JavaScript 4기 강의를 듣고 정리한 내용입니다
React Query - Query invalidate
react query - 이제는 tanstack query- 에서는 데이터의 상태를 fetching -> fresh -> stale -> inactive -> delete 의 흐름으로 가지고 있습니다. fetching : 데이터 요청 상태.fresh : 데이터가 만료되
반복적인 코드 작성, Snippet 으로 시간 단축해보자!
팀의 컨벤션과 프레임워크의 컨벤션으로 새로운 모듈이나 파일을 만들때만다 매 번 똑같은 코드를 쳐야되는 상황을 종종 겪는다
eslint 를 이용해서 import 순서를 자동으로 바꿔보자!
우리는 종종 프로젝트 협업을 하다보면 무수한 import 구문들을 만나게 된다.사소하지만 종종 import 구문 순서가 맞지 않아서 다른 팀원들과 충돌 나는 경우가 많았다.
git merge, rebase
이 글은 뻔하디 뻔한 git merge 와 rebase 의 글이지만 저의 이해를 높히기 위해 적은 글입니다.Merge 란 브랜치를 통합하는 명령어 입니다. 어떤 브랜치에서 git merge “브랜치 이름” 을 명령하게 되면 현재 브랜치가 브랜치 이름을 가진 브랜치로
테오의 스프린트 오전반 회고
유감스럽지만 개인적으로 너무 힘든 협업이었고 협업 이렇게만 하지 않으면된다! 라는 큰 교훈을 얻은 스프린트 였기 때문에 회고를 정리 하지 않을 수 없었다.
Vite 는 Webpack을 대체 가능할까?
vite 공식문서 Getting started 의 첫 줄을 보면,vite 는 프랑스어로 빠르다 를 의미합니다.라는 설명이 있습니다.이 설명 그대로 vite 는 "빠른" 자바스크립트 번들링 툴입니다. 대표적인 자바스크립트 번들링 툴은 Webpack 과 Rollup 등이