관련 면접질문 Callback 패턴, 문제점 Promise, callback의 차이점 ? 각각 장단점 ? promise란? Promise.all은 언제 쓰임? async/await와 promise의 차이는 ? 동기 위에서 아래로 순서대로 실행되는 흐름 각 라인마다 실행되고 완료될 때까지 blocking 비동기 실행 중인 코드가 완료되지 않아도 다음 코드를 실행함 비동기처리가 필요한 이유 - 싱글스레드는 여러 task를 동시에 할 수 없으므로, 비동기적으로 task를 처리해 오래걸리는 작업을 기다리지 않고 다음 작업을 수행함. non-blocking 실행 순서가 보장되지 않는다. 비동기를 처리하기 위해 callback 패턴을 사용한다. 콜백함수 매개변수로 함수를 받거나 인자로 전달되는 함수 매개변수로 함수..

프로그래머스 타겟넘버 배열에 나열된 숫자를 더하거나 빼면서 타겟넘버가 될 수 있는 경우의 수를 구하는 문제 모든 경우 (배열원소 하나하나에 덧셈 또는 마이너스를 해야함)의 수를 찾아야 하기 때문에 완전탐색, 그중에 dfs로 해결 dfs는 재귀로 구현하고 재귀이기에 base case를 넣어주어야한다. 여기서 base case, 재귀가 종료되는 조건은 연산횟수가 배열의 길이와 같을 때 종료한다. 경우의 수를 찾는 조건은 연산된 sum이 타겟넘버와 같을 때 answer를 1 증가시킨다. 백트래킹으로 덧셈 후, 마이너스 연산을 수행하도록 작성한다. function solution(numbers, target) { var answer = 0; const dfs = (n, t, s, i) => { if (n.len..

프로그래머스 메뉴리뉴얼 손님들이 주문한 메뉴들 중 2개 이상의 조합을 찾아내어 손님들이 공통적으로 가장 많이 주문한 메뉴의 구성을 찾아내는 문제인데, 주어지는 course의 각 숫자만큼의 메뉴 갯수를 찾아내는 것 예를들어 3명의 손님이 각각 A, B, C B, C ,D A, B, F 를 주문했고 파라미터로 [2,3,4]가 들어왔을 때의 경우 메뉴 2개의 조합에서 가장 많이 주문 된 것은 A,B가 2번, 3개 조합에서는 없고, 4개도 마찬가지로 없어서 리턴되야할 것은 ["AB"] 들어오는 파라미터의 각 숫자만큼 조합을 구해야했다. 손님이 주문한 메뉴를 각 파라미터의 갯수만큼 숫자를 올리면서 조합을 구하고 난 다음, 메뉴 갯수에서 가장 많이 주문한 갯수를 찾기 위해 메뉴당 max값을 구했다. 최종적으로 ma..

프로그래머스 짝지어제거하기 같은 알파벳이 연속하게 존재하면 반복되는 알파벳을 지우고 이를 계속 반복한다. baabaa가 인풋으로 들어올 때 b "aa" baa가 반복되므로 해당 알파벳을 지운다 bbaa가 되므로 "bb"가 반복된다. 이를 지우고 마지막으로 aa도 지운다. 최종적으로 남는 알파벳이 없으면 1을 리턴, 남으면 0을 리턴한다. 괄호 찾기 문제랑 유사하기에 스택을 생각해서 풀었다. 스택의 최상단 값이랑 다음에 들어올 값이랑 같을 때 스택에서 pop하고, 다르면 Push하여 스택의 길이가 1이상이면 0리턴, 0이면 1을 리턴하도록 했다. function solution(s) { var answer = 0; let len = s.length; let stk = []; for (let i = 0; i..

프로그래머스 뉴스클러스터링 구현문제 주어진 문제에 맞춰 구현하면 된다. 요구조건에 맞춰 단계별로 수행했다. 입력에 있어서 대,소문자 차이는 무시하기에 모든 입력을 소문자로 처리했다. 입력문자열을 두 글자씩 끊어서 원소로 만들되 특수문자가 포함되어있으면 해당 원소는 버린다. 2번과정은 문자열 길이만큼 반복문을 돌리고, i, i - 1 문자를 map에 삽입하고, 반복되는 횟수를 count해주었다. 카운트해준 이유는 교집합, 합집합을 만들 때 사용되기 때문인데, 중복원소가 포함된 원소 {1,1,1}, {1,2,3}의 교집합은 {1,2,3}이고 합집합은 {1,1,1,1,2,3}이다. 교집합을 구하는 건 중복원소인 1에 대해 카운트된 숫자중 최소값을 넣으면되고 합집합의 경우 두 집합중 1이 반복되는 횟수의 max..

디바운싱 디바운싱에 대한 예제를 구현한다 디바운싱의 적용 예는 검색인데 사용자가 검색어를 입력할 때 검색창 밑에 연관검색어를 나열해준다. 이 때 이벤트는 각 글자당 계속 발생하기 때문에 서버에 요청도 같은 숫자로 계속 전해진다. 사과하나를 치는데 이벤트가 ㅅ ㅏ ㄱ ㅗ ㅏ , 총 5번이 일어나므로 한 두명이 아닌 수천명이면 고작 두글자에 몇만번이상의 요청을 보내게 된다. 그래서 연이어 호출되는 이벤트중 마지막 이벤트만 호출하도록 하는 것이 디바운싱이다. $searchInput.addEventListener("keyup", (e) => { if (this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(() => { if (e.keyCode ==..

쓰로틀링 쓰로틀링에 대해 예제를 구현한다. 쓰로틀링과 디바운싱기법이 있는데 사용하는 이유는 이벤트가 중복되서 호출되지 않도록 함이다. 쓰로틀링은 주로 스크롤 이벤트에서 적용되는데, 스크롤도 스크롤 내리면 딱 한번 이벤트가 들어가는 것이 아니라 수십 수천번까지 이벤트가 발생한다. 마지막 호출 이후에 특정 시간동안 다음 이벤트가 호출되지 않도록 하는 것이 쓰로틀링이다. 예제 var timer; document.querySelector('#input').addEventListener('input', function (e) { if (!timer) { timer = setTimeout(function() { timer = null; console.log('여기에 ajax 요청..

IntersectionObserver API 무한 스크롤, 레이지로드할 때 사용하는 API 뷰포트 또는 특정 요소사이에 교차를 감지하기 위해 사용한다. IntersectionObserver JS API docs 무한 스크롤을 구현할 때 많이 쓰는 것 같음. element가 viewport, 다른 엘리먼트와의 관계에서 보일지, 안보일지를 정하는 API callback : 관측 대상이 threshold 만큼 보일 때 호출되는 함수 관측대상을 ref로 정함 root : 대상이 보임을 확인하기 위한 뷰포트로 사용되는 요소. 관측대상의 조상이어야함 문서 내 스크롤이 가능한 요소 내에 관측대상이 있으면 root가 그 요소로 가게됨 => 관측대상이 스크롤가능한 조상에 있는지, 그 조상이 root인지 정함 rootMa..

LazyLoad, 디바운싱, 쓰로틀링 웹 페이지를 열 때 img태그의 src속성은 현재 뷰 포트가 어디있건간에 이미지소스를 다운로드받는다. 만약 몇천 몇만의 이미지태그가 있으면 이를 다 다운받을 때까지 엄청난 시간이 들 것이다.(사용자가 보고있지 않아도.) 따라서 이런 리소스낭비를 줄이기 위해 사용되는 것이다. 예시로는 ~~유투브에서 스크롤링할 때 썸네일에 해당하는 부분이 회색으로 가려져있다. -> 스켈레톤 ui~~ 무한스크롤이 적용된 사이트에서 스크롤할 때 로딩창이 생기면서 이미지를 불러온다. 모든 리소스를 받지않고 또는 load하지 않고 필요에 따라 그때그때 받아오는 것 이 때 사용되는 것이 이 개념이다. 레이지로딩은 스크롤 이벤트를 통해 구현한다. 이 때 스크롤 이벤트는 모든 이미지가 로드되면 제거..

JavaScript slider 애니메이션 버튼 클릭시 내용을 접거나, 펼칠 수 있게 한다. 구현 버튼이벤트를 등록하고, classList에 애니매이션을 추가한다. height를 0px ~ 특정 px까지 늘렸다가 줄일 것이므로 요소를 감싸고있는 태그에서 0px로 줄였을 시 컨테이너 범위를 초과해 그리는 것을 방지하기 위해 overflow: hidden속성을 추가한다. Show / Hide Slide body{ background:grey; } #box{ width:400px; background:orange; margin:0 auto; margin-top:3%; overflow:hidden; } .slider { transition:all 2s ease-in-out; height:0px; } .slide..