전체 글43 [AI] 지속가능한 AI 개발 환경 구축하기 시리즈 목차: 역할별 AI 페르소나 하네스 구축기1편: [AI] 일관성이 보장된 AI 개발 환경 구축하기2편: [AI] 지속가능한 AI 개발 환경 구축하기 (읽고있는 글) 프롤로그 최근 저는 혼자서 AI를 적극적으로 활용하여 디자인 시스템을 제작하고 있습니다. 제작중인 디자인 시스템은 모노레포 환경에서 UI 패키지와, Motion 패키지 2가지를 제공합니다. 해당 디자인 시스템을 제작하며 AI를 '가상의 팀원'으로 정의하고 규칙을 토대로 일관성 있는 개발을 할 수 있도록 하는 'AI 네이티브(AI-Native) 개발'을 함께 실험하고있습니다. 지난 1편에서는 "일관성이 보장된 AI 개발 환경 구축하기"라는 제목으로 "역할별 AI 페르소나 라우터 패턴"과 "라우터 자동 동기화 시스템"을 도입한 경험을 공.. 2026. 4. 22. [AI] 일관성이 보장된 AI 개발 환경 구축하기 시리즈 목차: 역할별 AI 페르소나 하네스 구축기1편: [AI] 일관성이 보장된 AI 개발 환경 구축하기 (읽고있는 글)2편: [AI] 지속가능한 AI 개발 환경 구축하기 프롤로그 최근 저는 혼자서 AI를 적극적으로 활용하여 디자인 시스템을 제작하고 있습니다. 단순히 코드 몇 줄을 짜주는 '도구'를 넘어, 프로젝트의 원칙을 함께 지키며 일하는 '가상의 팀원'으로 AI를 정의해 보고 있습니다. 이를 통해 일관성 있는 AI 개발 환경을 구축하고, 'AI 네이티브(AI-Native) 개발'을 실험하는 중입니다. 가장 먼저 시작한 일은 AI에게 명확한 역할(페르소나)을 부여하는 것이었습니다.개발 담당 (Developer)코드 리뷰 담당 (Challenger)문서화 담당 (Documenter)회고 담당 (Retr.. 2026. 3. 5. [Next.js] 서버 컴포넌트에 대한 오해 (2) 프롤로그최근 면접 진행을 통해 내가 서버 컴포넌트에 대한 내용을 타인에게 자세히 설명하기에는 부족한점이 존재한다는 것을 인지했고 이러한 경험을 통해 좀 더 깊게 파해쳐 보려고한다. 이번에는 서버 컴포넌트(RSC)과 SSR과 함께 이야기를 다루어 본다. 서버 컴포넌트와 SSR의 차이점?처음 다독다독을 App Router로 마이그레이션 할 때 헷갈렸던 부분이다. 나 처럼 처음 Next.js, App Router, 서버 컴포넌트를 접하는 개발자라면 분명 헷갈릴만한 여지가 있어 보이는 내용이지 싶다.결론적으론 엄연히 다른 영역이다. 우선 SSR에 대해 간단히 말해보자면 다음과 같다."SSR이 동작하는 방식은 서버에서 HTML 뼈대를 렌더링하여 브라우저에 전달한 다음 클라이언트에서 HTML 요소에 하이드레이션(H.. 2026. 2. 23. [테스트 코드] 어떻게 하면 효율적인 E2E를 작성할 수 있을까? 프롤로그첫 커리어의 시작과 함께 첫 테스크였던 E2E 테스트 시나리오를 작성하며 고민했던 내용을 적어보려고 합니다.호기심, 만족감, 어려움, 아쉬움 등 여러 감정이 들며 진행했던 테스크라서 개발자를 은퇴하기 전까지 기억에 남을 것 같네요. 1. 인생 첫 테스크, 처음 작성해보는 E2E사실 테스트 코드에 대해 관심은 있었지만 E2E 테스트 코드를 작성해보는건 처음이었습니다.실제 돌아가고 있는 서비스에 내가 테스트 코드를 작성한다니..!!(이건 기회야.) 우선 E2E를 작성하며 나름 사명감(?)을 갖고 작성하기 시작했습니다.- 유저 플로우를 따라 E2E를 작성하여 추후 기능 추가, 수정 작업시에 서비스 안정성을 보장하자.- 내가 E2E를 잘 작성한다면, 코드로도 유저 플로우를 이해할 수 있는 하나의 문서가 .. 2026. 1. 2. [React] 많이 늦은 toss의 useFunnel 적용기 프롤로그이 글은 Toss Slash 23에서 진유림 님이 소개한 useFunnel을 바탕으로 작성된 글이에요.토스에서는 회원 가입이나 통장 개설처럼, 사용자가 복잡하게 느낄 수 있는 과정이 자주 등장해요.이런 과정을 그대로 UI로 옮기면, 화면은 금세 많아지고 흐름도 복잡해질 수 있어요.그 결과 사용자는 어디까지 진행했는지 헷갈리고, 개발자 역시 분기 처리를 관리하기 어려워져요.useFunnel은 이런 문제를 줄이기 위해 만들어졌어요.사용자는 한 단계씩 자연스럽게 다음 화면으로 이동하고,개발자는 여러 화면과 분기 로직을 퍼널 구조로 정리하며 흐름을 명확하게 관리할 수 있어요.(토스를 리스펙한다는 느낌으로 토스식 어조로 작성해봤습니다.) 해당 글에서 작성할 내용은 Slash23에서 알게된 useFunnel.. 2025. 12. 29. [Next.js] 서버 컴포넌트에 대한 오해 (feat. harryk-ds, 다독다독) 프롤로그: 작성 계기올해 첫 커리어로 단기계약직 포지션을 통해 실제 업무를 진행해보며, 플랫폼 개발에 흥미와 매력을 더더욱 느끼게 됐다.(FE 플랫폼 개발: 여러 프론트엔드 개발자들이 효율적이고 일관성 있게 서비스를 만들 수 있도록 돕는 내부 도구 개발) 그래서 시작하게된 디자인 시스템 프로젝트, harryk-ds를 진행하며 RSC에 관해 고민하게된 내용을 적어보려한다.오늘의 주제는 제곧내 "Next.js 서버 컴포넌트에 대한 오해" RSC랑 서버 컴포넌트랑 똑같은거 아닌가요?결론1. 다르다.결론2. RSC는 서버 컴포넌트의 상위 개념이다.결론3. RSC는 개념/스펙의 개념, 서버 컴포넌트는 구현체/용어의 개념RSC: 서버에서 실행되는 React 컴포넌트 모델서버 컴포넌트: RSC 모델을 따르는 컴포넌트.. 2025. 12. 25. [리렌더링] 01. reflow & repaint reflow와 repaint에 대해 아는대로 말해보세요해당 소제목은 내가 경험했던 면접 질문 중 하나였다.그냥 생각이나서 간단하게 끄적여보려고한다.reflow & repaint브라우저를 사용하다보면 UI들이 지속적으로 같은 스타일을 유지 하진 않는다.개발자의 의도에 따라 어떤 노드에 무언가를 추가하고어떤 요소는 스타일이 달라지기도 한다.이럴 때 발생하는것이 바로 reflow와 repaint만약 style이나 DOM 내부를 변경하는 DOM API가 사용됐다면 우리의 DOM은...1. 무엇이 변경됐는지 감지2. 브라우저 작동 과정을 수행 (HTML DOM 트리 & CSSOM 트리 생성 -> Render 트리 생성 -> paint)3. 리렌더링을 진행위와 같은 과정을 수행한다.리렌더링이 일어나는 방식 3가지.. 2024. 11. 25. [테스트 코드] 00(Ep). 테스트 코드는 왜 작성할까? 프론트엔드 테스트 코드는 왜 작성해야할까?백엔드고 프론트엔드고 테스트 코드의 중요성은 지금까지 귀에 피가나도록 들어왔다.하지만 내가 직접 테스트 코드를 작성해본적은 단 한번도 없는걸?그래서 생각해보았다.내가 프론트엔드 테스트 코드를 작성해보고 싶은 이유는?프론트엔드 테스트 코드를 작성한다면 어떤 결과를 만들 수 있을까?내가 테스트 코드를 작성하고싶었던 이유- 지속가능한 테스트 자동화를 구축하고 싶어서- 지속적인 코드 검증을 통해 프로젝트 코드의 질을 높이고 싶어서- 앞으로도 안전한 코드를 꾸준히 작성하고 싶어서올바른 테스트 코드를 작성하면 좋은점은?- 사전에 결함을 찾아내고 수정할 수 있다!- 특정 모듈(React에서는 Component)이 사양에 잘 동작하는가 확인할 수 있다!- 좋은 설계에 대한 사.. 2024. 11. 25. [이미지 최적화] 02. Next/Image의 한계점, 그에 대한 대책 오늘 제가 글쓰려고 하는 주제는 바로Vercel 무료플랜 사용 시 Next/Image의 한계점과 그에 대한 대책입니다.사용자가 없거나 작은 프로젝트의 경우에는 그대로 Next/Image를 써도 무방하니글을 읽어보고 비슷한 경험에 해당되는 사람은 저와 같은 고민을 해보는것도 좋을 것 같아요.글에 대한 수정 요청 및 정보 공유는 언제든지 환영입니다 ~.~Next/Image가 제공하는 장점- webp, avif등의 이미지 확장자 최적화- Lazy 로딩- placeholder제공을 통한 CLS 점수 개선- width, height값을 받아 reflow 현상을 최소화- sizes props를 통한 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지 제공- vercel을 통한 이미지 캐싱vercel을 통한.. 2024. 7. 2. 이전 1 2 3 4 5 다음