Search for a command to run...
저는 요즘 업무에서 AI 에이전트를 적극적으로 활용하여 반복적인 업무를 최대한 AI로 자동화하기 위해 공부 중인데요. 이번에 했던 작업 중 하나가 README 파일 생성 자동화입니다. AI에게 README를 써달라고 하면 꽤 그럴싸한 결과물이 나옵니다. 하지만 여러 프로젝트에 반복하다 보면 프롬프트가 모호할 때마다 매번 다른 방식으로 문제를 풀기 때문에 들
개발을 하다 보면 배열 데이터를 가공할 일이 정말 많은데요.저는 평소에는 filter, map 같은 메서드 체이닝 방식을 주로 사용합니다. 읽기 쉽고, 데이터 흐름이 단계별로 명확하게 보이기 때문이죠. 하지만 어떠한 계기로(?) 인해 이런 의문을 가지게 되었습니다.. "만약 데이터가 수천만 건으로 늘어난다면? 배열을 여러 번 순회하는 체이닝 방식이 성능 병목을 일으키지는 않을까?" 혹은 "reduce 하나로 합치는 게 베스트일까?" 이 질문을 ...
지난 글을 보면 성급했던 재사용 컴포넌트 경험으로 고생을 한 적이 있었는데요.(아직 안 보셨다면? [1편: 좋은 추상화란 무엇인가(1)?] ) 애초에 왜 이런 고생을 했을까를 생각해 보면이유는 단순했습니다. 중복 코드가 거슬리니 바로 추상화를 해버린 것이었죠..똑같은 실수를 반복하지 않기 위해 저만의 기준이 필요하다고 느꼈습니다. 이에 대해 이미 깊이 고민하셨던 Cher Scarlett님과 Kent C. Dodds님의 글을 보면서, 제가 취해야...
재사용을 위해 만든 컴포넌트가, 시간이 지날수록 오히려 재사용하기 어려워진 경험이 있으신가요? 저는 최근 프로젝트에서 SearchFilter 컴포넌트가 그러한데요 프로젝트에는 여러 목록 페이지가 존재했고, 페이지마다 검색 조건이 제각각이었습니다. 그래서 처음에는 Configuration 배열만 넘기면 알아서 그려주는 컴포넌트를 만들었습니다. // ❌ 초기의 설정 기반 접근 (Configuration) const filterFields = [ ...
바닐라 JS처럼 개발자가 DOM과 상태 변경을 직접 제어하던 시기에는 불변성·순수 함수 같은 함수형 프로그래밍 철학이 지금처럼 중요하지는 않았습니다. 하지만 React(Vue/Redux/SWR/Recoil 등)처럼 선언적·상태 기반 UI가 등장하면서 상태를 “데이터 흐름의 스냅샷”으로 다뤄야 했고, 그때부터 함수형 프로그래밍이 중요해지기 시작했습니다. 🔥 바닐라 JS에서는 왜 FP가 별로 중요하지 않았을까? 바닐라 JS 시대의 UI 개발은...
최근 프로젝트에서 useEffect의 의존성 배열 경고(react-hooks/exhaustive-deps)를 보면서 코드는 정상적으로 동작하는데 왜 이런 경고가 발생할까? 하는 의문이 들었습니다. 정확히 이해하고자 파고들었고, 그리고 그 끝에서 마주한 것은 리액트가 상태를 관리하는 근본적인 원리, 바로 자바스크립트의 메모리 구조와 클로저였습니다. 이 글에서는 클로저가 무엇인지, 리액트가 훅(Hooks)을 관리하기 위해 클로저를 어떻게 활용하는지...
🚀 프로젝트 배경 & 마이그레이션 결심 이유 왜 React → Next.js App Router로 옮겼는가? React로 만든 기존 프로젝트는 순수 SPA였기 때문에 TMDB나 OpenAI API를 호출할 때 API Key가 클라이언트 네트워크 탭에 그대로 노출되는 문제가 있었습니다. 배포를 하려고 하니 민감 정보때문에 서버가 필요했고, 단순히 별도 프록시 서버를 구축하는 대신, Next.js를 도입하여 하나의 프로젝트 내에서 통합 관리하는...
최근에 사이드 프로젝트에서 OpenAI API를 활용해 영화를 추천하는 기능을 구현했습니다.OpenAI API를 활용해 영화 추천 기능을 구현하는 것 자체는 어렵지 않았지만, AI의 응답을 코드 레벨에서 바로 활용 가능하도록 안정적으로 구조화하고 나아가 깊이감 있는 응답을 받기까지가 생각보다 까다로웠습니다 🎯 문제 정의 처음 목표는 간단했습니다. “특정 영화를 좋아하는 사용자에게 어울리는 영화 5편을 추천해보자.” 1. 초기 구현: 단순한...
Chat (ctrl + L , ctrl + i) : “대화하며 질문/설명 받기” Agent Mode → 내가 직접 코드 수정/생성을 요청할 때 Ask Mode → 내가 직접 질문/개념 설명 받고 싶을 때 Background Agent → 내가 뭘 안 물어봐도, 코드 흐름을 계속 지켜보다가 자동으로 도움을 주는 역할 백그라운드에서 설명이나 개선안을 미리 띄워줌. 자잘한 boilerplate 코드 자동 작성. 참고) Background...