4년차 개발자의 성장 회고: 스쿼드, Next.js, AI를 만나다
스쿼드 조직(Squad Organization) 도입으로 직무 중심의 유연한 개발 환경을 구축하고, 리소스를 효율적으로 활용하려 함
Next.js를 새로운 기술 스택으로 채택하여, 프론트엔드 기술 스택 통합(Frontend Tech Stack Unification)을 시도하고, 개발 생산성 향상을 도모함
공통 컴포넌트(Common Component), 모노레포(Monorepo) 구조, 데이터 패칭(Data Fetching) 등 유지보수성을 고려한 개발 구조를 구축함
AI Agent 서비스 개발에 참여하여, AI 기술 활용(AI Technology Utilization)을 통한 데이터 분석 자동화 경험을 쌓음
스쿼드 조직(Squad Organization) 도입과 기술 스택 통합의 배경
본문에서는 스쿼드 조직 도입으로 인한 기술 스택 통합의 필요성을 강조한다. 기존 서비스는 PHP, Vue2 등 다양한 기술 스택을 사용하고 있었으나, 스쿼드 조직의 유연한 리소스 활용을 위해 Next.js를 새로운 기술 스택으로 선택했다.
기술 스택 통일(Tech Stack Unification): 챕터 내 개발자들의 유연한 서비스 투입을 가능하게 함
유지보수성(Maintainability) 향상: 공통 컴포넌트, 모노레포 구조 등을 통해 코드 관리 효율성을 높임
Next.js 선택 이유: 풍부한 레퍼런스(Rich References), 사용자 경험(UX) 개선, 팀 내 Next.js 사용 경험 보유
유지보수성을 위한 개발 구조: 컨벤션, 공통 컴포넌트, 모노레포
유지보수성 향상을 위해 컨벤션, 공통 컴포넌트, 모노레포 구조를 구축한 경험을 공유한다. 컨벤션(Convention) 통일은 코드 가독성을 높이고, 공통 컴포넌트(Common Component)는 UI 일관성을 유지하며, 모노레포(Monorepo) 구조는 라이브러리 버전 관리 및 코드 스타일 통일을 용이하게 한다.
디자인 시스템(Design System) 기반 공통 컴포넌트: 서비스별 UI 차이(UI Difference)를 디자인 토큰(Design Token)으로 관리
모노레포 구조: 여러 라이브러리 버전 관리 용이, 컨벤션 및 린트(Lint) 적용 용이
데이터 패칭(Data Fetching) 구조 통일: API 통신, 인터셉터, 에러 핸들링(Error Handling)을 표준화
데이터 패칭(Data Fetching) 구조와 Suspense, Error Boundary
데이터 패칭 구조 통일 및 Suspense, Error Boundary 도입을 통해 로딩 및 에러 처리 로직을 개선했다. 기존의 isLoading, isError 상태 관리를 제거하고, Suspense와 Error Boundary를 활용하여 컴포넌트의 역할과 구조를 명확하게 분리했다.
Suspense 활용: 서버 사이드 렌더링(SSR) 환경에서 스켈레톤 UI(Skeleton UI) 제공
Error Boundary: 에러 발생 시 안정적인 UI(Stable UI) 제공
상황에 맞는 방법 선택: useQuery의 enabled 옵션, 부모-자식 컴포넌트 간 데이터 공유 등 다양한 케이스(Various Cases)에 대응
AI Agent 서비스 개발 경험: Web SDK, 멀티 인앱 메시지
AI Agent 서비스 개발에 참여하여 Web SDK, 멀티 인앱 메시지(Multi In-App Message) 개발 경험을 공유한다. SDK, API, 콘솔(Console), 템플릿(Template) 등 다양한 요소들이 결합되어 단일 동작을 구현하는 과정을 설명하며, AI Agent를 통해 데이터 분석을 쉽게 할 수 있도록 지원하는 경험을 강조한다.
멀티 인앱 메시지 템플릿 설계: 다양한 디바이스(Various Devices)에서 동일한 UI/UX 제공
SDK 역할: 이벤트 전송 및 감지, 콘솔(Console)과의 통신
AI Agent: 데이터 분석 자동화, 초보 마케터(Rookie Marketer)를 위한 전문가 역할
