EventEmitter란? 특정 이벤트가 발생했을 때 일괄적으로 로직을, 즉 특정 코드들을 실행할 수 있도록 구조적으로 코드를 작성하는 방법을 말한다. 해당 예시는 어떠한 사이트에 새로운 유저가 들어왔을 때 특정 이벤트가 실행된다고 가정한 것이다. 자세한 설명은 이미지의 주석을 확인 'use Strict' const EventEmitter = require('events'); class ChatManager extends EventEmitter { } const chatManager = new ChatManager(); chatManager.on("join", () => { console.log("new user joined"); }) chatManager.emit("join");

Promise Chaining은 여러 개의 프로미스를 then으로 연결해주는 것이다. 테스트할 js 파일을 만들고 아래 소스를 추가한다. 아래 소스는 setTimeout을 사용하여 1초 후에 p1의 text를 찍고 3초 후에 p2의 텍스트를 찍는 소스다. 병렬적으로 실행 된다. (p1 실행 후 3초 뒤가 아닌 처음 실행 기준에서 3초) const p1 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p1_text : "p1의 텍스트"}); }, 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p2_text : "p2의 텍스트"}..

▶ position과 요소의 쌓임 순서 - stack order? 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 쌓이는지)를 결정. z축. - z축: 우리의 시선과 동일한 축을 가짐. 눈에 보이지는 않지만 무언가가 더 앞에 있거나 뒤에 있는 개념. [요소의 쌓임 순서] 1. static을 제외한 position 속성의 값이 있을 경우 위에 쌓임. 값은 무관. - relative, absolute, fixed, sticky 중 값에 상관 없이 특정 값이 있으면 일단 위에 쌓이는 것. 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을수록 위에 쌓임. 3. position 속성의 값이 있고 z-index 속성의 숫자 값이 같다면 HTML의 마지막 코드..

▶ position: sticky - 스크롤 영역을 기준으로 배치 - top/left/right/bottom 중 특정한 값이 하나 이상 존재해야 하고 그렇게 부여된 값이 스크롤 영역에 맞닿았을 경우에만 동작함. - Internet Explorer 지원 불가. [사용 예시] - position: sticky가 적용된 타이틀 부분이 스크롤을 내릴 때 화면 상단에 고정된 채 같이 내려오다 section이 끝나면 멈추고, 이후 section 영역이 달라지면 해당 section의 타이틀이 스크롤을 따라 내려옴. - 이전에는 javascript를 통해 상당히 어렵게 구현되던 기능이었으나 sticky 사용 시 이와 같이 구현 가능. - 스크롤되는 영역을 기준으로 배치하기 때문에 viewport 전체에 고정하는 개념처..

▶ position: fixed; - 브라우저(viewport)를 기준으로 배치됨. - viewport에 기반한 위치 배치는 position: absolute를 통해서도 할 수 있음. - 이전 글 position: absolute 참조 - developing-move.tistory.com/128 [CSS] position: absolute ▶ position: absolute; - 부모 요소를 기준으로 배치. - 여기서의 부모요소는 기본적인 HTML의 구조적인 부모가 아닌 위치상의 부모 요소를 의미. - position: absolute; 지정 시 3번 박스는 사라짐. - 이.. developing-move.tistory.com - position: absolute는 결과적으로 부모 요소를 기준으로 함...

4callback, promise등을 사용하는 이유? 자세하게 설명하면 너무 복잡하고 어렵다. 본 포스트에서는 Promise를 사용하는 방법을 알려주는 예제입니다. Promise를 사용해야 하는 이유와 좀 더 심도 깊게 알고 싶은 분들은 구글링을 통하여 한 번 검색해 보시는 걸 추천드립니다. 본 포스트를 보시기에 앞서 동기화와, 비동기화에 대해서는 반드시 사전에 숙지가 되어 있어야합니다. 동기화 비동기화에 대해서 숙지하시지 못하신 분은 아래의 포스트를 먼저 보고 와주시기 바랍니다. developing-move.tistory.com/20 [Javascript] 동기/비동기 처리와 callback 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. 아래 이미지와 같이 Syncro..