어떤 주제로 블로그를 써볼까 고민하다가, 요즘 프론트엔드 개발을 하면서 거의 매일같이 쓰고 있는 Tailwind CSS에 대한 이야기를 해보면 좋겠다고 생각했습니다. 최근에 새로운 버전이 나왔다는 소식을 듣고, 기존에 사용하던 방식과 무엇이, 그리고 ‘왜’ 달라졌는지 궁금해졌습니다. 솔직히 이전 버전도 충분히 만족하며 사용하고 있었기에 큰 필요성을 느끼진 못했지만, 새로운 기술이 어떤 경험을 줄 수 있을지 호기심이 생겼습니다. 이번 글에서는 제가 이전에 사용하던 Tailwind CSS와 새로운 버전이 어떻게 다른지, 그리고 그 변화가 개발 경험에 어떤 영향을 미쳤는지에 대한 개인적인 경험을 공유해 보려 합니다. ...

클로저, 단순한 개념 얼마 전 면접에서 클로저의 개념에 대해 질문을 받았다. 프론트엔드 면접에서 단골로 나오는 질문 중 하나지만, 단순히 암기할 개념은 아니라고 생각한다. 질문 자체는 간단해 보이지만, 면접관의 의도를 생각해보면 실제로는 자바스크립트의 실행 컨텍스트, 스코프 체인, 메모리 구조에 대한 이해까지 확인하려는 질문인 경우가 많다. 클로저는 자바스크립트의 실행 컨텍스트와 메모리 관리를 이해하는 데 있어 핵심적인 역할을 한다. 어느 정도 개념은 알고 있었지만, 이번 기회에 클로저가 어떤 구조를 기반으로 동작하고, 실제 코드에서 어떤 이슈를 만들 수 있는지를 구조적으로 정리해보고 싶다. ...

항해 프론트엔드 코스를 마치며, 지난 시간을 기록하고 회고해보고자 합니다. 이 과정에서 나 라는 개발자가 어떤 생각을 가지고 시간을 보냈는지, 그리고 앞으로는 어떤 방향으로 나아가고 싶은지를 돌아보는 글입니다. 이 글은 어떠한 교육기관을 홍보하기 위한 글이 아닌, 단지 개발자로서 나 자신을 돌아보고, 기록하기 위한 개인적인 회고 입니다. 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 연결, 어떻게 진단했을까? ...