React Korea Meet Up

리액트 10주년을 맞이하여 열린, 리액트 코리아 밋업에 참여했다.
주제가 다 재밌어보이기도 했고, 선착순 50명이라길래 일단 신청했는데 다행히 50명 안에 들어서 재밌게 듣고 왔다.

Next.js App Router 삽질기

• Next.js App Router 카나리아 버전의 온갖 버그를 몸으로 맞아가며 삽질한 이준혁(미리야)님의 발표
  • 카나리아 버전을 시도했다는 것만으로도 대단한데, 이걸로 몇 가지나 되는 프로젝트를 만들었다는 것도 신기하다. 난 지금 사이드 프로젝트 하나도 제대로 못하고 있는데… 시무룩
• 만들어진 서비스를 잘 가져다 쓰는 것만도 나에겐 가끔 챌린지이기 때문에, 공식문서 또는 릴리즈된 버전(카나리아라 할지라도)은 거의 완벽에 가까운 완전무결의 영역일거라 생각했는데, 이렇게 얼탱이 없는 버그들이라니…!? 떼잉 쯧
• 자신의 과거 코드를 비롯해서 모두까기 시전하는 발표라서 재밌게 들었다.
• 결론: Next는 메타태그만 쓰면서 CSR로 사용하는 것을 추천. App Router 써보는 것도 좋지만 쓰다가 뭔가 아니다 싶으면 Page Router로 가면 된다.
• 여기 miriya님의 블로그에 발표 내용과 자료가 그대로 남겨져있다.

프론트엔드를 프로덕션에서 디버깅하는 방법

• 써드파티 만드는 개발자 김태곤님이 이미 uglify 된 프론트엔드 프로덕션 코드에서 디버깅을 해야만 하는 경우의 꿀팁을 전수해 주었다.
• 요약하자면…
  • 콘솔의 에러메시지를 확인한다.
    • 그러나 jQuery는 자기가 만들지 않은 모든 에러를 자기가 소화해버린다.
  • 번들링할 때, 함수이름이나 문자열은 임의로 minify하지 않으므로 문제가 있는 부분의 문자열 검색을 통해 진입점을 찾는다.
    • 한국어는 유니코드로 인코딩되는 경우도 있는데, 콘솔에 부어주면 된다.
  • 디버거를 통해 문제가 되는 부분을 탐지한다.
  • 관련 있어 보이는 이벤트 핸들러를 모조리 제거해본다. (개발자도구 Event Listener 탭)
  • 실행되는 파일을 내 로컬 파일로 교체해서, 프로덕션에서 로컬 파일을 실행해 보면서 문제되는 부분을 찾는다.
    • MITMProxy(Man In The Middle): 프로덕션의 JS 파일을 내 로컬에 있는 파일로 교체하여 실행할 수 있는 툴인데 브라우저보다는 모바일 디버깅 할 때 유용하다고 한다.
    • 프로덕션 환경에서 개발환경에서만 사용할 수 있는 확장기능 등을 내 로컬 config로 적용해볼 수 있다.
• 프로덕션에서 디버깅을 해야만 했던 애환을 고스란히 느낄 수 있었고, 그러나 결국 방법을 찾아내는 대단한 분이라는 생각이 들었다.

느낀 점

• 작고 소소했지만 재밌는 밋업이었다. 발표자들과 일부 참여자들이 서로 친하고 신뢰하는 관계라 그런지 발표도 편안한 분위기에서 진행되었고, 준비하는게 쉽지 않았을텐데 이런 커뮤니티 운영하는 사람들은 대단한 것 같다.
• 리액트의 장점은 “쪽수”다 라는 말이 기억에 남는다.