if kakao 2020 - FE 개발 서바이벌 키트

해당 내용은 if kakao 2020에서 봤던 내용을 정리하는 글입니다.

---

우리가 만드는 서비스들의 타겟 환경은 굉장히 많습니다. 또한 FE 개발자들이 자주 언급하고 사용하는 기술이 많습니다.

 

이러한 다양한 상황 속에서 많은 이슈들이 발생할 수 있습니다.

 

이러한 환경에 상관없이 언제나 효율성 높은 디버깅을 하는 것이 중요합니다.

 

개발자 도구를 잘 사용하면 도움을 많이 받을 수 있습니다.

---

카카오 톡 내부에는 인앱 웹뷰가 있습니다. 어디서나 쓸 수 있어서 공통 플러그인이라 불립니다.

 

자연스러운 UX이기에 많은 사랑을 받고 있습니다. 이런 상황에서도 개발자 도구로 디버깅을 할 수 있습니다.

 

모바일 환경에서 디버깅이 필요할 때, 약간의 환경을 설정해주면 USB를 연결하면 PC에서 환경을 파악하며 디버깅을 할 수 있습니다. 이를 리모트 디버깅(remote debuggin)이라 합니다.

 

허나 iOS의 경우엔 인앱 웹뷰 환경일 땐 직접 빌드하지 않으면 사파리 개발자 도구 사용을 불가하며, 인앱 웹뷰에서 앱 통신 구간에서 발생하는 이슈는 확인이 어렵습니다.

 

예를 들어보면, 유저 정보를 읽고 가입이 안된 유저면 서버에선 회원가입 플러그인을 건네주며, 이를 앱에서 띄워줍니다. 그러고 약관동의를 받아 서버를 호출하면, 결제 플러그인을 응답으로 줍니다. 응답 받은 결제 플러그인을 앱에서 띄워주며, 해당 웹뷰에서 결제까지 정상적으로 처리되면 완료되는 플로우입니다.

이런식입니다.

그런데 앱에 메시지를 전달하는 부분은 처리 결과를 받을 수 없었는데, 연결되는 플러그인이 뜨지 않는다. 유저의 액션에 대한 로그가 정상적으로 들어오지 않는다 등 문제가 있으면, 서버, 앱, FE 개발자끼리 확인 과정이 필요했습니다.

 

그래서 다른 방법을 추가하게 됩니다.

 

iOS 인앱 웹뷰 디버깅을 하려면 다음과 같은 방법이 있습니다.

 

개발자 인증서 없이 시뮬레이터에 빌드하는 방법이 있습니다. 앱 프로젝트의 저장소 접근 권한과 패키지 설치에 약간의 도움을 받으면 가능합니다.

 

카카오 에서는 깃허브를 깃허브에서 하기 때문에, 이를 클론하고, package를 설치하고, xcode에서 디바이스를 타겟 디바이스를 한 다음 시뮬레이터를 잡아줍니다.

 

이렇게 되면 인앱 웹뷰를 사용할 수 있으며, 서버 응답 확인 및 웹의 메세지 전달 확인을 할 수 있습니다. 그런데 앱에 메세지가 잘 도달하는지도 확인을 해야하기 때문에, 이는 xcode 콘솔을 통해 할 수 있습니다.

 

해당 고민이 있으면 위의 디버깅 방법을 해보는 것이 추천됩니다.

 

1. 웹뷰에 진입하기까지 별도의 세팅 작업이 너무 번거롭게 느껴진다.

2. iOS 인앱 웹뷰를 웹뷰 컨테이너에 들어있는 상태로 디버깅해보고 싶다.

3. 이슈 파악에 소요되는 커뮤니케이션 시간을 줄여보고 싶다.

---

카카오 지도에서도 개발자 도구로 디버깅을 한 경험이 있습니다.

 

장소 검색, 길찾기, 로드뷰, 노선도, 장소 제보 등 다양한 기능이 있는데, 그만큼 코드의 양이 많습니다.

 

그래서 모든 기능, 모든 코드를 파악하는데엔 어렵습니다.

 

그런데 즐겨찾기 마커를 노출을 더 많이 노출시키고 싶다고 의뢰를 받았다고 예를 들어 봅시다.

 

마커를 노출을 늘리니까, 걸리는 시간이 너무 느렸습니다.

 

해당 문제는 아래와 같습니다.

 

- 마커는 지도 위의 위치를 표시해주며 줌레벨에 따른 우선순위를 기반으로 최적화를 한다.

- 유저가 즐겨찾기한 장소는 마커로 표시될 수 있다. + 즐겨찾기 기능의 컨트롤러 파일명, 해당 코드는 3000여줄

 

=> 원인 모르는 성능 저하 이슈, 어디서부터 봐야할까요?

 

병목되는 코드를 찾기 위해서 다 보기엔 의심 부분을 찾기엔 너무나도 많은 시간이 걸립니다. 그렇기에 문제가 되는 부분을 통해서 역추적을 하는 방법을 사용하는 것이 좋습니다.

 

크롬 개발자 모드에서 Performance 탭을 사용합니다. third party 프로그램이 영향을 끼칠 수 있기 때문에, secret mode로 실행을 해야합니다.

 

레코드 버튼을 눌러서 시작부터 즐겨찾기 마커가 그려지는 시간을 기다려 봅시다. 힙메모리 영역도 확인이 가능합니다.

 

힙 메모리에서 비효율화가 발생이 되는데, 힙 메모리가 많이 사용되는 순간 마다 GC가 실행되고, GC가 수행되는 동안 어플리케이션이 정지가 될 수 있습니다. 어찌됐건 메모리가 늘어나는 구간은 메모리 누수가 일어나고 있다는 뜻입니다.

 

해당 메모리 누수가 일어났던 이유는 메모리 탭에서 확인이 가능합니다. 해당 기능은 Gmail 개발자들이 만든 기능입니다. 3 snapshot technique이 있는데, 이를 이용해서 문제를 파악했습니다.

 

해당 문제가 일어났던 이유는 사용하지 않는 객체를 참조하고 있는 경우가 있었기 때문에 발생한 문제였습니다.

 

클로저를 사용해서 즐겨찾기 객체를 참조로 물고 있었던 코드가 있었습니다. 이런 경우 GC로 소거가 되지 않습니다. 이런 경우 메모리가 쓸데없이 많이 쓰이겠죠.

 

메소드의 수행시간이 많이 소요되던 이슈도 존재했는데, 반복문 내에서 무거운 작업을 수행하는 메소드를 비동기로 수행하도록 변경하면서 해결했습니다.

 

만약 코드를 보면서 해당 문제를 파악하려했다면, 아래와 같은 악순환이 반복됩니다.

 

하지만 문제 우선 진단을 통해선 아래와 같이 효율적으로 디버깅이 가능합니다.

---

이상 if kakao 2020 - FE 개발 서바이벌 키트였습니다.