클로저, 단순한 개념 얼마 전 면접에서 클로저의 개념에 대해 질문을 받았다. 프론트엔드 면접에서 단골로 나오는 질문 중 하나지만, 단순히 암기할 개념은 아니라고 생각한다. 질문 자체는 간단해 보이지만, 면접관의 의도를 생각해보면 실제로는 자바스크립트의 실행 컨텍스트, 스코프 체인, 메모리 구조에 대한 이해까지 확인하려는 질문인 경우가 많다. 클로저는 자바스크립트의 실행 컨텍스트와 메모리 관리를 이해하는 데 있어 핵심적인 역할을 한다. 어느 정도 개념은 알고 있었지만, 이번 기회에 클로저가 어떤 구조를 기반으로 동작하고, 실제 코드에서 어떤 이슈를 만들 수 있는지를 구조적으로 정리해보고 싶다. ...
항해 프론트엔드 코스를 마치며, 지난 시간을 기록하고 회고해보고자 합니다. 이 과정에서 나 라는 개발자가 어떤 생각을 가지고 시간을 보냈는지, 그리고 앞으로는 어떤 방향으로 나아가고 싶은지를 돌아보는 글입니다. 이 글은 어떠한 교육기관을 홍보하기 위한 글이 아닌, 단지 개발자로서 나 자신을 돌아보고, 기록하기 위한 개인적인 회고 입니다. 1. 항해를 시작할 당시의 나 1-1. 작년, 흔들렸던 시간 작년은 여러모로 쉽지 않은 시기였다. 전반적인 채용 시장 분위기도 좋지 않았을뿐더러, 그 와중에 간절히 원하던 곳의 면접에서는 결국 고배를 마시기도 했다. ...
react-virtualized를 적용하며 성능 개선한 내용을 정리해보려고 한다. 단순히 가상화 리스트를 도입한 것에서 그치지 않고, Chrome 개발자 도구를 통해 메모리 구조와 GC 작동 방식까지 추적하며 성능 최적화가 실제로 어떤 효과를 가져오는지를 직접 비교해봤습니다. 대용량 리스트 렌더링, 문제는 성능과 메모리였다 프로젝트에서 최대 10만개에 이르는 오디오 스크립트 데이터를 한 번에 보여줘야 했습니다.. 레거시 프로젝트에선 단순히 .map()을 통해 리스트를 출력하는 방식으로 개발 되었었지만, 예상대로 다음과 같은 문제가 있었다. 스크롤 시 끊김 현상 발생 DevTools의 JavasScript Heap 메모리 지속 증가 사용자 경험(UX) 저하 이런 상황이 존재하여 성능 최적화 및 리스트 가상화 도입을 하게 되었다. ...
실시간 영상 통신을 안정적으로 서비스하는 것은 생각보다 복잡했습니다. 특히 네트워크 환경이 불안정한 해외 사용자를 대상으로 할 경우, 그 어려움은 더 커집니다. 이번 글에서는 기존 WebRTC 기반 1:1 연결 구조에서 Agora RTC SDK로 전환하게 된 계기와, 그 과정에서 네트워크 품질 측정과 Agora 구조를 소개하고자 합니다. 왜 Agora SDK 였을까? 기존 WebRTC 기반 연결 구조는 다음과 같은 문제점을 가지고 있었습니다. STUN/TURN 서버 인프라 구축 비용 증가 해외 네트워크 접속 불안정 연결 전 품질 측정의 어려움 👉 이전 글: 해외 사용자 대상 WebRTC 연결, 어떻게 진단했을까? ...
React Native 기반 앱 프로젝트를 운영하면서, Store 심사 지연으로 인해 Hotfix 배포나 간단한 UI 수정조차 수일 이상 소요되는 일이 잦았습니다. 특히, 사용자(근로자)에게 주일 마다 피드백을 받아오는 상황에서 잦은 빈도로 업데이트되던 서비스였기 때문에, 이런 병목은 전체 업데이트 일정에 큰 영향을 끼쳤습니다. 이러한 문제를 해결하기 위해 CodePush 기반의 무중단 배포 환경을 구축했습니다. 왜 CodePush를 도입했는가 Microsoft에서 제공하는 CodePush는 React Native 앱의 JS 번들만 OTA(Over-the-Air) 방식으로 배포할 수 있도록 해주는 서비스입니다. 앱을 재설치하거나 스토어 심사를 거치지 않고도 즉각적인 업데이트가 가능한 구조입니다. ...