본문 바로가기

프론트엔드24

디바운스 함수에 대하여 보통 API 콜을 처리하기 위해서 디바운스나 쓰로틀링을 처리하는 경우가 많은데 이글은 그 중 디바운스 함수에 대해서 간단히 분석하고 정리 한 내용이다. 디바운스와 쓰로틀링은 공통적으로 여러 이벤트를 묶어서 한번에 처리하는 방법이다. 그중 디바운스의 경우 사용자 이벤트를 일정한 간격으로 그룹화해서 그중 한번의 입력만을 처리하는 기법을 말하며 쓰로틀링의 경우 일정기간동안 첫 한번의 입력만 수행하고 나머지 기간동안 입력을 무시하는 기법을 말한다. 자바스크립트에서 디바운스 기능을 간단히 구현해보면 보통 이런 코드가 나온다. function debounce(func, wait) { let debounceId = null; const debounced = (...args) => { if (debounceId !==.. 2023. 3. 24.
프론트엔드 테스트에 대한 생각 요즘은 프론트엔드에서도 TDD 라는 단어가 심심치 않게 보인다. TDD 와 테스트가 동일한 뜻은 아니지만 그전에는 테스트는 커녕 기본적인 프레임워크나 라이브러리 사용법? 등에 대한 어려움?인가 웹팩 같은 번들러나 타입스크립트 같은 트랜스파일러에 대한 어려움인가? 대충 그런 수준의 어려움들이 메인이였다면 요즘에는 자동화나, 테스트나 UX등 부가적인 수준에 대한 관심사들이 보이기 시작했다는건 이제 상대적으로 짧은 역사를 가진 프론트엔드도 어느 정도 성숙한 개발문화를 구축하기 시작했다는 징조가 아닐까 생각이 든다. 물론 다른것들이 더 쉽다는 것은 아니지만 정상적인 수순이라면 단계별로 관심사가 발전하기에 테스트나 UX등에 관심을 가지는 사람들이 많아 졌다는 것은 그 하위 단계에 대한 분위기가 어느 정도 무르익었.. 2023. 2. 1.
프론트엔드 설계 고민 -6- 요즘 운동에 빠져서 개발을 소홀히하고 있다. 그래서 글쓰는 것도 프로젝트 진행도 느긋하게 지연 되는데.. 원래 쓰려던 내용은 UI 컴포넌트를 구성하는 법에 대한 디테일이였지만 최근에 상태관리에 대해서 어려워 하는 사람들이 많은걸 봐서 인지 상태관리에 대해서 조금 정리하는게 좋을거 같다는 생각이 들었다. 웹 프론트엔드에서의 상태관리 도구의 경우 여러가지가 있지만 큰 맥락은 변하지 않으므로 익숙한 react와 recoil 기준으로 생각을 간단하게 정리해보겠다. 웹프론트 개발자는 웹 어플리케이션을 만든다. 그런데 왜 굳이 웹 사이트를 웹앱이라고 하는 것일까? 오늘날에 와서는 엄밀한 구분이 불가능한 편이지만 기존의 웹 사이트의 경우 정적인 웹에 가까웠다. 단순히 마크업 된 페이지를 제공해주고 사용자 액션에 따라.. 2022. 10. 3.
프론트엔드 개발에 대한 생각 개인적으로 공통단에 대해서 관심이 많다. 개발을 처음 독학으로 시작할때 부터 어지간한 프로그램을 이해하는데 큰 어려움이 없었고 어지간한 것들은 그 내부를 보지 않고도 어떻게 구현해야할지 직관이 가능했는데(분야에 상관없이 허와 실을 직관하는데 재능이 있는 편이다.) 그래서 그런지 처음부터 개발을 하면서 클린코드나 설계등에 대해서 꾸준히 관심을 가지고 관련해서 공부도 해보고 나름대로 이해도 하고 직접 적용해보고 응용도 하는 등 꾸준히 행해왔다. 더욱이 웹이라는 고수준으로 추상화된 환경에서 보편적인 기능을 개발하는데 특이한 경우가 아니라면 사실 특출난 알고리즘이나 최적화를 통한 성능적인 고려를 할 필요가 거의 없고 문제 없는 설계에 집중하는 것 만으로도 성능을 어느 정도 잡아 낼 수 있었기에 더욱 그러했다.(.. 2022. 9. 14.

티스토리툴바