분류 전체보기
-
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과 동일할 것입니다. 다만 무한 스크롤은 기존 결과를 날리지 않고, 비동기적으로 수신받은 추가 데이터를 이어 붙..
-
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..
-
JavaScript의 customElements에서 Proxy을 활용한 객체 변화 감지Frontend/JavaScript 2023. 3. 3. 14:13
앞서 작성한 글을 완벽하게 숙지하고 사용하시다 보면 attribute 값을 업데이트 하는 과정에서 여러 의문이 들 것입니다. ??? : observedAttributes() 와 attributeChangedCallback() 으로 태그의 attribute 값이 바뀌는 것을 감지해주는건 알겠는데… ??? : 여기에 render() 함수를 걸어두면 attribute값이 바뀔 때 렌더링도 자동으로 최신화해주는 것도 알겠는데.. ??? : attribute는 텍스트만 넘겨줄 수 있고, attribute를 감지하는 것이지 엘리먼트 내부의 상태값을 감지하는 것은 아니지 않나? 객체가 변했을 때 렌더링이 자동으로 일어나게 할 수 없을까? customElements을 그렇게 만들어 보겠습니다. class MyProxy..
-
JavaScript에서 customElements를 활용하여 독립적인 상태 관리하기Frontend/JavaScript 2023. 3. 1. 17:38
과거의 정적인 웹 페이지 구현과 달리, html을 동적으로 적절하게 관리한다는 것은 결코 쉽지 않습니다. 특히 SPA를 구현할 때, 많은 분들이 비슷한 고민을 겪게 될 것으로 생각됩니다. 동적인 화면 변화가 잦다면 정적인 html은 큰 도움을 주지 못합니다. html이 없으면 사용자에게 어떤 것을 보여줄 수 없지만, 그렇다고 해서 처음 부터 모든 태그들이 고정된 자리를 잡는 것은 동적인 웹 페이지를 그리는데 큰 도움을 주지 못할 가능성이 큽니다. 특히 ajax의 등장 이후, 웹 페이지를 동적으로 관리하려는 시도는 차츰 늘어오다가, 이를 해결하기 위해 상태 관리를 중심으로 한 react, vue, angular 등이 웹 프론트엔드 기술의 대세로 떠올랐고, 과거의 jquery는 이제 영광을 뒤로하고 퇴장을 ..
-
.onsubmit과 .addEventListener의 차이Frontend/JavaScript 2023. 2. 27. 16:57
다음 두 예제 코드를 봅시다. 예시 1 : .onsubmit 제출 const form = document.getElementById('foo'); form.onsubmit = function (event) { event.preventDefault(); console.log(event.target.bar.value); }; 예시 2 : .addEventListener 제출 const form = document.getElementById('foo'); form.addEventListener("submit", function (event) { event.preventDefault(); console.log(event.target.bar.value); }); 이 코드들의 실행 결과를 예상해보면, form 태그..
-
JavaScript 클래스 문법은 어떻게 쓰는 것일까?Frontend/JavaScript 2023. 2. 22. 15:45
프로토타입의 설명은 생략하였습니다. 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어입니다 클래스 문법은 ES6(2015)에 와서야 추가되었습니다. 클래스 문법이 등장 하기 전에는 어떤 방식으로 객체지향 프로그래밍을 할 수 있었을까요? 클래스를 사용한 객체 생성 먼저 널리 알려진 클래스 기반 프로그래밍 언어이자 객체지향 프로그래밍 언어의 대표주자로 불리는 Java와 비교를 하면서 예시를 들겠습니다. JavaScript는 알고 Java를 모르시는 분이 다음과 같은 문법을 보게된다면 뭔가 어디서 본듯 한 느낌을 받을 것입니다. Java의 클래스 사용법 public class Car { String name; int position; public Car(String name) { this.name = na..