파카

이벤트 시스템이란 ? 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에 접근이 가능해서 값을 임의로 접근하여 변경할 수 있는 문제가 있다. 이런 문제상황에서 특정한 데이터를 보호하고 싶을 때 클로저를 사용할 수 있다. // 클로저는 함수 안쪽에서 함수가 만들어질..

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..

프로토타입이란 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이란 한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었기때문에 이 연결의 끝은 Object 객체의 프로토타입 Object 다. // 프로토타입(prototype) 방식의 클래스 // 명명규칙 생성자 함수는 암묵적으로 대문자로 시작한다고 한다. function UserCreate(first, last) { this.firstName = first this.lastName = last } // 생성자 함수 (new) // user1이나 user2를 인스턴스라고 한다. // 인스턴스란? // new 라는 키워드를 통해서 ..

계속 머릿속에서만 생각하니 더 복잡해져만 가는 기분이 들어 역시 남겨놓고 수정해야지 하면서 계속 기록에 남겨놓으려고 한다. 객체안에는 함수를 넣어서 사용할 수 있다. 자연스럽게 Getter와 Setter에 대해 알아보자. 그 전에 JS의 정의를 보면 아래와 같다. Javascript는 프로토타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다. 이게 무슨 소리일까.. 간단히 정리해보자 - 자바스크립트는 객체지향언어이다. - 일반적인 다른 언어(C++, JAVA)와는 다르다. 객체 지향 언어에는 2가지 큰 틀이 있다 클래스 기반 프로토타입 기반 (객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법이다. 이렇게 만들어진 객체 역시 자기자신의 프로토타입을 갖는다. 이 새로운 객체의 ..

객체는 "사람" 이라는 하나의 카테고리라고 할수 있고 클래스는 붕어빵을 만들어주는 틀이라고 했었던 기억이 있다. 근데 JS는 일반적인 언어의 클래스와는 다르다 그래서 생각보다 이해하는데 오랜 시간 걸렸다.. 검색도 많이 할 수 밖에 없었고.. 비교가 필수였다.. 상세한 내용은 기회가 된다면 아니 앞으로 차근차근 더 다뤄보도록 하고 일단 코드를 통해 개념을 익히려고 한다. // 여기 하나의 객체를 선언하고자 한다. // 객체는 기본적으로 {} 를 통해 선언된다. [] 배열 const rainbow = {1: 'red', 2: 'orange', 3: 'yellow'}; // for in // 객체의 프로퍼티를 순회할 때 사용할 수 있다. // prop for(let prop in rainbow) { if(!..

일단은 이렇다 계속 알아보고 수정해야 할 부분으로 기본 문법은 아래와 같다. // 호이스팅 (Hoisting) // 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 const hf1 = 7; // testErrorDouble is not function error // 아래의 주석이 된 testDouble 은 // 함수 표현 방식으로 선언 후 위에 작성하였기 때문에 에러가 발생한다. // testErrorDouble(); const testErrorDouble = function () { console.log(hf1 * 2); } hoistingFunction(); function hoistingFunction() { console.log (hf1 * 2); }