Dev_R

때는 랜선동네모임 프로덕트를 개발할 때 였다. React 기반 프로덕트에서 어떤 버튼을 클릭했을 때, 서버에 data update를 요청하고 정상적으로 반영 되었을 경우 새 창을 띄우는 스펙이 있었다. 해당 스펙의 구현을 위해 크게 고민할 부분이 없어보였고, 바로 구현을 시작했다. 그렇게 개발을 끝내고 테스팅을 진행하는데 Android에서는 정상적으로 동작했지만 iOS에서는 정상적으로 동작하지 않는 크로스 브라우징 이슈가 있었다. 디버깅을 진행해 보니 Axios fetching은 정상적으로 되었지만, 새창이 띄워지지 않는 이슈가 있었고 해결하기 위해 이것저것을 시도해봤지만 쉽게 해결되지 않았다. 그러다 구글링을 통해 이유를 알게 되었는데, iOS의 경우 사용자의 action에 의해서만 새창이 열리도록 되..

React 기반 프로덕트를 개발하면서 성능에 대해서는 많이 신경쓰지 못했지만, 어느 순간부터 로딩타임이 긴것 같다는 느낌이 들었다. 그래서 chrome network 탭을 확인해보니 현재 네트워크 탭에 찍히는 main.js는 5mb가 넘었다. 번들링 사이즈가 꽤 큰 것 같아서 이 부분에 대한 수정을 진행했다. 기존 번들 사이즈 (번들 사이즈에 대한 설명) stat: 4.41 mb | 최적화되기 전 코드의 번들 사이즈. parsed: 1.96mb | minimize된 파일 사이즈다. 브라우저에서 파싱된 자바스크립트 코드의 사이즈. gzip: 527kb | minimize와 gzip을 거친 후의 사이즈. 네트워크에서 로드될 때의 사이즈. 1. BundleAnalyzerPlugin 를 이용한 번들파일 분석 처..

앞에서 "안드로이드 모바일 웹뷰를 디버깅하는 방법" 글을 작성했는데, 이번에는 iOS​ 웹뷰를 디버깅 하는 방법에 대해 작성하려 한다. 이번에는 네트워크 디버깅과, 시뮬레이터/기기 웹뷰 디버깅 이 두 가지에 대해 공유하려 한다. | iOS 네트워크 디버깅 우선 아이폰은 안드로이드와 같은 방법으로 디버깅이 불가능한데, 다른 방법을 찾다가 mitmproxy를 통해 가능하다는 이야기를 듣게 되었다. 이름에서도 알 수 있듯 Man in the middle attack으로 네트워크 트래픽을 가로채 보여주는 것 같다. 학교에서 보안 강의를 정말 열심히 들은 건 아니지만(?) 기억이 나서 반가웠다.ㅎㅎ 아무튼 mitmproxy 관련한 정보를 찾아보니 아웃사이더님이 잘 정리해두신 글을 찾을 수 있어 직접 적는 것보다 ..

지금까지 나는... 개발을 하며 사용한 디버깅 툴은 크롬 개발자도구 뿐이었다. webview에 띄울 웹서비스 개발을 해본적은 있지만 모바일과 PC 로컬 개발 환경에 큰 차이가 없었고 크롬 개발자 도구에서의 디버깅으로 충분했었다. 그런데 이번 프로젝트에서는 기존 하이브리드앱 내부 웹뷰로 배포되어지는 서비스이다 보니 로컬PC에서 개발을 마친 후 디바이스에서도 테스트가 필요했는데... 그 과정에서 한 가지 버그를 발견했다. 분명 로컬에서는 잘 되는데 모바일에선 왜 안될까? 테스트 중 발견한 버그. PC 로컬에서는 "관악구" 이웃과 라고 지역이름이 잘 나오는데 모바일 환경에서는 이웃과 라고 렌더링 되어졌다.... 뭐 때문인지 로그를 확인하고 싶은데 모바일에서 콘솔 로그를 확인 할 수는 없을까?? 하며 답답해 하..