Life and IT

JS 인스턴스 클래스나 프로토 타입으로 만들어낸 것. 생성된 인스턴스의 원래 객체인 클래스 또는 프로토타입이 가지고 있는 프로퍼티와 메서드를 모두 상속받는다는 특징이 있다. export default 모듈 모듈을 내보낼 때 default 키워드가 붙으면 해당 모듈엔 하나의 개체만 존재한다고 명시하는 것이다. default가 있으면 모듈을 불러올 때 중괄호로 감싸지 않고 기입이 가능하다. 프로토타입 오브젝트의 메소드를 사용할 때에, 가장 가까운 프로토타입 오브젝트의 메서드를 먼저 참고한다. => 메서드 오버라이드 Ajax : 비동기 처리를 가능하게 만듬 V8 : 서버 로직 상당수를 브라우저 로직으로 넘어오게 하여 프런트 엔드 개발자에 대한 인식이 달라짐 nodeJS : 프론트 엔드와 백엔드를 모두 다룰 수..

https://programmers.co.kr/learn/courses/30/lessons/12982 코딩테스트 연습 - 예산 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 programmers.co.kr 나의 풀이 시간 효율성을 고려해 for문을 사용하였다. 길이가 1인 배열 d를 고려해 조건문을 활용하여 early return 하였다. function solution(d, budget) { let answer; if (d.length === 1) { return answer = d[0] a - b); for (let i = 0; i < d.length; i++) ..

Stack은 queue 없이 이야기할 수 없다. 큐는 First-In First-Out을 따른다. 큐는 대기열이며, 사람들이 줄을 서는 것과 비슷하다. 스택처럼 큐도 마찬가지로 대기열에서 빼낼 다음 요소가 무엇인지 엿볼 수 있다. 큐는 프린터기처럼 요청한 작업을 순서대로 처리한다. 하지만 Priority queues라는 것도 존재한다. 우선 순위우선순위 큐는 큐 안의 요소에도 우선순위를 할당한다. 따라서 우선 순위가 높은 항목이 먼저 큐에서 제거된다. 이것은 네트워킹에 유용하다. 일부 패킷은 다른 패킷보다 더 중요하기 때문이다. 비디오를 스트리밍하는 경우 나중에 패킷을 받으면 일부 프레임을 건너뛸 가능성이 높기 때문에 우선순위가 높다. 반면 Dropbox에 동기화하면 동기화를 계속하기 위해 네트워크 트래..

fetch API는 비동기 방식으로, 서버에 요청을 하면 응답을 받는 API이다. fetch().then() function callback() { console.log('response end'); } fetch('html').then(callback); console.log(1); console.log(2); 위 예제 코드를 보면 fetch를 통해 html 데이터를 요청하고, 요청에 대한 응답이 완료되었을 때 then 메서드를 통해 callback을 실행하고 있다. 위 과정이 진행되는 동안 아래의 1, 2 콘솔 출력이 진행되며 결과는 아래와 같다. 1 2 response end fetch API - response 객체 fetch API 가이드에 따르면 then에 삽입된 함수를 실행시킬 때, 함수의 ..

클로저는 세 가지 스코프 체인을 가진다. 클로저 자신에 대한 접근 - 자신의 블록 내에 정의된 변수 외부 함수의 변수에 대한 접근 - 클로저 자신이 선언된 블록을 의미한다. 전역 변수에 대한 접근 내부 함수는 외부 함수의 변수뿐만 아니라 매개 변수에도 접근할 수 있다. 다만 외부 함수의 arguments 객체에는 접근할 수 없는데, 모든 함수에는 arguments가 자동으로 선언이 되기 때문이다. 클로저 함수 또한 자신만의 arguments가 존재하기 때문에 외부 함수의 arguments를 다른 변수에 저장하지 않는 한, 클로저는 외부 함수의 arguments에 접근할 수 없다. 클로저는 외부 함수의 변수에 대한 참조를 저장한다. 이는 클로저가 실제 값에 접근하는 것이 아닌 값의 참조에 접근한다는 것을 ..

다음과 같은 생성자 함수가 있다고 해보자. function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); }; 그리고 Teacher라는 생성자 함수를 정의해보자. function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gen..

JS에서는 객체를 상속하기 위하여 prototype이라는 방식을 사용한다. 이번 포스팅에서는 프로토타입 체인이 동작하는 방식을 알아보고, 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 방법을 정리해보겠다. 또한 function의 타입이 Object가 아닌 function으로 나오는 이유도 알아보겠다. JS는 프로토타입 기반 언어이다. 모든 객체들은 프로토타입 객체를 가진다. 프로토타입 객체는 또 다시 상위 프로토타입 객체를 가질 수 있으며 이를 프로토타입 체인이라고 부른다. 프로토타입 체인은 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. 정확히 말하자면 상속되는 속성과 메소드들은 객체의 생성자의 프로토타입이라는 속성에 정의되어 있다. 생성..

노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다. 노트 트리는 최상위 레벨인 루트 노드(root node)부터, 가장 낮은 레벨인 텍스트 노드(text node)까지 뻗어 내려간다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드의 종류 W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드이다. HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같다. 노드 설명 document node HTML 문서 전체를 나타내는 노드 element n..

클로저는 아래의 글에서 간략하게 설명했었던 개념이다. 이번 글에서는 클로저에 대해 자세히 알아보고 모르는 개념들을 함께 정리해보려고 한다. https://lifeandit.tistory.com/60 고차 함수 그리고 중첩 함수 고차 함수(Higher Order Function; HOF) 고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수이다. 다른 함수(caller)의 인자로 전달되는 함수를 콜백 함수(callback function)라고 한다. 콜백 함수.. lifeandit.tistory.com 실행 컨텍스트는 동작 원리를 담고 있는 개념으로, 자바스크립트 엔진에서는 물리적 객체의 형태로 관리(나열 구조) 클로저(closure)의 개념 클로저는 자바스크립트 고유의 개념은 아니지만..

고차 함수(Higher Order Function; HOF) 고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수이다. 다른 함수(caller)의 인자로 전달되는 함수를 콜백 함수(callback function)라고 한다. 콜백 함수를 전달받은 함수는 이 콜백 함수를 필요한 시점에 호출하거나, 클로저를 생성하여 반환한다. 클로저 MDN의 정의는 다음과 같다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 여기서 함수는 내부 ..