파카

이벤트 시스템이란 ? DOM을 통해 코드로 특정하지 못하는 상태를 특정하고 활용하는 것을 말한다 여기에는 아래 2가지 개념이 있다. // Bubbling // 안쪽에 있는 요소에서 이벤트가 발생했을 때 밖으로 확산되어 나가는 것 // 이벤트가 발생한곳에서 이벤트 리스너가 있는 곳으로 상위계층으로 찾아가는 이벤트 버블링 // Capturing // 이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아 들어가는 이벤트 캡처링 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있다. 코드를 통해 실습해보자 HTML 코드 더보기 HTML을 div내에 영역을 분리해서 클릭이벤트를 확인해보고자 한다. 아래 예제를 통해 콘솔을 보면서 이해해..

함수란 계산이나 처리를 위한 코드의 묶음이다. 일반적으로 함수는 해당 함수가 다 처리가 되면 함수가 종료가 된다. 이런 함수를 조금 독특하게 사용할 수 있는 방법 중에 하나가 클로져다. // 일반적인 함수 let saveNumber = 1; function increment() { return saveNumber++; } console.log(increment()); console.log(increment()); saveNumber = 200; console.log(increment()); // saveNumber에 접근이 가능해서 값을 임의로 접근하여 변경할 수 있는 문제가 있다. 이런 문제상황에서 특정한 데이터를 보호하고 싶을 때 클로저를 사용할 수 있다. // 클로저는 함수 안쪽에서 함수가 만들어질..

내가 빠르게 찾아보기 위해 정리한 글 개념적으로 필요한 지식들을 정리하면서 이해하고 머리에 담아보려고 한다. 먼저 결론부터 정리하면 동작원리는 다음과 같다. 1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.) 2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.) 3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정) 4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.) 5. 개별 노드를 화면에 페인트한다.(or 래스터화) ++ 세부적이 내용 DOM 구축 - 브라우저는 우선 html 파일을 DOM으로 변환(파싱)합니다. : 파싱..

async 와 await란 ? 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 방법 이전에 사용했던 callback 과 promise 문법을 async와 await를 이용한 예시 코드를 통해 이해해보자 function delay(millisecond) { return new Promise((resolve, reject) => { setTimeout(() => { // 랜덤함수를 이용하여 랜덤하게 함수를 실행시키고 싶을 때 if (Math.floor(Math.random() * 10) % 2 === 0) { resolve("sucess"); } else { reject("failure"); } }, millisecond); }); } /..

Promise 란 ? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. promise의 간단한 정의다. 지난번에 이어서 callback에 의한 비동기처리를 promise를 이용하여 단점을 보완하는 코드까지 보면서 이해해보자. 기초 개념 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 Pending(대기) // Pending(대기) new Promise(); // 메서드를 호출할 때 콜백 함수를 선언할 수 있고 인자로 resolve 와 reject 이다. new Promise(function(resolve, reject)..

비동기 처리에 대해 내용을 정리하려고 한다. 비동기 처리란 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 코드를 통해 비동기 처리를 이해해보자 먼저 비동기와 관련된 코드들을 보자 ( 캡틴판교님 블로그에서 가져온 예제 ) // ajax 통신 function getData() { var tableData; // 값을 가져오는 요청을 했지만 기다려주지 않는다. $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefine..

일급객체에 대해 찾아보면 아래와 같은 내용을 볼 수 있다. 일급객체는 아래와 같은 특징을 가지고 있다. 변수나 데이타에 할당 할 수 있어야 한다. 객체의 인자로 넘길 수 있어야 한다. 객체의 리턴값으로 리턴 할수 있어야 한다. 일급함수 프로그래밍 언어에서 함수라고 하는 코드의 묶음을 일반적인 값처럼 취급한다는 말을 말한다. 즉 일반적인 값처럼 변수에 값을 넣을 수 있다. 인자로 받는 값이 함수가 될 수도 리턴받는 값이 함수일 수도.. 일급함수이자 일급객체에 대해 글로보고 충분히 이해가 가면 좋지만 역시 코드로 보는게 더 이해하기 쉬울 거 같다. 코드를 통해 알아보자 크게 2가지 경우로 나눌 수 있는 거 같다. case 1 // 간단한 예제를 작성해보자 // 인자로 함수가 들어옴 let add = calc..

https://www.acmicpc.net/problem/1339 1339번: 단어 수학 첫째 줄에 단어의 개수 N(1 ≤ N ≤ 10)이 주어진다. 둘째 줄부터 N개의 줄에 단어가 한 줄에 하나씩 주어진다. 단어는 알파벳 대문자로만 이루어져있다. 모든 단어에 포함되어 있는 알파벳은 최대 www.acmicpc.net 이런 문제를 계속 보다가 답을 찾지 못하고 나서 다른 분들의 답을 보면 아쉽기만 하다.. 왜 생각을 못했을까.. 코드 더보기 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : '01..Baekjoon/01..Greedy/1339.txt'; let input = fs.readFileSy..

https://www.acmicpc.net/problem/11399 11399번: ATM 첫째 줄에 사람의 수 N(1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄에는 각 사람이 돈을 인출하는데 걸리는 시간 Pi가 주어진다. (1 ≤ Pi ≤ 1,000) www.acmicpc.net 위 문제는 지문이 길어서 어려운걸까 했지만 문제에서 힌트가 있었다. 해당 조건에 맞게 누적합을 구하면 되는 문제였다. 코드 더보기 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : '01..Baekjoon/01..Greedy/11399.txt'; let input = fs.readFileSync(filePath).toS..

그리디 알고리즘 문제를 풀어보려고 한다. 내가 요즘 자주 참고하고 공부할 때 도움을 얻는 큰돌님의 글을 참고하여 문제에 접근하고 풀어보려고 노력중이다. 아래는 큰돌님의 블로그에서 따온 글이다. 그리디는 각단계마다 지역적 최적해가 궁극적으로 전역최적해가 되는 것을 말한다. 지금의 state 혹은 idx에서 최선이라고 생각하는 해가 결국은 이 문제의 답이 되는 문제 문제를 풀면서 아래의 문제를 푸는 방법에 대해 생각 후 바로 문제에 접근해보려려고 한다. 문제를 푸는 방법 1. 문제를 봅니다. 2. 문제를 해석합니다. 3. 코드를 작성합니다. ​ 크게 3가지의 과정을 통해서 문제를 풀게 됩니다. 여기서 중요한 점은 2번 문제를 해석하는 것​입니다. 문제를 처음에 봤을 때 이러한 일련의 생각들이 일어나야 합니다..