시원하다

AI Harness 도입기

노션에서 보기 (원본)왜 도입했는가프로젝트에서 반복적으로 발생하는 구현 패턴과 구조 규칙을 AI가 안정적으로 따르도록 하기 위해 AI Harness 구조를 도입했습니다.Before — 프롬프트만 있을 때• FSD 레이어 위반 코드를 AI가 자꾸 생성합니다• mutation hook의 onError 위치를 매번 틀립니다• 에러 분류 함수 연결 없이 날것의 catch 블록을 삽입합니다• 도메인마다 파일 구조가 제각각입니다• 같은 패턴인데 매번 다르게 구현합니다After — Harness 도입 후• 레이어 위반 시 ai-check.sh가 잡아냅니다• create-post-mutation skill이 정확한 위치를 강제합니다• handle-api-error skill로 패턴이 고정됩니다• create-crud-..

하네스 엔지니어링

노션에서 보기 (원본) 에이전트를 만드는 시대에서, 에이전트를 안전하게 운용하는 시대로.01. 프롬프트의 한계워크플로우를 아무리 잘 만들고, 프롬프트를 아무리 정교하게 써도, 에이전트가 지시를 그냥 무시하는 경우가 생긴다. 프롬프트는 결국 자연어기 때문이다.자연어로 된 지시에는 강제력이 없다. “절대 하지 말라”고 써도 모델은 확률적으로 그것을 할 수 있다. 프롬프트가 쓸모없다는 뜻이 아니라, 프롬프트만으로는 부족하다는 것이다.시스템 레벨에서 작동하는 제어 구조 없이, 모델의 출력을 완전히 강제할 방법은 없다.이것이 하네스 엔지니어링이 필요한 출발점이다.02. 하네스란 무엇인가하네스(Harness)는 AI 에이전트가 안전하고 예측 가능한 방식으로 작동하도록 설계된 제어 구조 전체를 말한다.제어(Contr..

Pretext

노션에서 보기 (원본) 브라우저 없이 텍스트 레이아웃을 계산하는 라이브러리 https://github.com/chenglou/pretext GitHub - chenglou/pretext: Fast, accurate & comprehensive text measurement & layoutFast, accurate & comprehensive text measurement & layout - chenglou/pretextgithub.com 아코디언 애니메이션, 가상 스크롤, 채팅 버블의 shrink-wrap, 메이슨리 레이아웃 등으로 텍스트를 감쌌을 때 높이가 얼마나 될까요?브라우저에서 텍스트 높이를 알기 위해서는 getBoundingClientRect 또는 offsetHeight를 호출해야 합니다. 이 ..

프론트엔드 서비스 품질을 관리하는 방법

노션에서 보기 (원본) 프론트엔드 서비스는 배포 이후에 더 많은 문제가 생깁니다.사용자 환경마다 다른 오류예상치 못한 런타임 에러UI 깨짐배포 후 버그 발견이러한 문제들은 개발 환경에서는 재현되지 않는 경우가 많기 때문에, 문제 원인을 파악하는 데 많은 시간이 소요됩니다. 따라서 이러한 문제를 효과적으로 관리하기 위한 전략이 필요합니다.서비스 품질 관리는 크게 두 가지 접근으로 나눌 수 있습니다.문제 예방 → Testing문제 발견 → Monitoring 1. 문제 예방: Testing문제를 예방하는 가장 기본적인 방법은 테스트입니다. 테스트는 범위에 따라 크게 세 가지로 나눌 수 있습니다.Unit Test: 작은 단위의 함수/로직 테스트예: 유틸 함수, 유효성 검사 로직 등테스트 코드 시작하기Integ..

섹션 5. 통합 테스트 작성하기

5.1 통합 테스트 작성하기 - ProductFilterProductFilter 컴포넌트 기능SearchBar: 상품명 텍스트 입력CategoryRadioGroup: 라디오 형태 카테고리 선택PriceRange: 최소/최대 가격 범위 설정Store 연동useFilterStore에서 setMinPrice, setMaxPrice, setTitle, setCategoryId 액션을 가져온다.categoryId state: 선택된 카테고리 관리비즈니스 로직API를 통해 카테고리 목록을 가져와 라디오 버튼을 렌더링한다.상품명 입력 → setTitle 호출카테고리 클릭 → 선택된 라디오 체크최소/최대 가격 입력 → setMinPrice/setMaxPrice 호출const ProductFilter = () => { ..

SEO에서 GEO까지

노션에서 보기 (원본)검색과 AI 시대의 콘텐츠 최적화SEO (Search Engine Optimization, 검색엔진 최적화)SEO는 웹사이트가 검색 결과에 더 잘 노출되도록 최적화하는 과정입니다.검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 검색 결과를 통해 우리 사이트를 방문할지 판단할 수 있게 만드는 것이 목적입니다.즉, 특정 키워드로 검색했을 때 검색 결과 상위에 노출되도록 만드는 전략이라고 할 수 있습니다.왜 중요할까요?전체 사용자의 31.7%가 첫 번째 검색 결과를 클릭합니다.검색 결과 10위권 밖으로 밀리면 사실상 노출 효과가 거의 없습니다.⇒ 검색 결과 상위 노출 여부가 곧 유입량의 차이로 이어집니다. Google 검색은 어떻게 작동할까요?Google은 크롤러(Crawler)를 사용해 ..

Polling vs. SSE vs. WebSocket

노션에서 보기 서버의 Event를 Client로 보내는 방법웹에서 서버의 상태 변화나 이벤트를 클라이언트에 전달해야 하는 경우, 대표적으로 Polling / SSE / WebSocket세 가지 방식을 사용합니다. 1. PollingPolling은 클라이언트가 주기적으로 HTTP 요청을 보내 서버에 변경 사항이 있는지 확인하는 방식입니다.HTTP 통신은 기본적으로 [요청(Request) → 응답(Response) → 연결 종료]라는 구조를 갖습니다. (비연결성, Stateless)*여기서 비연결성은 TCP 연결을 유지하지 못한다는 의미가 아니라, 요청 간 상태를 서버가 기억하지 않는다는 것을 의미합니다.따라서 웹은 본래 실시간 통신에 적합하지 않지만, Polling을 사용하면 실시간처럼 보이게 구현할 수..

MSA와 BFF

노션에서 보기MSA(MicroService Architecture)Monolithic vs. MSAMonolithic 구조모든 기능이 하나의 애플리케이션에 통합된 구조예: 쇼핑몰의 상품 관리, 주문, 결제, 배송이 모두 한 서버에 존재문제점: 한 기능의 장애가 전체 서비스 중단으로 이어질 수 있다.MSA 구조독립적인 배포가 가능한 서비스들로 구성된 아키텍처예: 상품 서비스, 주문 서비스, 결제 서비스, 배송 서비스로 분리각 서비스를 도메인별로 분리시키고, 각 서비스는 독립적이고 단일 비즈니스 기능에 대해서만 책임을 갖는다. MSA의 문제점MSA 구조에서는 각 기능별로 나눠져 있는 여러 서비스를 호출해야 화면을 완성할 수 있다. 따라서 화면을 그리기 위해 다수의 API를 호출하여 데이터를 불러와서 적절히 ..

Application Error가 랜덤하게 발생하는 오류 해결하기

문제운영을 막 시작한 서비스에서 다음과 같은 문제가 발생했다.- 사용자가 사이트에 처음 접속할 때 간헐적으로 Appliation Error가 발생- 같은 URL로 새로고침하면 정상적으로 동작- 로컬 개발 환경에서는 재현되지 않음 에러가 항상 발생하지 않고, 특정 조건에서만 확률적으로 발생했기 때문에 단순한 UI 버그나 로직 오류가 아닌 런타임 로딩 구조 문제로 판단했다. 원인 분석 - 순환 참조와 모듈 평가 시점 문제문제의 핵심은 Next.js App Router + Barrel Export* 구조에서 발생한 순환 참조였다.* Barrel Export: 여러 파일의 export를 한 군데로 모아두는 index.ts 패턴 구조SessionGuard.tsx └─ import { useSession, Ses..

CI/CD 파이프라인 구축하기

팀원이 푸시한 코드 때문에 전체 프로젝트가 빌드 실패하거나,작은 버그 하나 고치려면 배포 담당자를 기다려야 하는 문제 겪어보셨나요?⇒ 이 문제들을 해결해 주는 것이 바로 CI/CD입니다. CI/CD란 무엇인가?CI/CD(Continuous Integration & Continuous Delivery/Deployment)는 애플리케이션 개발부터 배포까지 모든 단계를 자동화하여 효율적이고 빠르게 사용자에게 배포할 수 있도록 하는 개발 방법론입니다.코드를 변경하면 CI가 자동으로 테스트하고, 문제가 없으면 CD가 검증된 코드를 프로덕션에 반영합니다. CI: Continuous Integration (지속적 통합)개발자가 코드를 공유 저장소에 자주 통합하는 프로세스입니다. 새로운 코드 변경 사항이 정기적으로 빌..