미리보기

• 서비스 UI/UX 개선 및 성능 최적화 주도: 사용자 경험 향상을 위한 인터랙션 개선, 로딩 속도 개선, 번들 사이즈 최적화 등 다양한 성능 개선 작업 수행

• 어드민 페이지 개발 및 유지보수: 운영팀의 효율적인 업무 지원을 위한 어드민 도구 개발

• 재사용 가능한 컴포넌트 라이브러리 구축: 코드 중복 제거 및 개발 생산성 향상을 위한 공통 컴포넌트 설계 및 개발

• 글로벌 서비스 확장 지원: Angular i18n을 이용한 다국어 지원 및 글로벌 사용자 경험 향상

🎡 Carousel UI 개발

• 목표: TOP 페이지 강좌 증가에 따른 사용자 경험 개선 및 효율적인 콘텐츠 노출

• 기술 스택: Angular, RxJS, Angular Signal

• 구현 내용 및 기술적 고려사항:

  • 반응형 디자인: 다양한 viewport 크기에 대응하기 위해 Angular BreakpointObserver 및 Flexbox 레이아웃 활용.

  • RxJS 기반 선언적 상태 관리:

    • Observable 및 Operator를 활용하여 데이터 흐름을 선언적으로 정의, 복잡한 비동기 로직 (사용자 인터랙션, 외부 API 데이터 로딩)을 간결하게 처리.

    • debounceTime, throttleTime Operator를 활용, 잦은 이벤트 발생 시 성능 저하 방지.

    • Signal()을 사용하여 불필요한 변화 감지 최소화

  • Skeleton UI 적용:

    • 콘텐츠 로딩 중 레이아웃 변경 최소화.

    • 실제 콘텐츠와 유사한 Skeleton UI로 사용자 인지 성능 향상.

• 기술 선택 이유 (RxJS, Angular Signal): 복잡한 비동기 처리, 선언적 데이터 흐름 표현, 뛰어난 에러 핸들링을 위해 RxJS를 선택.

📚 어드민 AWS S3 파일 매니저 개발

• 목표: CDN 및 S3 버킷 파일 관리 효율화 및 운영팀의 파일 관리 자동화

• 기술 스택: Angular, RxJS, AWS S3, Angular Material

• 구현 내용 및 기술적 고려사항:

  • S3 통합 파일 관리 시스템:

    • S3 버킷 통합 파일 관리 인터페이스 구현

    • BehaviorSubject를 활용한 상태 관리로 실시간 파일 목록 동기화

    • URL 쿼리 파라미터 기반 라우팅으로 폴더 탐색 히스토리 유지

  • 파일 작업 기능 구현:

    • 파일 업로드/삭제 기능 구현 및 권한 관리

    • S3 URI 및 CDN URL 자동 생성 및 클립보드 복사 기능

    • 파일 크기의 KB 단위 변환 및 파일 확장자 추출 유틸리티 구현

  • 사용자 경험 개선:

    • Breadcrumb 네비게이션으로 직관적인 폴더 구조 탐색

    • Angular Material 컴포넌트를 활용한 UI/UX 구현

    • 로딩 상태 및 에러 처리를 통한 안정적인 사용자 경험 제공

  • 코드 품질 및 유지보수성:

    • Standalone 컴포넌트 아키텍처 적용으로 모듈 의존성 최소화

    • RxJS의 finalize 연산자를 활용한 리소스 정리 및 메모리 누수 방지

    • 타입 안정성을 위한 인터페이스 정의 및 엄격한 타입 체크

  • 결과:

    • 운영팀의 파일 관리 시간 단축 및 실수 방지

    • S3 저장소 관리의 통합으로 운영 효율성 증대

🎨 사용자 테마 설정 시스템 개발

• 목표: 다크 테마 외 다양한 테마 지원을 통한 사용자 개인화 및 만족도 향상

• 기술 스택: Angular, RxJS, LocalStorage

• 구현 내용 및 기술적 고려사항:

  • RxJS (BehaviorSubject) 기반 전역 테마 상태 관리:

    • BehaviorSubject를 사용하여 초기 테마 값을 설정하고, 구독 시 항상 최신 테마 값을 받을 수 있도록 구현.

    • Angular Service를 통해 테마 상태를 전역적으로 공유, 여러 컴포넌트에서 테마 변경 감지 및 반응.

  • LocalStorage를 이용한 테마 설정 지속화:

    • JSON.stringify(), JSON.parse()를 사용하여 데이터 타입 유지하며 테마 설정 저장/불러오기.

    • LocalStorage는 클라이언트 측 저장소이므로, 민감한 정보 저장 방지.

  • 접근성 고려한 테마 설정 인터페이스: 테마 변경 인터페이스의 색상 대비, 키보드 접근성 등을 고려하여 모든 사용자가 쉽게 테마 변경 가능하도록 구현.

• 기술 선택 이유 (RxJS, LocalStorage): RxJS는 전역 테마 상태 관리 및 컴포넌트 간 상태 공유를 간편하게 구현하기 위해, LocalStorage는 사용자 테마 설정을 브라우저에 지속적으로 저장하기 위해 사용.

📚 어드민 수강 관리 페이지 개발

• 목표: 운영팀의 수작업 데이터 처리 개선 및 업무 효율성 증대

• 기술 스택: Angular, RxJS, (@angular/forms, Angular Material)

• 구현 내용 및 기술적 고려사항:

  • 데이터 수정 기능: 운영팀이 직접 데이터 수정 가능하도록 기능 개발하여 개발팀 의존도 감소.

  • RxJS 기반 무한 스크롤 구현:

    • fromEvent(), throttleTime(), pairwise() Operator를 활용하여 무한 스크롤 구현 및 성능 최적화.

    • 데이터 요청 최적화를 통해 데이터 일관성 유지 및 서버 부하 감소.

  • 폼 처리: @angular/forms를 사용하여 폼 유효성 검사, 데이터 바인딩 등 구현 (Reactive Forms).

  • UI 컴포넌트: Angular Material의 테이블 컴포넌트 등을 활용하여 UI 구성.

  • 결과: 운영팀 업무 처리 시간 단축(운영팀의 개발 요청 감소율 60% 달성).

🛠 재사용 가능한 컴포넌트 설계 및 개발

• 목표: UI 일관성 유지 및 개발 생산성 향상

• 기술 스택: Angular

• 구현 내용 및 기술적 고려사항:

  • 디자인 시스템 기반 UI 컴포넌트 라이브러리 구축: 일관된 디자인 및 사용자 경험 제공.

  • Custom Form Control 구현: Angular ControlValueAccessor 활용하여 커스텀 폼 컨트롤 개발, 재사용성 향상.

  • 컴포넌트 재사용성 및 확장성 고려한 설계: 모듈화(standalone component)를 통해 의존성 최소화.

  • 결과: 코드 중복률 감소, 개발 시간 단축.

🔑 자격 증명 관리 페이지 개발

• 목표: 복수 면허 사용자 서비스 접근성 개선

• 기술 스택: Angular, RxJS, AWS S3

• 구현 내용 및 기술적 고려사항:

  • 대표 자격 설정 기능 개발: 복수 면허 사용자의 서비스 접근 제한 문제 해결.

  • AWS S3 연동 파일 업로드/관리:

    AWS SDK를 사용하여 S3 버킷과 안전하게 연동.

  • RxJS (Observer) 활용 자격 증명 상태 관리: 자격 증명 수정 상태 및 에러를 효율적으로 관리.

📢 캠페인 및 광고 페이지 생성 시스템 개발

• 목표: 운영팀의 독립적인 캠페인 페이지 생성 지원

• 기술 스택: Angular, JSON, AWS S3

• 구현 내용 및 기술적 고려사항:

  • JSON 기반 정적 페이지 생성 시스템:

    • JSON 데이터를 기반으로 동적 컨텐츠 렌더링

    • JSON 파일 업로드를 통해 쉽게 캠페인 페이지 생성.

  • URL queryParams 활용 AWS S3 데이터 연동: 동적 콘텐츠 관리.

  • map 태그 활용 이미지 맵 구현: 이미지 특정 영역 클릭 이벤트 처리.

  • 결과: 캠페인 페이지 생성 시간 단축, 개발팀 의존도 감소.

🔍 검색 페이지 개발

• 목표: 사용자 검색 경험 개선 및 검색 정확도 향상

• 기술 스택: Angular, RxJS, Google Analytics Data API

• 구현 내용 및 기술적 고려사항:

  • RxJS finalize() 활용 검색 상태 관리: 검색 상태 (로딩, 완료, 에러)를 효율적으로 관리.

  • Google Analytics Data API 연동:

    • 사용자 검색 패턴 분석하여 검색어 트렌드, 인기 검색어 등 데이터 기반 의사 결정 지원.

동적 컨텐츠 렌더링 구현 및 컴포넌트 개발

• 유지보수 편의를 Angular의 http 클라이언트의 get method를 사용하여 JSON 파일을 가져오는 메소드를 서비스로 분리

• 타입 안정성을 위해 제네릭 타입을 사용하여 JSON 응답을 타입 변환

• 새롭게 추가되는 데이터도 대응되도록 유연한 컴포넌트 구현

i18n, l10n 지원 개발

• URL 경로를 우선적으로, 없다면 브라우저 언어 설정을 확인하여 locale 지정

• 지정된 locale에 따라 해당하는 JSON 파일 요청

• 제공된 컨텐츠의 timestamp를 인자로 받아 해당 timestamp의 유효성을 Date 객체의 parse()를 통해 판단

• 유효한 timestamp인 경우 Intl 객체의 DateTimeFormat()에 locale을 인자로 넘겨 지역화된 날짜 형식으로 변환

• Redis와 SQLite 아키텍처 비교 번역

• 파이썬 비동기는 성능 향상의 답이 아닙니다

• Python 3.13 성능 개선 관련 기술 번역

• 웹소켓으로 AWS 비용 10억을 날리고 얻은 교훈

• 비동기/대기보다 스레드가 유리한 이유