이번 포스팅은 Promise의 기본적인 사용법과 메서드에 관해 정리해보고자 한다. 나는 이 글을 읽는 여러분들이 Promise가 왜 필요하는지에 대한 이유를 알고있다고 생각하기 때문에 그것에 관하여 따로 설명하지 않을 것이다. 단 모르고 있다면, 지난번에 포스팅했던 [JS] 비동기 처리의 시작 콜백, 그리고 콜백지옥이라는 글을 읽어봤으면 한다. 1. Promise를 왜 써야하는가? Promise를 써야하는 이유를 두 가지로 정리해보면 다음과 같다. 비동기 함수를 동기화 시키기 위해서 콜백 지옥을 해결하기 위해서 2. Promise는 어떻게 사용해야 하는가? - Promise의 기본적인 사용법은 다음과 같다. /* 두 번째 줄과 같이 상황에 따라 함수 이름을 내 의도에 맞게 커스텀할 수도 있다. */ co..

최근에 면접을 봤다. Promise, async/await를 이용해서 비동기 처리를 어떻게 하는지에 대한 질문에 제대로 답변을 하지 못했다. 그래서 이번에 Promise, async/await를 제대로 알고가자를 목표로 왜 필요한지, 어떻게 쓰이는지에 대해서 확실하게 정리해보고자 한다. 이번 포스팅에서는 Promise가 왜 필요한가에 대해서 써보려고 한다. Promise가 필요한 이유는 비동기 함수를 동기화시키기 위해서라고 간단히 말할 수 있지만, 이 답변이 나오기까지의 과정은 그리 간단하지 않다. 그래도 나는 그 어려운 과정을 최대한 쉽게 풀어서 써보려고 한다(피드백, 비판은 언제든지 환영입니다). 1. 자바스크립트는 동기적으로 움직인다. 우리가 먼저 알아가야할 문장이다. 정말 그럴까? 다음 코드를 입..

Rich Text Editor Rich Text Editor란, 위지윅 편집 영역을 제공하여 브라우저 내에서 서식있는 텍스트를 편집하기 위한 인터페이스를 말한다. 바닐라 자바스크립트를 이용하였으며, 기능한 구현은 다음과 같다. 왼쪽 정렬 가운데 정렬 오른쪽 정렬 수평 정렬 텍스트 진하게(Bold) 텍스트 기울이기(Italic) 텍스트 언더라인(Underline) order, unorder 리스트 하이퍼 링크 이미지 첨부 HTML로 변환 구현 영상은 다음과 같다. 완성본 HTML 코드는 다음과 같다. 섹션은 크게 두 개의 영역으로 나뉜다. 첫 번째 영역은 버튼을 담고 있는 form 영역, 두 번째 영역은 텍스트를 수정할 iframe 영역이다. 각 버튼에는 data-cmd라는 속성을 추가해주었다. data ..

최근에 마우스 드래그 앤 드롭을 이용하여 박스를 이동시키는 기능을 구현한 적이 있었다. 금방 구현할 줄만 알았는데, 많은 시간이 걸렸다. 어려웠던 경험을 정리하고 내 것으로 확실히 만들기 위해 다시 한 번 이 기능을 만들어보았다. 따라서 이번 포스팅에서는 마우스 이벤트를 이용하여 드래그 앤 드롭(Drag & Drop)을 이용한 박스 이동 기능을 어떻게 구현했는지에 관하여 써보고자한다. 백문이불여일견(白聞不如一見)이라 했다. 구현 영상은 아래와 같다. 완성본 위 기능을 구현하기 위해서는 다음과 같은 마우스 이벤트가 필요하다. mousedown: 마우스 버튼이 눌릴 때 발생하는 이벤트. mouseup: 마우스 버튼이 떼어질 때 발생하는 이벤트. mousemove: 마우스 포인터가 이동할 때 발생하는 이벤트...

문제 설명 빙하가 깨지면서 스노우타운에 떠내려 온 죠르디는 인생 2막을 위해 주택 건축사업에 뛰어들기로 결심하였습니다. 죠르디는 기둥과 보를 이용하여 벽면 구조물을 자동으로 세우는 로봇을 개발할 계획인데, 그에 앞서 로봇의 동작을 시뮬레이션 할 수 있는 프로그램을 만들고 있습니다. 프로그램은 2차원 가상 벽면에 기둥과 보를 이용한 구조물을 설치할 수 있는데, 기둥과 보는 길이가 1인 선분으로 표현되며 다음과 같은 규칙을 가지고 있습니다. 기둥은 바닥 위에 있거나 보의 한쪽 끝 부분 위에 있거나, 또는 다른 기둥 위에 있어야 합니다. 보는 한쪽 끝 부분이 기둥 위에 있거나, 또는 양쪽 끝 부분이 다른 보와 동시에 연결되어 있어야 합니다. 단, 바닥은 벽면의 맨 아래 지면을 말합니다. 2차원 벽면은 n x ..

문제 설명 빙하가 깨지면서 스노우타운에 떠내려 온 죠르디는 인생 2막을 위해 주택 건축사업에 뛰어들기로 결심하였습니다. 죠르디는 기둥과 보를 이용하여 벽면 구조물을 자동으로 세우는 로봇을 개발할 계획인데, 그에 앞서 로봇의 동작을 시뮬레이션 할 수 있는 프로그램을 만들고 있습니다. 프로그램은 2차원 가상 벽면에 기둥과 보를 이용한 구조물을 설치할 수 있는데, 기둥과 보는 길이가 1인 선분으로 표현되며 다음과 같은 규칙을 가지고 있습니다. 기둥은 바닥 위에 있거나 보의 한쪽 끝 부분 위에 있거나, 또는 다른 기둥 위에 있어야 합니다. 보는 한쪽 끝 부분이 기둥 위에 있거나, 또는 양쪽 끝 부분이 다른 보와 동시에 연결되어 있어야 합니다. 단, 바닥은 벽면의 맨 아래 지면을 말합니다. 2차원 벽면은 n x ..