미리보기

OAuth를 활용한 소셜 로그인 구현 (애플, 카카오 로그인)

MVVM-C 아키텍처 도입

• 테스트 가능한 코드 작성을 위해 클린 아키텍처 도입을 결정하였으며 전체 코드 리팩토링을 진행하였습니다.

• Domain 계층에 유스케이스 프로토콜 & 클래스 구현

• Data 계층에 레파지토리 프로토콜 & 클래스 구현

• 뷰모델을 프로토콜로 정의하여 Presentation계층에서는 실제 구현체를 작성하고 테스트 코드에서는 목업 클래스를 작성하도록 아키텍처 설계

• UIPageViewController 델리게이트 함수 호출 시 코디네이터 클래스의 화면 관리 메서드가 호출되도록 구조 설계

• 유스케이스, 뷰모델 테스트 코드 작성 및 코드 커버리지 100% 달성 (테스트 코드 라인 수 4,600라인)

Kingfisher 코드가 사용된 뷰 테스트 환경 구축

• 캐시 미스 발생시 Kingfisher는 네트워크를 통한 이미지 다운로드를 자동으로 진행하는데, 외부 환경에 독립적이어야 하는 테스트 코드 규칙에 위반됨

• Swift의 URLProtocol을 채택한 목업 URL 프로토콜 클래스를 Kingfisher ImageDownloader에 주입

• 테스트 환경에서 프로젝트 로컬 디렉토리에 저장되어 있는 이미지를 반환하게 되어 테스트 환경 구축 완료

Kingfisher 라이브러리 성능 테스트

• Kingfisher 라이브러리를 써야 하는 근거를 정리하기 위해 정량적인 데이터를 추출 및 정리하였습니다.

• 캐시 미스 시 네트워크를 통한 S3 버킷 이미지 다운로드 소요시간과 디스크 캐시 히트 & 메모리 캐시 히트 시간 추출 및 비교

  • 캐시 미스 이후 컨텐츠 다운로드 소요 시간 측정을 위해 Wireshark를 활용하여 내부 패킷 정보 확인

  • 암호화된 패킷 정보로 인해 Charles Proxy 툴을 활용하여 로컬 호스트 맥북을 Proxy 서버로 활용

  • Charles CA 자체 인증서 설치 및 신뢰를 통해 내부 패킷 정보 복호화

  • Charles SSL Proxy 기능을 통해 이미지 다운로드 소요 시간 및 네트워크 속도를 추출하여 캐시 히트시 데이터 액세스에 소요되는 시간과 비교 (Swift의 ContinuousClock API 활용, 시스템 시간 측정)

  • 메모리 캐시 < 디스크 캐시 < 캐시 미스 순서로 소요 시간이 느린 것을 확인하였으며, 킹피셔 라이브러리 코드가 정상적으로 동작함을 확인

  • 디스크 캐시와 메모리 캐시의 경우 소수점 0.01 이하의 접근 시간 차이가 발생하여, 포즈피드 기능에는 메모리 캐시가 아닌 디스크 캐시를 적용하기로 결정 (메모리 부하 문제 고려)

UX 개선

• 페이지네이션이 적용된 데이터 UI 바인딩 구조 개선

• 개선 전: 페이지네이션 8개 데이터의 S3 버킷 이미지 전체 다운로드가 완료될 때 까지 로딩 → 다운로드 소요 시간이 가장 긴 이미지에 의존적인 구조

• 개선 후: JSON 데이터 로드 이후로는 이미지 다운로드 태스크를 각 셀에서 독립적으로 진행하도록 구조 개선

  • 각 셀에 imageURL 값을 갖는 BehaviorRelay를 구독한 뒤 캐시 접근 진행

  • 캐시 미스 시 Kingfisher 이미지 다운로드 태스크 생성

  • prepareForReuse 호출 시 이미지 다운로드 태스크를 취소하여 잘못된 이미지 UI 바인딩 문제 해결

  • 구조 개선 후 데이터가 병렬적으로 요청되어 체감 로딩시간이 JSON 문자열 데이터 디코딩까지 소요되는 수준으로 개선되었음

HTTP Multipart 통신 구현

• 이미지 크기 문제로 인해 Base64 데이터 전달 불가

• Alamofire MultipartFormData 클래스를 활용하여 멀티파트 통신 구현

CGAffineTransform API를 활용하여 이미지 확대 및 축소 기능 구현

OAuth를 활용한 소셜 로그인 구현 (애플, 카카오 로그인)

RxSwift를 활용한 401에러 중복 처리 문제 해결

• 경쟁 상황으로 인해 401 ExpiredJwtException서버 에러 처리가 중복으로 이루어짐

• 불필요한 리프레시 토큰 재발급 방지를 위해 토큰 리프레시 여부를 옵저버블로 생성하여 구독 후 대기하도록 APIRouter 클래스 구현

• 타입 속성과 옵저버블을 활용하여 Mutex 자체 로직 구현 후 JWT 토큰 동기화 처리

• 이슈 해결 후 해결과정 Swift Forum에 게시 (링크)

Alamofire 활용, 인프라 계층 네트워크 전체 세팅

• RequestInterceptor 활용하여 인증 로직에 필요한 토큰 HTTP 통신 헤더에 삽입

MVVM-C 아키텍쳐 적용

디자이너 1, 백엔드 2, iOS 2 협업

• 코드리뷰 및 SwiftLint 활용 코드 컨벤션 경험

멋쟁이 사자처럼 웹 프론트엔드 멤버 및 운영진 활동

• Git 기초 세션 기획 및 강의

• 웹 프론트엔드 기초 강의

DND 동아리 7기, 9기 활동

• 7기 - React Native 활용 경험

• 9기 - 마일스톤 & 포즈피커 iOS 앱 프로젝트 출시 경험

고등학생 소프트웨어 멘토링 활동

HTML, CSS, JavaScript 기초 내용 기획 및 강의

학생 축제 홍보페이지 프로젝트 제작 멘토링

Git 활용 오픈소스 컨트리뷰션 활동

Cracking Vue.js ES6 Promise 문서화

문서화 리뷰 경험