지난 글: https://hyunwoo12.tistory.com/82지난 글에서 중단되어서 아쉽다 했는데 1달 있다가 다시 재개가 되어서 10월 말, 1월말 2번에 걸쳐서 상용에 배포까지 했다.글은 gemini 3 flash가 다듬어줬다.개요기존 AI 스튜디오(내가 작년에 만든거 아니고 딴 거)에 dify와 유사한 형태의 AI 워크플로우 저작도구 개발기간: 2025.05 ~ 2025.07 (7월 초 중단, 8월 중 재개 ) 2025.08 ~ 2026.01인원: 프론트엔드 1명 (나), 기획 1명 백엔드 여러명 (협력사)내 역할: 프론트엔드내가 사용한 라이브러리: 이전 글 참고개발생산성 향상API 연동 자동화매번 API를 연동할 때마다 Swagger 정보를 복사해서 LLM에 붙여넣고, 기존 함수를 참조해서..

gpt-5를 사용해서 작성했습니다.브라우저가 화면을 그릴 때 벌어지는 레이아웃, 페인트, 컴포지팅 과정을 실시간으로 들여다보고 에뮬레이션까지 할 수 있는 곳이 바로 DevTools의 Rendering 탭입니다. 스크롤 끊김, 깜빡임, 레이아웃 시프트(CLS), 다크모드/프린트 미디어 대응, 색각 이상 접근성 점검 등 “보이는 문제”를 빠르게 발견하고 원인까지 좁히는 데 특화되어 있어요.빠르게 시작하기DevTools 열기: F12 또는 Cmd+Option+IRendering 탭 열기커맨드 메뉴: Cmd+Shift+P → “Rendering” → “Show Rendering”혹은 DevTools 우측 상단 메뉴(점 3개) → More tools → Rendering패널 지도: 두 축으로 이해하기오버레이/HU..

개요기존 AI 스튜디오(내가 작년에 만든거 아니고 딴 거)에 dify와 유사한 형태의 AI 워크플로우 저작도구 개발기간: 2025.05 ~ 2025.07 (7월 초 중단 - 기존 AI 스튜디오(내가 작년에 만든거 아니고 딴 거)에 기능 더 얹기보다 다른 방향으로 가려는 듯 )인원: 프론트엔드 2명 - 기획, 디자인은 없음, 백엔드는 분석, 투입 준비하다가 프로젝트 중단내 역할: 프론트엔드내가 사용한 라이브러리:react-flow - 노드,엣지 기반 플로우 편집 기능 제공monaco-editor - 코드 편집 기능 제공그 외에는 기존 코드 라이브러리들 사용 - antd, axios, react query 등..개발기존 코드 리팩토링초기 상황처음 코드를 받았을 때는 정말 충격적이었다. 린트 룰이 전혀 없어 ..

repo: https://github.com/fe-jhw/react-access-guardnpm: https://www.npmjs.com/package/react-access-guard관리자 사이트를 개발하다 보면, 사용자 권한에 따라 버튼이나 페이지를 숨기거나 "권한이 없습니다."와 같은 안내 메시지를 표시하는 기능이 거의 필수적이다. 이러한 기능은 사용자 경험을 개선하고 보안을 강화하는 데 중요한 역할을 한다.이러한 권한 관리 기능을 보다 효율적으로 처리하기 위해, 선언적으로 사용할 수 있는 라이브러리를 개발해 보았다.구현권한 정보를 React의 Context API를 활용하여 제공하고, AccessGuard 컴포넌트에서 해당 권한을 조회하도록 구현했다. 권한이 있을 경우에는 children을 렌더링..

캐시 전략Next.js 공식문서의 caching 부분을 읽고 정리해봤다.https://nextjs.org/docs/app/building-your-application/cachingRequest Memoization컴포넌트 렌더링 중 fetch 요청의 결과 값을 캐싱, GET method만 허용렌더링 중에만 유지컴포넌트 트리에서 같은 fetch 여러 번 해도 실제로는 여러 번 요청 안하고 캐싱된 값을 사용리액트의 기능임Data Cachefetch 요청의 결과 값을 캐싱, 서버에서 들고 있고 여러 사용자의 동일한 요청에 대응하기 위함Next.js가 fetch 기능 확장해서 써서 가능한 기능revalidate, opt out 하기 전까지 계속 유지Revalidating시간 기반으로 Revalidation//..

LLM과 토스 기술블로그 https://toss.tech/article/commonjs-esm-exports-field 포스팅을 활용하여 작성했다.CommonJS(CJS)와 ECMAScript Modules(ESM) 요약 및 비교CJS와 ESM은 자바스크립트에서 모듈을 관리하고 사용하는 두 가지 시스템입니다. 각각의 시스템은 서로 다른 장점과 단점을 지니고 있으며, 이로 인해 서로 호환되지 않는 경우가 많습니다.CJS와 ESM의 비교특성CommonJS (CJS)ECMAScript Modules (ESM)문법require / module.exportsimport / export로딩 방식동기적비동기적Top-level await 지원 여부지원하지 않음지원함Tree shaking 가능 여부어렵다가능파일 확장자..

개요AI 개발을 위한 플랫폼으로, RAG와 프롬프트 엔지니어링, llmops 기능 등을 제공하여 사용자가 AI 솔루션을 쉽게 구축하고 배포할 수 있도록 하는 앱기간: 2024.5 ~ 2024.12 (진행 중)인원: 프론트엔드 1명(나), 백엔드 2명, RAG 모듈 1명, PM 겸 기획자 1명, 디자이너 1명, 영업 1명내 역할: 프론트엔드 전체내가 사용한 기술:모노레포 - turborepo, pnpmSSR, SSG, CSR - Next.js 14 앱 라우터디자인 시스템, 스타일링 라이브러리 - shadcn/ui, tailwind상태 관리 - react query, zustand타입 안전성 - typescript폼 관리 - react hook form, zod테스트 - rtl, Jest개발모노레포 구축처음..

Auto Close TagHTML 태그를 쓰면 자동으로 닫아준다. 입력 -> Auto Rename TagHTML 태그 이름 변경시 닫는 태그 이름도 자동으로 변경Auto ImportImport 문 자동 완성ESLintvscode에 IDE 오류 표시, 저장시 자동 린트 기능 제공Error Lens코드 에러 발생 부분 옆에 무슨 에러인지 실시간으로 표시Git GraphSource Control 탭에서 상단 View Git Graph 클릭하여 깃 그래프 볼 수 있음GitLens -- Git supercharged코드 옆에 누가 언제 커밋했는지 내용 표시 - 내역 확인하기 좋음Import Costimport 문 옆에 패키지 용량 표기Prettier코드 포맷팅Tailwind CSS IntelliSensetail..