이번 포스팅은 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 ..

프로세스 스케줄링 목적 프로세스 스케줄링은 CPU가 끊임없이 일할 수 있도록 스케줄을 짜주는 것을 의미한다. 한정된 자원으로 높은 성능을 이끌어내기 위해서는 CPU가 놀지 않고 계속 일을 할 수 있게 해줘야하기 때문에 적절한 타이밍에 연속적으로 일을 할 수 있도록 스케줄을 짜줘야한다. 프로세스 스케줄링의 목적은 시스템 성능을 향상시키는 것이며, 구체적으로 정리하자면 다음과 같다. 공평성: 모든 프로세스가 시스템 자원을 공평하게 배정받아야 하며, 특정 프로세스를 배제하지 않는다. 효율성: 시스템 자원은 노는 시간 없이 일을 해야한다. 안정성: 우선 순위를 사용하여 중요한 프로세스가 먼저처리되도록 해야한다. 반응시간 보장: 응답이 없는 경우, 사용자는 시스템이 멈춘 것으로 가정하기 때문에 시스템은 적절한 시..

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

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