탄탄한 기본기!

const getName = () => new Promise((resolve) => { setTimeout(() => { resolve('Dooyeong'); }, 2000); }); const sayHi = async () => { const name = await getName(); console.log(`Hello ${name}!`); }; sayHi(); 자바스크립트에는 async와 await이라는 특별한 문법이 존재한다. 그리고 "비동기(async)"라는 어려울 것 같은 이름을 가지고 있지만 생각보다 이해하기 쉽고 사용하기도 쉽다. Asynchronus function 비동기 함수란, 동기적으로 작동하지 않는 함수이다. 이 말이 무슨 말이냐면, 두 개 이상의 이벤트들이 서로를 기다리지 않고 (b..

자바스크립트에는 Promise라는 아주 중요한 객체가 있다. 내부적으로 비동기적인 로직을 처리할 때 이 Promise객체를 통해서 callback hell이나 에러 처리 등 여러 가지 문제점들을 해결해주고 있다. // callback hell get('/step1', a => { get(`/step2/${a}`, b => { get(`/step3/${b}`, c => { get(`/step4/${c}`, d => { console.log(d); }); }); }); }); 이러한 코드를 Promise를 사용해 바꾸면 다음과 같다. promiseGet(`/step/1`) .then(a => promiseGet(`/step/${a}`)) .then(b => promiseGet(`/step/${b}`)) .t..

1759번: 암호 만들기 첫째 줄에 두 정수 L, C가 주어진다. (3 ≤ L ≤ C ≤ 15) 다음 줄에는 C개의 문자들이 공백으로 구분되어 주어진다. 주어지는 문자들은 알파벳 소문자이며, 중복되는 것은 없다. www.acmicpc.net 문제 제한 사항 (3 ≤ L ≤ C ≤ 15) 문제 풀이 이 문제는 dfs를 활용해서 백트래킹을 할 수 있는지 없는지 물어보는 문제인 것 같다(조합). 문제를 풀 때 자음과 모음 개수에 대해서 제약이 있는데, 모음은 최소 1개 이상, 그리고 자음은 최소 2개 이상으로 구성되어 있다는 것이다. 이 때문에 본인은 다음과 같이 dfs 함수의 매개변수로 모음의 개수를 넘겨주어 이를 계산할 수 있도록 하였다. const dfs = (cnt, st, key, aeiouCnt) ..

Ajax란 Asynchronous Javascript And XML이라는 뜻으로, 자바스크립트를 사용해 서버에 비동기적인 방식으로 데이터를 요청해 동적으로 웹페이지를 갱신하는 방식을 의미한다. 1. Ajax Ajax는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 그리고 XMLHttpRequest는 비동기적인 HTTP 통신을 위해서 여러 메서드와 프로퍼티 등을 제공한다 이전의 웹페이지의 경우에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 그렇기 때문에 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링해야했기 때문에 화면이 깜빡거리는 현상이 발생했다. 이러한 방식은 매번 완전한 HTML파일을 항상 전송..

Programmers - 가장 먼 노드 코딩테스트 연습 - 가장 먼 노드 6 [[3, 6], [4, 3], [3, 2], [1, 3], [1, 2], [2, 4], [5, 2]] 3 programmers.co.kr 문제 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 개수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요. 제한사항 노드의 개수 n은 2 이상 20,0..

디바운스와 스로틀은 scroll, resize, input, mousemove 같은 짧은 간격으로 연속적으로 이벤트를 발생시키는 경우에 과도한 이벤트 발생을 방지하는 기법이다. 1. 디바운스(debounce) 예를 들어서 click 같은 경우에 오토 마우스같은 툴을 사용해서 1초에 10번씩, 혹은 사람의 손으로 소위 말하는 '광클'로 클릭 이벤트를 1초에 1번 이상 발생시킬 수 있다. 하지만 이러한 클릭 이벤트를 조절하고 싶을 때, 디바운스라는 기법을 사용할 수 있다. 디바운스는, 엘리베이터를 생각하면 이해하기 쉽다(https://css-tricks.com/debouncing-throttling-explained-examples/). 엘리베이터를 타고 문이 닫히려고 할 때, 누군가 열림 버튼(이벤트 발생..

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 1. 노드 Hello 위와 같은 HTML요소는 div 요소 노드를 생성하는데, 이때 어트리뷰트는(class, id 등) 어트리뷰트 노드로, 텍스트 콘텐츠의 경우에는 텍스트 노드로 따로 구분된다. 참고로 HTML의 태그들 사이의 개행이나 공백들은 텍스트 노드가 된다. HTML 문서는 이러한 요소들의 집합으로 이루어지며, 중첩 관계를 통해 트리 구조로 구성된다. 1.1 노드의 종류 노드의 타입은 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드로 나눌 수 있다. 문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로서 doc..

이터러블 프로토콜을 준수한 객체를 이터러블이라 하며, 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 1. 빌트인 이터러블 자바스크립트에는 아래와 같은 이터레이션 프로토콜을 준수한 빌트인 이터러블 객체들이 존재한다. Array String Map Set TypedArray arguments DOM Collection 2. 이터러블과 이터레이터 이터러블은 이터러블 프로토콜을 준수한 객체이며, Symbol.iterator를 프로퍼티 키로 직접 메서드를 구현하거나 상속(프로토타입) 받은 객체를 말한다. 즉, 객체의 프로퍼티로 Symbol.iterator가 존재해야지 이터러블인 것이다. const array = [1, 2, 3]; console.log..