이번 포스팅은 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: 마우스 포인터가 이동할 때 발생하는 이벤트...

최근에 프론트앤드 업무를 하면서 3D 작업에 관심을 가지게 됐다. CSS를 이용해서 3D 효과를 많이 이용해보지 않았기 때문에 연습삼아 올려볼까 한다. 이번 포스팅에서 만들어 볼 예제는 캐러셀 슬라이드(Carousel Slide)다. 완성본 완성본 영상처럼, 나는 1부터 9까지 총 9개의 아이템을 만들어 줄 것이다. 현재 실행 결과와 코드는 다음과 같다.

1. 완성본 완성 본 2. 설명 CSS로 3D를 만져보는것이 익숙하지 않아 꽤나 애먹었다. HTML 구조는 다음과 같다. CSS 코드 중에 content 클래스안에 있는 내용을 주목할 필요가 있다. prospective는 3차원 위치 관점을 제공하기 위해, Z=0인 평면과 사용자 사이의 거리를 결정한다. 쉽게 말하면 원근법을 제공한다는 뜻이다. 값은 무조건 0, 양수 값이어야 한다. 그리고 padding-top 속성 값을 변화시켜 줄 때마다 위에서 보는 관점의 변화가 생겼는데, 왜 그런지는 모르겠다. 나머지는 읽어보면 어떤식으로 돌아가는지 이해할 수 있을 것이다. *{ box-sizing: border-box; } html{ font: 10px; } body{ margin: 0; padding: 0; w..