본문 바로가기
반응형

분류 전체보기

 (501)
42장 비동기 프로그래밍 2023년 5월 9일 809p~815p 42.1 동기 처리와 비동기 처리 "실행 컨텍스트"에서 살펴본 바와 같이 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 스택에서 팝되어 제거된다. 다음 예제의 foo 함수와 bar 함수는 호출된 순서대로 실행 컨텍스트 스택에 푸시되어 실행된다. const foo = () => {}; const bar = () => {}; foo(); bar(); 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순..
[투포인터] 프로그래머스 '두 큐 합 같게 만들기' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/118667#qna 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 처음 푼 코드) 당연한 타임아웃 function solution(queue1, queue2) { let answer = 0; // 두 큐 요소 합 구하기 // 두 큐 중 합 큰 것에서 하나 빼서 옮기기 queue1 = queue1.reverse(); queue2 = queue2.reverse(); let sum1 = queue1.reduce((acc,cur) => a..
40장 이벤트(3) 2023년 5월 8일 783p~799p 40.7 이벤트 위임 Apple Banana Orange 선택된 내비게이션 아이템: apple 위 예제를 보면 모든 내비게이션 아이템(li 요소)이 클릭 이벤트에 반응하도록 모든 내비게이션 아이템에 이벤트 핸들러인 activate를 등록했다. 만약 ul 태그 하위에 5개의 li 태그가 있다고 하면, li의 각각의 요소에 이벤트 핸들러를 등록해야한다. 만일 li 태그가 100개라면 이벤트 핸들러로 100개를 등록해야한다. 이처럼 DOM 요소에 많은 이벤트 핸들러를 등록하므로 성능 저하의 원인이 될뿐더러 유지보수에도 부적합한 코드를 생산하게 한다. 이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를..
[구현] 프로그래머스 '메뉴 리뉴얼' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 function solution(orders, course) { let map = new Map(); // 해시 맵에 조합 및 해당 조합이 나온 갯수 저장 let set = new Set(); // 각 orders 요소에 대한 조합 만들 때 중복 제거 let best = new Array(course.length).fill(0); // 조합 길이 별 조합 갯수 최댓값 저장 l..
40장 이벤트(2) 2023년 5월 6일 767p~783p 40.5 이벤트 객체 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 아규먼트로 전달된다. // 이벤트 핸들러 어트리뷰트 방식의 경우 event가 다른 이름으로는 이벤트 객체를 전달받지 못한다. 참고로, 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 event를 통해 이벤트 객체를 전달받을 수 있다. 즉, 'event'가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다. 그 이유는, 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체를 의미하기 때문이다. onclick="showCoords(event)" 어트리뷰트는 파싱되어 다..
40장 이벤트(1) 2023년 5월 5일 754p~767p 40.1 이벤트 드리븐 프로그래밍 이벤트 핸들러(event handler) : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것. 이벤트 드리븐 프로그래밍(event-driven-programming) : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 "함수를 호출"하는 것이 아니라 "브라우저에게 함수 호출을 위임"한다. ex) onclick event - 사용자가 언제 클릭할 지 알 수 없으므로 브라우저에게 특정함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)할 수 있다. 40.2 이벤트 타입 이..
[구현] 프로그래머스 '불량 사용자' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 function solution(user_id, banned_id) { const ch = new Array(user_id.length).fill(0); const set = new Set(); const isPossible = (uId, bId) => { if (uId.length !== bId.length) return false; for (let i = 0; i < uI..
[스택] 프로그래머스 '택배상자' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/131704# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 function solution(order) { let answer = 0; let main = order.reverse(); // pop이 shift 보다 시간 덜 소요 되므로 주문 역순 let left = order.map((el,idx) => idx+1).reverse(); // 컨테이너 벨트 역순 let sub = []; // 보조 컨테이너(stack) while(..
반응형

티스토리툴바