흔히, 디자인 패턴이라 하면 객체지향 언어의 원조인 자바에서 많이 활용된다. 디자인 패턴의 종류는 매우 많으며 쓰임새 또한 다양하다. 하지만 자바라는 언어 자체가 백엔드 언어이다 보니, 자바스크립트로 디자인 패턴을 공부하여도 프론트엔드 코드에 어떻게 적용시킬지 늘 고민이다.  이번 포스팅에서는 프론트엔드에서도 유용한 디자인 패턴 중 하나인 옵저버 패턴에 대해 알아본다. 또한, 옵저버 패턴을 적용하여 상태 관리 로직을 구현해보겠다. 1️⃣ 옵저버 패턴옵저버 패턴은 크게 주체(Subject)와 옵저버(Observer) 사이의 관계를 설계하는 패턴이다. 먼저, 각각 무엇을 뜻하는지 알아보자. 주체(Subject)옵저버들을 관리하는 객체이다. 옵저버는 원하는 주체와 결합할 수 있으며 주체는 결합된 옵저버들을 관..

이전 글에서, Promise 가 무엇이고 Promise를 이용한 비동기 처리에 대해 알아보았다. [JavaScript] Promise와 비동기(Asnycronous) 처리앞서, JS의 비동기 처리 및 콜백 함수에 대해서 알아보았다. [JavaScript] 싱글 쓰레드와 비동기(Asyncronous)JavaScript에서 매우 중요한 비동기 처리 방식을 공부하다 보면 JavaScript는 싱글 쓰레드 언어junhee1203.tistory.com 이번 글에서는 Promise의 정적 메소드에 대해 알아보겠다.참고로 Promise의 기본 개념을 알지 못한다면 이 글을 이해할 수 없다. 또한, class의 인스턴스와 정적 메소드의 차이에 대해서 기본적으로 알아야 한다. 1️⃣ Promise의 정적 메소드알다시피 ..

앞서, JS의 비동기 처리 및 콜백 함수에 대해서 알아보았다. [JavaScript] 싱글 쓰레드와 비동기(Asyncronous)JavaScript에서 매우 중요한 비동기 처리 방식을 공부하다 보면 JavaScript는 싱글 쓰레드 언어라는 말을 한 번쯤은 접했을 것이다.실제로, JavaScript의 비동기 처리는 싱글 쓰레드와 아주 밀접한 관련junhee1203.tistory.com  [JavaScript] 콜백 함수와(Callback) 비동기(Asyncronous) 처리흔히 JavaScript의 비동기를 처리하는 방법은 크게 세 가지가 있다. 1. 콜백 함수(Callback)2. Promise3. async awiat 이 중에서 가장 기본이 되는 콜백 함수에 대해서 알아보자. 먼저, 비동기를 어떻게 ..

드래그는 피그마 같은 디자인 툴 사이트에 매우 많이 사용된다.또한, 웹 사이트에 파일을 업로드 할 때, 드래그 앤 드랍으로 파일을 업로드 한 경험이대부분 있을 것이다.하지만, 단순하게 보였던 드래그는 생각보다 다루기 어려운 이벤트이다.DOM에서 제공하는 드래그 관련 이벤트도 다양하며,제대로 활용하기 위해서는 뷰포트 내 좌표에 대한 개념도 알아야 한다.어려운 것은 사실이지만, 드래그 기능은 현대 웹 애플리케이션에서 중요한 역할을 하며,사용자 경험을 크게 향상시킬 수 있다.이번 글에서는 drag 관련 이벤트를 정리해보겠다. 1️⃣ drag 이벤트 종류드래그 이벤트는 총 7종류가 있지만, 크게 두 분류로 나눌 수 있다.드래그 되는 요소에서 발생하는 이벤트dragstartdragdragend드롭 대상(또는 잠재..

이전 포스팅에서 이벤트의 전반적인 흐름에 대해 알아보았다. [JavaScript] 이벤트 버블링(Bubbling), 이벤트 위임(Delegation)프로젝트 진행 중 DOM API 를 활용하여 이벤트를 다룰 일이 생겼다.모든 컴포넌트에 이벤트 등록을 하던 중, 해당 방식이 매우 비효율적인 것을 알게 되었다.이 글을 통해 이벤트의 전반적인 흐름junhee1203.tistory.com 위 글의 마지막에서 이벤트 위임을 사용할 때,Element.closest 메소드가 유용하다고 언급하였다.이번 글에서 해당 메소드의 정의가 무엇인지, 왜 이벤트 위임에서 유용한지 알아보겠다. 1️⃣ Element.closest 정의closest 는 Element 객체의 메소드이다. 이때, Element는 HTML 의 요소이다.따..

프로젝트 진행 중 DOM API 를 활용하여 이벤트를 다룰 일이 생겼다.모든 컴포넌트에 이벤트 등록을 하던 중, 해당 방식이 매우 비효율적인 것을 알게 되었다.이 글을 통해 이벤트의 전반적인 흐름에 대해 정리해보겠다. 1️⃣ DOM 이란 ?이벤트에 대해 알아보기 전에, DOM(Document Object Model)에 대해 알아볼 필요가 있다.우리가 웹사이트에 접속하면 브라우저 화면에 웹사이트의 내용이 보여지기 전까지어떠한 일이 발생할까 ? 1. 브라우저가 서버에게 요청2. 서버는 응답으로 브라우저에게  HTML, CSS, JS 파일 전송3. 브라우저가 HTML 파일을 읽고 화면에 렌더링위의 과정을 통해 우리 눈에 웹페이지가 보이게 된다.DOM을 이해하기 위해 3번의 과정을 자세히 알아보자. 브라우저는 ..

JavaScript 의 대표적인 모듈 시스템은 크게 두 가지가 있다. 1. CommonJS2. ES6 CommonJS 는 초창기 Node.js 의 등장과 함께 나왔다면 , ES6 는 2015년에 등장하였다.위 두 방식 모두 모듈을 다루는 방식이지만, 문법적 차이가 있다.현재는 ES6 방식이 많이 이용되지만, Node.js 를 다루다 보면 CommonJS 방식도 심심치 않게 보인다.따라서, 두 방식 모두 이해할 필요가 있고 이 글을 통해 정리해보겠다. 1️⃣ CommonJS CommonJS 는 모듈로 내보낼 때 exports와 module.exports 를 사용한다. 그리고 내보낸 모듈을 받아올 때는 require 함수를 사용한다.그렇다면, 각각 언제 사용하는지 알아보자. ✅ module.exportsmo..

흔히 JavaScript의 비동기를 처리하는 방법은 크게 세 가지가 있다. 1. 콜백 함수(Callback)2. Promise3. async awiat 이 중에서 가장 기본이 되는 콜백 함수에 대해서 알아보자. 먼저, 비동기를 어떻게 콜백 함수로 처리할 수 있는지 보기 전에콜백 함수가 정확히 무엇인지 이해를 해야 된다.  그리고, 콜백 함수를 이해하기 전에 일급 객체가 무엇인지 알아볼 필요가 있다. 1️⃣ 일급 객체 (First Class Object)다음과 같은 성질을 만족하는 객체를 일급 객체라고 한다.변수에 할당될 수 있다함수의 매개변수로 사용될 수 있다함수의 리턴값이 될 수 있다.JS에서 함수는 객체로 취급한다. 그리고 함수는 일급 객체이다.즉, 함수는 변수에 할당될 수 있고,매개변수로 사용될 수..

JavaScript에서 매우 중요한 비동기 처리 방식을 공부하다 보면 JavaScript는 싱글 쓰레드 언어라는 말을 한 번쯤은 접했을 것이다.실제로, JavaScript의 비동기 처리는 싱글 쓰레드와 아주 밀접한 관련이 있다. 이번 글에서는1. 싱글 쓰레드 vs 멀티 쓰레드2. 비동기란 무엇인지두 주제에 대해 정리해보자.  1️⃣ 싱글 쓰레드 vs 멀티 쓰레드사실, 쓰레드라는 용어를 정확히 이해하려면 프로세스를 먼저 알아야 된다.하지만, 운영체제 영역이라 이 글과 벗어난 주제이기에 엄밀히 다루지 않겠다. 단순히, 쓰레드는 그저 프로그램 내 실행의 흐름이라고 생각하면 된다. 프로그램 내 실행의 흐름이라는 말이 어찌보면 애매모호하고 추상적일 수 있다.예시를 들어보자.for (let i = 0; i  이 프..