4전 4전

자바스크립트 애프리케이션에서는 사용자가 웹페이지와 상호작용하는 동안 발생하는 다양한 이벤트들을 다루게 됩니다.특히, scroll, resize, input, mousemove와 같은 이벤트들은 매우 짧은 시간 간격으로 연속해서 발생하는데, 이런 식으로 이벤트 핸들러가 과도하게 호출되면 성능 저하나 불필요한 서버 요청이 발생할 수 있습니다. 이런 문제를 해결하기 위해 디바운스(Debounce)와 쓰로틀(Throttle)이라는 기법을 사용해 볼 수 있습니다.이 두 기법은 연속해서 발생하는 이벤트를 효율적으로 제어하여 성능을 최적화하는 데 도움을 줍니다. 이번 글에서 디바운스와 쓰로틀에의 활용 방법에 대해 간단하게 한번 알아보겠습니다.| 디바운스디바운스는 연속된 이벤트 호출을 그룹화하여 마지막에 한 번만 실행..

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저가 서버와 비동기적으로 데이터를 주고받을 수 있게 하는 기술입니다. 즉, 웹 페이지를 처음부터 끝까지 새로 고치지 않고도 필요한 부분만 업데이트할 수 있어페이지가 더 빠르고 동적으로 반응할 수 있습니다.| Ajax의 시작 Ajax의 핵심은 브라우저에서 제공하는 XMLHttpRequest 객체입니다. 1999년 마이크로소프트가 개발한 이 객체는 HTTP 비동기 통신을 위한 다양한 메서드와 프로퍼티를 제공하며, 이를 통해 서버와 데이터를 주고받을 수 있게 했습니다.  Ajax는 초기에는 주목받지 못했으나,2005년 구글이 Google Maps에 Ajax를 적용하면서 큰 주목을 받았습니다. Ajax 덕분에 Go..

최근 프로젝트에서 Geolocation API를 사용하여 사용자의 위치 정보를 가져와 위치 기반 서비스를 제공하였습니다. 해당 서비스의 모바일 사용자가 증가함에 따라 React Native Expo와 WebView를 이용한 간단한 앱을 만들어 보았습니다.  이 글에서는 React Native Expo를 사용하여 WebView와 Geolocation API를 통합하는 과정에서 발생한 문제와 이를 해결하기 위한 두 가지 방법을 소개하려 합니다.| 구현해당 프로젝트에서 사용자가 위치 동의를 하지 않은 상태일 때, 웹과 앱에 따라 다음과 같은 각각 다른 경고창을 보여주도록 구현되어 있었습니다.이때 앱에서 사용자가 바로 설정창으로 이동할 수 있도록 하기 위해 “설정 가기” 버튼을 누르면 웹에서 postMessag..

추상화는 불필요한 세부 사항을 제거하고 중요한 부분만 남겨시스템을 더 쉽게 다룰 수 있게 만드는 과정입니다. 프로그래밍에서는 인터페이스, 추상 클래스, 함수, 모듈 등을 통해 기능을 추상화할 수 있습니다.이를 통해 코드 재사용성, 유지보수성, 확장성을 높일 수 있습니다. React에서 컴포넌트를 설계할 때 이런 추성화 기법을 사용하여재사용성, 유지보수성, 유연성 등을 높일 수 있습니다. 최근 리액트로 만들어진 다른 사람의 코드를 보던 중,문득 "이 부분을 좀 더 추상화하면 관리가 더 쉬워질까?"라는 생각이 들었습니다. 코드를 처음 보면 간단해 보이지만,새로운 요구사항이 추가될 때마다 코드가 복잡해질 수 있지 않을까 고민했습니다.| 구현해 볼 컴포넌트제가 고민한 내용을 간단한 컴포넌트를 만들면서 공유해보려..

카카오 지도 API를 활용한 프로젝트를 진행하던 중,백엔드 서버에서 받아온 여러 위치 데이터를 바탕으로지도에 마커를 표시하는 기능을 구현해야 할 일이 있었습니다. 이 과정에서 다수의 마커를 효율적으로 관리하고,지도를 최적화하는 방법에 대해 고민하게 되었습니다. 이번 글에서 어떠한 과정으로 고민하고 문제를 해결했는지 작성해보려 합니다. -> 참고: 프로젝트는 Next.js, tailwind css, typescript를 사용하였습니다.| 지도 생성우선 카카오 지도 API를 사용하기 위해다음과 같이 next.js의 Script 태그를 사용해 스크립트를 포함시켜 줍니다.const KakaoMap = () => { return ( );};export default Kaka..

yarn berry는 yarn의 최신 버전(yarn 2와 그 이후의 버전)을 지칭합니다.PnP(Plug 'n' Play) 방식, Zero Install 방식을 지원하며 인기가 많은 패키지 관리 도구입니다.| yarn berry 특징Cache와 Zero-Installyarn berry는 설치된 패키지를 글로벌 캐시에 저장하여, 같은 패키지를 여러 프로젝트에서 사용할 때 다운로드 시간을 절약합니다. 패키지는 zip 파일 형태로 .yarn/cache에 저장되며,이를 통해 네트워크 요청 없이 빠르게 패키지를 불러올 수 있고,디스크 공간을 효율적으로 사용할 수 있습니다. 또한, Zero Install 기능을 통해, 패키지들이 리포지토리에 함께 저장하며 프로젝트를 클론 하는 것만으로 필요한 모든 패키지를 바로 사용..

무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node..

프론트엔드 개발을 진행하다 보면 사용자가 데스크톱으로 접속했는지, 모바일 기기로 접속했는지,어떤 브라우저를 사용해서 접속했는지 등을 확인하고 이에 따라 다른 UI를 제공해야 하는 경우가 있습니다. 이때 웹 브라우저의 User Agent를 활용하여 이를 알 수 있습니다.| User Agent User Agent는 사용자가 웹사이트에 접속할 때 브라우저가 서버로 보내는 문자열입니다. 이 문자열에는 브라우저의 정보, 운영 체제, 기기 정보 등이 포함되어 있어 이를 파싱 하면 사용자의 접속 환경을 알 수 있습니다. 자바스크립트에서는 브라우저의 navigator객체를 통하여해당 문자열을 확인할 수 있습니다.console.log(navigator.userAgen);또한 기기나 브라우저로 출력되는 User Agent..