5월은 미리 보는 주 4일제처럼 휴일이 많았고 개인적인 일정이 많았던 달이었다. 업무는 4월부터 담당했던 작업들을 마무리하고 성과분석 및 발표를 진행하기도 했다. 어떤 작업들을 했는지, 4월 회고 때 하기로 마음먹었지만 어떤 건 놓쳤는지 확인해보려 한다.
🤔 4월 회고 돌아보기
4월 회고때 정리한 action item들을 정리해보면 아래와 같다.
- 화면전환 간 성능 개선을 위해 Native Stack 도입 및 성능 분석방법 찾아보기
- 에러 바운더리를 조금 더 챕터원들이 쉽게 적용하는 방법 고민해보기
- 컴포넌트 설계에 관해 공부하고 정리해보기
- UI 패턴별 최적화 정리해보기
- React 내부 코드 분석해보기
- 선언적으로 인증/인가 관리하기
이중에서 실제로 진행하면서 발생했던 시행착오들과, 하지 못했던 것들을 정리해보려 한다.
1. 화면전환 간 성능 개선을 위해 Native Stack 도입 및 성능 분석방법 찾아보기
5월은 실제로 기존 StackNavigator에서 NativeStackNavigator로 변경하는 작업을 진행했다. 기존에 stackNavigator는 JS를 통해 만들어지는 반면 NativeStackNavigator는 직접 Native 요소들을 사용하게 구현되어 있기 떄문에 기존과 다른 인터페이스들을 갖게 되었다. 달라진 인터페이스와 함께 플랫폼별로 다르게 구현되는 부분들 때문에 최대한 기존과 유사한 유저 경험을 줄 수 있게 일일이 확인하고 적용했다.
이과정에서 다양한 이슈들이 존재했는데 예로, 기존에 card와 modal 간의 이동이 자유로워 card -> m해dal -> card로 화면 전환이 자유로웠던 반면, Native 요소를 이용하면서 Modal이 Navigation의 마지막으로 노출되어야 한다는 규칙에 따라, Modal 뒤에 쌓여 보이지 않는 이슈가 있었다. 두번째로 화면전환 애니메이션 자체가 달라지거나, 애니메이션 속도가 줄어드는 등 다양한 이슈를 확인하고 대처하는 작업을 진행했다.
이슈들을 해결하고 나서 성과 분석을 위해 적용 전 제품 내 핵심 퍼널들의 화면 전환들을 비교하보기 위해 영상촬영을 진행하고, 이후 반영된 버전으로 다시 촬영하여 비교해보는 작업을 진행했다. 추가로 안드로이드만 현재 지원되지만 maestro(e2e 테스트)를 이용한 FlashLight 성능 측정을 통해 화면전환간 성능을 측정했다. 앞서 촬영했던 메인퍼널들에 대한 e2e script를 작성하고 30회 정도 반복 측정을 통해 화면전환간 성능을 측정했다.
해당 결과는 아직 분석에 시간이 필요해 6월 동안 분석하고 결과를 공유할 예정이다. 6월에는 적용과정에서의 troubleShooting과 성능측정 결과에 대한 글을 작성해보려 한다.
2. 에러 바운더리를 조금 더 챕터원들이 쉽게 적용하는 방법 고민해보기
에러 바운더리 작업을 제품 내 전체 화면들에 대한 적용을 드디어 완료했다. 지난 회고 때 고민했던 새로운 화면들이 추가되었을 때 어떻게 적용할 수 있을지 고민했던 부분을 위한 작업들도 추가로 진행했다.
먼저 현재 적용된 화면들과 적용되지 않은 화면들을 알 수 있게 ts-morph를 이용한 script 코드를 작성해 지속해서 에러바운더리가 적용되지 않은 화면들에 대해 체크할 수 있게 했다.
두 번째로는 동료분께서 주신 아이디어로, 기존 스크린 파일 생성 시 사용하는 템플릿 생성 scrip 코드에 에러바운더리를 적용하는 코드를 추가해, 새로운 화면을 생성할 때 자동으로 에러바운더리가 적용되도록 하는 작업을 진행했다. 제안 받은 당시에 늘 직접 파일을 생성하고 Navigator에 일일이 추가했었기 때문에 템플릿 생성 script에 추가할 생각을 못했는데, 함께 고민해주신 덕분에 쉽게 적용할 수 있었다.
이렇게 현재를 기준으로 한 적용 작업 뿐 아니라, 이후 새롭게 추가될 화면들을 위한 작업들도 진행해 조금 더 완성도 있게 마무리할 수 있었다. 첫 번째 적용되지 않은 화면들을 찾아낼 수 있게 하는 script는 이후 github action을 이용한 CI에 연동해 주기적으로 체크할 수 있게 발전시켜볼 예정이다.
6월에는 작업 배경, 작업 방식, 결과에 대해 글을 작성해보려 한다.
3. 컴포넌트 설계에 관해 공부하고 정리해보기
4월에 컴포넌트 설계에 관한 공부가 필요하다 느꼈던 이유는, 스쿼드 기능개발 작업을 진행하면서 여러 도메인에서 공통으로 사용하는 컴포넌트를 다루게 되었기 때문이었다.
당시 해당 컴포넌트는 1200줄이 넘는 많은 코드들이 하나의 컴포넌트에 담겨있어 한눈에 이해하기가 어려웠고, 자체적으로 API 요청하고 있기 때문에 해당 컴포넌트 밖에서 해당 데이터가 필요할 때 중복 API를 호출해서 사용해야 하는 등의 이슈를 가지고 있었다.
이러한 이슈들을 해결하기 위해서 서로 다른 도메인과 화면에서 공통으로 사용될 때,제품의 요구사항이 달라졌을 때 유연하면서 확장성 있는 컴포넌트를 만들기 위해 컴포넌트 설계를 공부했고, 이를 적용해보려 했다.
스쿼드 작업의 여유가 있을 때, 또는 퇴근 후에 리액트 컴포넌트 설계에 대한 강의와 글을 읽으면서 직접 적용하면서 작업을 진행했다. 공부하면서 다양한 컴포넌트 설계 패턴이 있다는 것을 배울 수 있었고 그중에서 compound Pattern을 이용한 headless UI를 적용해보았다.
아직 개선할 부분이 많이 남아있지만 1차적으로 작업을 완료했을 때 컴포넌트 내부 코드가 300줄 이내로 줄어들게 되었고, 보다 유연하게 요구사항들을 반영할 수 있게 수정될 수 있었다. 이부분도 이후에 조금 더 개선 작업을 추가한 뒤에 글로 작성해보려 한다.
하지 못한 UI 패턴별 최적화 정리하기, React 내부 코드 분석하기와 선언적으로 인증/인가 관리하기
UI 패턴별 최적화 정리하기와, React 내부 코드 분석하기, 선언적으로 인증/인가 관리하기는 5월에 진행하지 못했다. 스쿼드 업무를 진행하면서 조금씩 정리해보려 했지만 컴포넌트 설계를 공부하고 접목하고 싶은 마음에 해당 일감에 집중하고 우선 미루기로 했다. 대신 컴포넌트 설계 과정에서 JSX가 실제로 createElement로 컴파일되어 사용된다는 점 등을 배울 수도 있었다.
5월에는 우선순위에서 밀렸지만, 진행중이던 일감들을 마치는 대로 6월의 action item들로 실행해보려 한다.
🚀 5월에 고민을 시작한 일감 및 공부
5월은 4월에 고민했던 일감들을 진행하면서 해당 일감들로부터 파생된 일감들을 더 진행하다보니 새로운 주제들을 많이 생각하지 못했다. 대신 6월이 되면서 다음 분기에 진행하면 좋을 일감들을 현재 챕터 내에서 작성하고 있다. 6월에 진행하지는 않겠지만 7월부터 담당해서 진행하고 싶은 일감들을 아래에 정리해보려 한다.
주기적 성능 측정을 위한 CI 구축
화면전환 간 성능 개선 작업을 하면서 FlashLight와 maestro를 함께 이용하면서 e2e 테스트를 통해 주요퍼널들에 대한 성능을 측정했다. 이를 CI에 연동해 주기적으로 성능을 측정하고 결과를 버전별로 관리할 수 있다면, 조금 더 의미있게 비교해볼 수 있지 않을까 생각이 들었다. 물론 e2e 테스트 코드들을 작성해야하는 점, 현재 FlashLight는 android 기기만을 기준으로 측정하는 점 등의 이슈들이 있지만, 기준이 되는 기기에 대해 주기적으로 앱의 성능을 측정한다면 개선할 부분들을 파악하거나, 문제점들을 조금 더 빠르게 파악해 제품의 안정성에 기여할 수 있겠다는 생각이 들었다.
선언적으로 인증/인가 관리하기
4월 회고 때 작성했던 부분이지만, 현재 제품 내에서 고객/고수의 경우에만 사용 가능한 화면에서 일일이 인증/인가를 체크하는 부분이 많이 존재한다. 이를 선언적으로 관리하는 방법을 찾아보고 적용해보고 싶다. 예로 react navigation의 가이드로 Authentication flow를 도입하는 방법 등을 적용해 보고 싶다.
AsyncStorage 대체하기
현재 제품 내에서 AsyncStorage를 이용해 데이터를 저장하고 있는데, AsyncStorage는 비동기로 동작하기 때문에 데이터를 조회/삭제/변경에 느린 성능이 가지고 있다. 이에 대한 대체재로 MMKV를 도입해 보고 싶다.
여기서 어떤 작업들을 담당해서 진행할 수 있을지 모르지만, 3분기에도 계속해서 제품에 다양한 기여해나가는 일들을 진행해보고 싶다.
마치며
5월은 4월에 이은 작업들이 많았고, 하겠다 선언한 action item들을 많이 진행하지 못했던 것 같다. 하고 싶은 건 많지만, 하나의 일을 제안, 실행, 마무리하는데 까지 시간이 많이 소요되었다. 6월에는 5월에 하지 못한 일들을 더 집중해서 진행하고, 7월부터는 3분기에 진행할 일들을 미리 정리해서 더욱 더 성장할 수 있도록 노력해보려 한다.