2024 WOOWACON

올해도 열린 WOOWACON.
작년에는 광탈이었지만 팀장님께서 양도해주셔서 잘 다녀왔었습니다만...
올해는 운이 좋게도 당첨 되어 다녀왔습니다👍

저는 프론트 개발자니까 프론트 개발에 대한 발표만 들었고 들었던 내용을 간단하게 정리해봤습니다.
다른 회사의 개발자의 고민과 어떻게 해결했는지에 대해 알 수 있어서 좋은 경험이었습니다.
그리고 내년에 또 가고 싶네요😃

1. 오프닝

AI 관련

• 리뷰 관리: 개인정보/부적절 정보 필터링
• 이미지 처리: 음식 사진 리사이징/크롭
• 멀티모달 검색: 정확한 음식 이미지 검색
• mandao: 피그마+백엔드 설계+프론트 테스트를 모두 볼 수 있는 도구

2. Module Federation Platform 구축

• Module Federation?
  • 각각 독립적으로 배포 가능한 Module을 브라우저 런타임에서 동적으로 로드하고 통합하여 하나의 프로덕트로서 동작하게 만드는 기술
  • Micro-Frontend Architecture를 구축하는 방법 중 하나

MF 1.0에서 2.0으로의 발전

• 장점
  • 유연한 합병 및 분리
    • 애매한 도메인도 Module 별로 명확하게 분리 가능
    • 조직개편 영향도 최소화 가능
  • 커뮤니티 성장
• 단점
  • 초기 러닝커브
    • 내부 동적 메커니즘 학습 필요
    • Module 단위의 새로운 협업 체계 전파 필요
    • 커뮤니케이션 비용 증가
  • 불확실성
    • 대규모 적용 사례 부족
• 도입 후 얻게된 것
  • 적은 노력으로 통일된 사용성 보장
  • 새로운 방식의 코드 공통화
  • 독립적인 업무 방식 보장
  • 성능 개선
• 문제점
  • Host 간 Remote 의존성
  • 불안정한 타입스크립트 지원
  • 로컬 테스트 어려움
  • remoteEntry.js 파일 형식 문제

MF 2.0 주요 개선사항:

• Federation Runtime: webpack 커플링 완화
• Manifest Protocol: JSON 파일 지원
• Type Hint: 동적 모듈 로드 개선
• DevTools: 시각화 및 프록시 기능 추가

3. 우아한공방 코어시스템

• 계층형 디자인 시스템
  • Core → Clay → Mold
  • Base Component 기능과 형태를 구분하여 관심사의 분리 적용(headless ui)
• 주요 특징:
  • 체계적인 의사결정 기준 확립
  • 컴포넌트 검증 기준 수립
  • 약속된 컴포넌트 디자인 규격을 생성하여 선언적인 UI 적용

4. 웹 프론트엔드 통합테스트

테스트 레벨

1. 단위 테스트: 개별 모듈/컴포넌트 검증
2. 통합 테스트: 모듈 간 상호작용 검증
3. E2E 테스트: 전체 시나리오 검증

단위 테스트 코드 작성 시 발생할 수 있는 문제점

1. 모듈의 연동 과정에서 문제가 발생 할 수 있다.
2. 서버 상태, 클라이언트 상태 파악 어려움
3. 코드 수정에 따른 영향 범위를 충분히 파악하기 어렵다.

통합 테스트를 작성하면 위의 문제점 해결 가능

MSW(Mock Service Worker) 활용

• API 응답 모킹
• 다양한 서버 상태 테스트 가능
• 코드 수정 영향 범위 파악 용이

결론

• 단위 테스트는 빠르고 안정적이지만 검증할 수 없는 영역이 존재한다.
• 통합 테스트는 모듈 간의 상호작용과 사용자가 겪는 다양한 시나리오 검증한다.
• 테스트 수준의 적절한 분리를 통해 수준별 장점을 최대한 활용 할 수 있다.
• 테스트의 궁극적인 목표는 서비스의 안정성

5. 우아한플레이그라운드

• 우아한플레이그라운드?
  • 프론트엔드에서 많이 사용하는 CodeSandbox와 같은 기능이지만 사내에서 직접 개발한 디자인 시스템을 적용할 수 있는 차이가 있음
• 목적: 디자인 시스템 문서의 실시간 코드 실행 환경 제공
• 제작 배경(공통 컴포넌트 사용법을 찾아)
  • 문서 사이트 해석
  • 스토리북
  • 코드 베이스
• 주요 기능:
  • monaco-editor 기반 편집기
  • 프리뷰 - iframe
  • TypeScript/JSX 지원
  • npm 라이브러리 실시간 로드

6. React Native 네이티브 모듈 활용

• 네이티브 모듈의 필요성
  • React Native만으로 구현 불가능한 기능 구현
  • OS별(AOS, iOS) 고유 기능 활용
• 실제 적용 사례
  • 지도 컴포넌트
  • Android 알림 채널
• 개발 접근 방식
  1. 네이티브 모듈 직접 개발
  2. 라이브러리 코드 패치
  3. 기존 기능 내에서 해결