"완벽한 코드는 없다. 문제를 해결할 수 있으면 그게 최고의 코드다." - 켄 톰슨

• 극초기 스타트업에서 고생(?)했던 프론트엔드 개발자입니다.
• 풀스택 개발 경험을 갖춘 프론트엔드(그러니까 잡탕구리란 뜻)
• INTJ 성향으로 분석과 전략을 좋아하지만,
• 무엇보다 함께 일하는 동료들과의 티키타카 + 미소가 저의 원동력입니다.

• React: 16.8버전부터 사용. 거의 모든 프로젝트에서 활용. 컴포넌트 최적화, 렌더링 성능 개선, 커스텀 훅 개발
• TypeScript: 고급 타입(제네릭, 유니온, 인터섹션, 맵 타입)을 활용한 안전한 코드베이스 구축, 타입 추론, 인터페이스 설계
• Electron: IPC 통신, 멀티 윈도우 관리, 크로스 플랫폼 배포, 로컬 퍼스트 상태관리
• Next.js: 파일 라우팅 시스템 + SSR적용
• Zustand: 복잡한 상태 관리 설계, 미들웨어를 통한 영구 저장소, 도메인별 슬라이스로 구성된 스토어 설계
• Tailwind: 커스텀 테마 구현, 반응형 디자인, 다크모드 지원
• Shadcn/ui: 3년차, figma와 연동하여 디자인 토큰화 - 디자인시스템 변형 적용
• Million.js: 이벤트 버블링 문제 해결, 렌더링 개선
• React-Query: 캐싱, 백그라운드 갱신, 낙관적 업데이트, 무한 스크롤 구현

• Vitest: 단위 및 통합테스트, 테스트 케이스 다양화로 핵심 비즈니스 로직 보호
• Playwright: Electron에 맞는 독립적 테스트 환경 구성, 시각적 회귀 테스트
• ESLint: 20+ 플러그인 및 커스텀 규칙으로 프로젝트 표준 적용

• OpenAI API 통합: AI 기반 콘텐츠 생성 및 텍스트 분석, 문서 요약 기능 구현
• Xenova/transformers: 클라이언트 사이드 ML 모델 구현, 로컬 모델 추론

• Docker: 4년차, CI/CD 파이프라인 구축에 활용
• Kubernetes: EKS 사용경험 및 베어메탈에서 K8S 올려본 경험. Helm 매니저 활용
• AWS: 5년차, EC2, S3, Route53, Lambda 등 경험
• Firebase: 3년차, Firestore, Authentication 등 실시간 데이터 처리에 활용
• Supabase: 실시간 구독을 통한 협업 기능 구현

• 합성(Composition) 패턴: 단일 책임 원칙을 따르는 작은 컴포넌트들을 조합해 복잡한 UI 구성
• Headless UI 패턴: Radix UI 기반 로직과 UI를 분리하여 접근성과 스타일링 자유도 확보
• 커스텀 훅 패턴: 로직 재사용을 위한 35+ 커스텀 훅 개발 (예:useKeyboardManager,useElectronIPC)
• 에러 바운더리 패턴: React Error Boundary를 활용한 오류 격리 및 실패 처리

• 슬라이스 패턴: Zustand 스토어를 도메인별 슬라이스로 분리하여 모듈화 (10+ 슬라이스)
• 셀렉터 패턴: 메모이제이션 기반 셀렉터로 불필요한 렌더링 최소화
• 이벤트 기반 아키텍처: Observer 패턴을 활용한 느슨하게 결합된 컴포넌트 간 통신
• 비동기 액션 패턴: 비동기 작업을 표준화된 방식으로 처리하는 패턴 구현

• 기능 기반 모듈화: 기능별 폴더 구조로 응집도 높은 코드 조직화, 폴더 뎁스 최적화, 단방향 의존성

  app/  ├── space/              # 스페이스 관련 모든 기능  │   ├── components/     # 컴포넌트  │   ├── hooks/          # 커스텀 훅  │   ├── create-slice.ts # 상태 관리  │   └── utils.ts        # 유틸리티 함수  └── tab-group/          # 탭 그룹 관련 기능      ├── ...

• 계층형 아키텍처: UI, 비즈니스 로직, 데이터 접근 계층을 명확히 분리
• 서비스 추상화: 외부 API와의 통신을 서비스 계층으로 추상화하여 교체 용이성 확보
• 어댑터 패턴: 일렉트론 API를 추상화하여 테스트 용이성과 웹 환경 호환성 향상

• 메모이제이션 전략: React.memo, useMemo, useCallback을 활용한 체계적인 메모이제이션
• 코드 분할: 기능별 지연 로딩으로 초기 로드 시간 최소화
• 리소스 캐싱: API 응답, 이미지, 계산 결과의 효율적인 캐싱 전략 구현
• 가상 DOM 최적화: Million.js와 함께 커스텀 최적화 기법 적용

• 테스트 피라미드: 단위(50+), 통합(30+), E2E(15+) 테스트의 균형 있는 구성
• 테스트 주도 개발: 필요에 따라 핵심 기능에 TDD 적용으로 안정성 확보
• 정적 코드 분석: ESLint, TypeScript, Sonar 등을 활용한 코드 품질 보장

• 애자일 개발 프로세스
  • 1주 단위 스프린트로 진행되는 증분적 개발(목요일 차주 스프린트 확정, 금요일 금주 코드 배포)
  • 일일 스탠드업 및 주간 회고로 지속적인 프로세스 개선
• 트렁크 기반 개발
  • 기능 플래그를 활용한 지속적 통합
  • 짧은 수명의 브랜치로 안정적인 코드베이스 유지
  • PR 템플릿 및 자동화된 코드 리뷰 프로세스
• CI/CD 파이프라인
  • GitHub Actions 기반 자동화된 빌드 및 테스트
  • 환경별(개발, 프로덕션) 자동 배포
• 코드 품질 관리
  • 짝 프로그래밍으로 코드 품질 및 지식 공유 향상
  • 정기적인 코드 리팩토링 세션
  • 린터 및 포맷터를 활용한 일관된 코드 스타일 적용
• 문서화
  • 노션, Clickup을 통한 개발자 문서화
  • API 문서 자동화 도구로 최신 문서 유지
• 성능 및 사용자 경험 최적화
  • Core Web Vitals 모니터링 시스템 구축
  • 퍼포먼스 버짓 설정 및 정기적인 성능 점검
  • 사용자 인터뷰 분석을 통한 UX 개선

• 브라우저 기반 생산성 도구 - 느린 UI를 70% 빠르게 만들었습니다 (기적이죠?)
• 동물병원 예약 플랫폼 - AWS 비용을 80% 줄여서 대표님의 미소를 이끌어냈습니다
• RTB 시스템 - 초당 10,000개 요청 처리... 사실은 저도 이게 어떻게 된 건지 모릅니다 😅
• AR 앱 - 이걸 만들면서 정말 많이 배웠습니다 (=많이 고생했습니다)

"완벽한 코드는 없습니다. 그저 마감 시간에 맞추어 동작하는 코드가 있을 뿐..."

PinnedLoading

1. indx.krindx.krPublic

   인덱스 블로그

   TypeScript