목록모든 글 (126)
코딩쌀롱
문제 프로그래머스 62048 멀쩡한 사각형 문제 가로(w), 세로(h)의 사각형에 1, 1격자가 그려져있다. 이 직사각형에 대각선을 그었을 때 대각선이 지나가지 않는 격자칸의 개수를 구하는 문제 시도했지만 실패 // 정사각형이면 w * w - w; // 직사각형이면 w * h - (작은변 x 기울기올림) function solution(w, h) { var answer = 1; if(w === h) answer = (w * w) - w; else { const gradient = h / w < 1 ? w / h : h / w; const smaller = w < h ? w : h; const num = Math.ceil(gradient); answer = w * h - (smaller * num); } ..
1-1. 데이터 타입의 종류 - 기본형(primitive type): number, string, boolean, null, undefined, symbol - 참조형(reference type): object, array, function, Date, RegExp, Map, WeakMap, Set, WeakSet 1-2 데이터 타입에 관한 배경지식 메모리와 데이터 컴퓨터는 모든 데이터를 0, 1로 바꿔 기억. - 비트(bit): 0, 1을 표현하는 하나의 메모리 조각, 고유한 식별자로 위치를 확인 - 바이트(byte): 8bit 모든 데이터는 바이트 단위의 식별자, 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결 1-3 변수 선언과 데이터 할당 - 변수 선언: 메모리에서 비어있는 공간(변수 영역)을..
📌 배열에서 최소값 찾기 ✱하고 싶었던 것 // 5의 배수를 배열에 담아서 사용 const multipleOfFive = []; for (let i = 40; i el > grade); } 다음 방법으로는 find()메서드를 사용했다. 이렇게 하면 multipleOfFive 배열의 원소 중 콜백함수를 만족하는 첫 번째 요소를 반환한다. grade보다 커야한다는 조건을 콜백에 쓰고, 최소값인 조건은 multipleOfFive 배열의 원소가 오름차순으로 정렬되어 있기 때문에 첫 번째 원소가 최소값일 수밖에 없다. + find() 메서드 구문 arr.find(callback(el, idx, arr), thisArg); // idx, arr, thisArg는 optional 📌 문자열 자르기 ✱하고 싶었던 것 ..
📌 배열의 중복 원소 제거 Set reduce() reduce(), indexOf() filter(), indexOf() const arr = [2, 1, 5, 1, 6, 5, 2, 3]; // 1. Set // Set을 사용하면 유니크한 Set객체를 반환. // Set 객체를 다시 Array.form으로 배열로 변경 const set = Array.from(new Set(arr)); // 2. reduce // Array.includes(value): value가 Array에 존재하는지 판단해 true,false 반환 arr.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc,curr], []); // ES6을 사용 못 할 때 // 1. reduce, ..
pr64061(doll_game).js (프로그래머스 64061문제 - 다른 풀이) 함수가 어떻게 실행되는지 이해하기 위해서 reduce, map 메서드, spread 연산자 학습. const transpose = matrix => matrix.reduce( (result, row) => row.map((_, i) => [...(result[i] || []), row[i]]), [] ); 📌 reduce() 두 번째 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정할 수 있다. (여러 자료형 가능) map, filter, find 함수로 구현할 수 있는 기능은 모두 reduce로도 가능하다. ✱ 매개변수 // initialValue는 optional arr.reduce(callback(..
✏️비동기(Asynchronous) 📌 예시 이해하기 ✱1번 function test() { let result = null; fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => result = json) return result; } test(); // null 서버와 통신(fetch)하는 일은 브라우저가 하는 일이니까 브라우저에게 보내고 다음 코드를 실행. 그래서 result에 원래 담겨져있던 null 반환. function test() { fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => r..
📌 addEventListener의 콜백함수 ✱문제 발생 // class TodoView 안에 있는 메서드 initEvent(todoViewObj) { // 콜백함수가 기명함수일 때 this.addButton.addEventListener("click", this.addList.bind(this)); // 콜백함수가 익명함수일 때 this.listWrapper.addEventListener("click", function({target}) { if(target.nodeName === 'LABEL') { todoViewObj.makeLineThrough(target); } if(target.nodeName === 'I') { todoViewObj.removeListItem(ta..
✏️Event Delegation 캡처링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 이벤트 위임은 유사한 여러 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 컨테이너에 하나의 핸들러를 할당 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링. ✱장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거..
✏️Event Bubbling, Capturing, target 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API의 이벤트 전파(Event Propagation)는 두 가지 방식으로 구분된다. 이 두 가지 방식이 Bubbling, Capturing이다. Bubbling: 이벤트가 발생한 요소부터 window까지 이벤트 전파 (하위 → 상위) Capturing: window로부터 이벤트가 발생한 요소까지 이벤트 전파 (상위 → 하위) 📌 Bubbling 가장 안 쪽의 를 클릭하면 onclick 핸들러 동작 onclick 핸들러 동작 onclick 핸들러 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러 동작 이런 흐름을 이벤트 버블링이라고 부른다. 이벤트가 제일 ..
📌 bind() 문제 발생 let view = new View(); view.addButton.addEventListener("click", view.addList); 클래스의 view.addList 함수 본체에 this는 view 객체를 가리키는데, addEventListener에서 this는 이벤트 target이 되는 element 객체를 가리킨다. 이런 차이로 정상적으로 동작하지 않는 문제가 발생했다. 해결 방법 let view = new View(); view.addButton.addEventListener("click", view.addList.bind(view)); bind()메서드로 this가 가리키는 객체를 직접 지정해줘서 해결했다. 📌 Event Delegation 문제 발생 // cla..