Frontend/JavaScript
-
고밀도 지도 데이터 관리를 위한 효과적인 전략: 지도 확대 및 마커 제어Frontend/JavaScript 2023. 8. 25. 00:22
지도 기능에서 가장 핵심인 기능 두 가지를 뽑자면, 지도 그 자체와 지도 위에 그려지는 마커를 뽑을 수 있을 것입니다. 지도 위에 마커를 그리는 일은 그다지 어렵지 않고, documents 에 있는 예제들을 잘 따라하면 누구나 충분히 구현할 수 있을 것입니다. 하지만 마커의 갯수가 과도하게 많다면 어떤 전략을 세울 수 있을까요? 최근 진행한 서비스에서는요 ... 최근 진행한 서비스에서 지도는 굉장히 중요한 요소 중 하나였습니다. 사용자들이 궁금한 장소의 주변에 있는 충전소를 시각적으로 제공해주기 위해서는 지도를 잘 제어할 수 있어야 했습니다. 특히 전국에 이미 수만 대의 충전소가 보급이 된 상황에서 충전소 마커를 모두 그려주기 위해서는 많은 제약이 있었고, 마커를 적당한 수준으로 렌더링 하려면 클라이언트..
-
Github Actions를 활용한 Jest, React Testing Library 테스트 자동화Frontend/JavaScript 2023. 8. 25. 00:12
일반적으로 소프트웨어 테스트란 백엔드에서 그 중요성이 강조되곤 하지만, 프론트엔드에서도 그에 못지 않게 중요한 부분을 차지하고 있습니다. 수많은 툴 중에서 jest 기반의 두 라이브러리를 자동으로 테스트 하는 방법에 대해 작성해보겠습니다. Jest Jest는 JavaScript의 테스트를 위한 대표적인 라이브러리입니다. 기본 설정이 간편하고, 빠르게 테스트를 실행할 때 굉장히 유용합니다. 함수를 mocking하여 의존성이 강한 함수를 제거하여 원하는 테스트를 쉽게 구성할 수 있다는 특징이 있습니다. React Testing Library React Testing Library는 리액트 애플리케이션의 UI를 테스트하기 위한 라이브러리입니다. React 컴포넌트를 호출하여, 사용자의 의도대로 조작할 수 있는..
-
JavaScript의 cloneNode와 이벤트 버블링을 활용한 HTML template tag 활용법Frontend/JavaScript 2023. 4. 11. 03:16
HTML의 template 태그는 웹 개발에서 재사용성을 높이는 방법 중 하나입니다. template 태그를 사용하면 웹 페이지에서 일부분을 독립적으로 만들어 놓고, 필요할 때마다 JavaScript를 통해 동적으로 삽입할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 예를 들면, 어떤 컴포넌트에 필요한 HTML 코드를 문자열로만 관리하는 것은 굉장히 불편합니다. ES6에 와서 백틱으로 템플릿 리터럴을 관리하는 기능이 추가되었지만, IDE 차원에서 코드가 인식이 잘 되지 않는 등 여러 문제가 있습니다. template 태그의 공식문서를 확인해보면 템플릿 태그는 렌더링 되지 않습니다. DOM 상에 존재하지 않지만, 해당 코드를 JavaScript가 동적으로 읽어들여 복제(.clo..
-
JavaScript의 모듈 시스템과 Singleton 패턴을 통한 객체 공유Frontend/JavaScript 2023. 4. 11. 02:21
MVC패턴은 기존의 응용 프로그램 개발을 위해 사용되던 디자인 패턴으로, 서버나 애플리케이션 구축에 사용되던 오래된 방법 중 하나입니다. 하지만 프론트엔드에서도 MVC패턴이 필수일까요? 프론트엔드 개발에서 MVC 패턴을 사용한다면 가장 큰 이유로는 객체나 변수의 공유일 것입니다. 특히 컨트롤러가 중앙에서 데이터의 흐름을 통제하는 일을 하고 있을 가능성이 큽니다. (웹 개발에서 중앙 통제라...) 컨트롤러 없이 데이터를 어떻게 공유할 수 있을까요? 전역 키워드인 globalThis를 비롯한 여러 방법이 존재하겠지만, 사용이 권장되지는 않습니다. 객체를 공유하기 위해 다음과 같은 방법들이 존재합니다. 모듈시스템 이용하기 JavaScript의 모듈 시스템은 코드의 재사용성을 증가시키고 유지 보수를 쉽게 할 수..
-
HTMLElement와 JavaScript 간의 상호작용을 개선하는 dataset (데이터 속성)Frontend/JavaScript 2023. 4. 8. 17:54
HTML의 엘리먼트는 다음과 같이 태스 내부에 속성(Attribute) 값을 가질 수 있습니다. 일반적인 개발 상황에서는 엘리먼트의 속성이 큰 이슈가 아닐 수 있지만, 커스텀 엘리먼트를 비롯해서 특정 엘리먼트의 속성이 컴포넌트의 형태를 결정하는 상황에서는 해당 태그가 자주 사용될 수 있습니다. 예를 들어 다음과 같은 문법은 어떤 엘리먼트의 속성 값을 읽는 것을 돕습니다. const el = document.getElementById('foo'); // 위에 있는 예제의 엘리먼트 입니다. console.log(el.getAttribute('bar')); // baz 하지만 다른 사람이 읽었을 때 HTML 표준에는 bar라는 속성이 있는지 확신할 수 없습니다. 예를 들면, 정말 그럴싸한 이름의 속성을 짓는다..
-
IntersectionObserver를 활용한 element 감지 및 응용 (무한스크롤, 중간광고 예제 포함)Frontend/JavaScript 2023. 4. 8. 14:46
과거에는 데이터를 Pagination으로 데이터를 소분해서 보여주던 시절이 있었습니다. 하지만 점점 데이터가 무한정하게 늘어나면서 기존 방식으로는 데이터를 효율적으로 보여줄 수 없게 됐습니다. 따라서 무한스크롤(infinite scroll)이라는 개념이 등장하기 시작했고, 모던 웹과 앱에서 모두 필수적인 기능으로 자리 잡았습니다. 어떤 데이터를 보여줄지만 서버에서 잘 추천해 준다면 무한스크롤은 더 동적인 웹으로 만드는데 일조하게 됩니다. 웹에서 무한스크롤을 구현하려면 어떤 방법이 있을까요? 단순하게 구현 아이디어를 생각해 봤을 때, 데이터를 페이지 단위로 서버에 요청하는 것은 Pagination과 동일할 것입니다. 다만 무한 스크롤은 기존 결과를 날리지 않고, 비동기적으로 수신받은 추가 데이터를 이어 붙..
-
코드의 가독성을 위해 필수로 알아야 할 .every()와 .some()Frontend/JavaScript 2023. 4. 4. 01:36
자바스크립트는 배열을 다루는 다양한 메서드를 제공합니다. 그 중에서 배열을 좀 더 우아하게 사용하도록 돕는 .every()와 .some() 두 가지 메서드에 대해 알아보겠습니다. MDN 문서로 .every() 확인하기 MDN 문서로 .some() 확인하기 .every() .every()는 배열의 모든 요소가 조건을 통과하는지 검사하며, 모든 요소가 조건을 통과하면 true를 반환합니다. 하나 이상의 요소가 조건을 통과하지 못하면 false를 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다. const numbers = [1, 2, 3, 4, 5]; const isAllNumbersGreaterThanZero = numbers.every(num => num > 0); // true const is..
-
CustomEvent를 활용하여 customElements에 객체를 전달하는 방법Frontend/JavaScript 2023. 3. 27. 18:12
이전에 작성한 글들을 잘 참고해보면 커스텀 엘리먼트는 외부에서 어트리뷰트 값을 직접 넘길 수는 있지만, 직접 객체를 넘기는 방법은 지원하지 않습니다. 많은 사람들이 이를 해결하기 위해 다양한 방법을 활용했을 것으로 예상됩니다. 가장 쉬운 방법으로는, 특정 엘리먼트를 불러와서 어떤 메서드를 통해 객체를 전달하는 방법이 가장 일반적일 것입니다. 예를 들면 다음과 같은 방법이 있을 것입니다. import MyElement from "./MyElement.js"; customElements.define('my-element', MyElement); class MyElement extends HTMLElement { state = { value: 'init value' }; constructor() { super..