Life and IT

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

JS는 싱글 스레드이다. 자바스크립트는 싱글 스레드 언어이다. Call Stack이 하나이기 때문인데, 전역 Main 함수를 포함하여 함수의 실행을 하나의 스레드가 순회하면서 실행한다. 하지만 모든 연산을 하나의 스레드에서 처리하는 방식만이 존재한다면 자바스크립트는 지금까지 살아남지 못했을 것이다. JS의 비동기 프로그래밍 특징 이러한 단점을 극복하기 위해 비동기 프로그래밍을 사용한다. 비동기적 코드의 반대말은 동기적 코드이다. 동기적 코드는 작업이 끝나야 다음 작업을 진행한다. 비동기적 코드는 현재 실행 중인 코드의 완료 여부와 상관없이 바로 다음 코드로 넘어간다. CPU의 계산으로 즉시 처리가 가능한 코드는 동기적인 코드이다. 하지만 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행..

https://dev.to/sag1v/javascript-the-this-key-word-in-depth-4pkm JavaScript - The "this" key word in depth Follow these 6 rules to determine what “this” is bound to dev.to The challenge this 키워드에 대한 MDN의 정의는 다음과 같다. 대부분의 경우, this 키워드는 함수가 어떻게 호출되는지(runtime binding; 실시간 바인딩)에 따라 결정된다. 그것은 실행 중에 인자에 의해 설정될 수는 없으며, 함수가 호출될 때마다 값이 달라질 수 있다. MDN의 정의대로 this는 런타임에서 결정된다. 런타임 정의> 런타임이란 컴파일 과정을 마친 프로그램이 사..

https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj Take 'this' Quiz, Understand How 'this' Works in JavaScript Among all the abstract ideas JavaScript has to offer, the 'this' keyword can be one of the most chall... dev.to Challenge #1 const call = { caller: "mom", says: function() { console.log(`Hey, ${this.caller} just called.`); } }; call.says(); What will the ..

https://dmitripavlutin.com/javascript-this-interview-questions/#question-1-variable-vs-property 7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them? 7 interview questions to challenge your knowledge on "this" keyword in JavaScript. dmitripavlutin.com Question 4: Artificial method How can you call logMessage function so that it logs "Hello, World!"? const object = { message..

https://dmitripavlutin.com/javascript-this-interview-questions/#question-1-variable-vs-property 7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them? 7 interview questions to challenge your knowledge on "this" keyword in JavaScript. dmitripavlutin.com 위 사이트에서 정확한 this의 객체를 파악하는 능력을 기르기 위한 7가지 퀴즈가 있어 풀이해보려 한다. 아직 this를 찾는 일이 쉽지 않아 이렇게 문제를 보면 풀어보면서 꾸준히 연습해야겠다. Question 1: Var..

클로저는 아래의 글에서 간략하게 설명했었던 개념이다. 이번 글에서는 클로저에 대해 자세히 알아보고 모르는 개념들을 함께 정리해보려고 한다. 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)과의 조합이다. 여기서 함수는 내부 ..

Primitive (원시의) 값과 Reference (참조) 값의 차이점 JS에는 7가지의 자료형이 있다. 나는 이것을 스불ㄴ,,너어우스!! (쓰불넘쓰)라고 부른다.. 변수 타입의 앞글자에 내 마음대로 음절을 만든 것인데 이렇게 만든 이유는 그냥 외우기 쉬워서 그랬다.. 스(S:string) - 문자열 불(B:boolean) - 불리언 ㄴ(N:number) - 숫자 너(N:null) - null 어(U:undefined) - undefined 우(O:object) - object 쓰(S:symbol) - symbol 여기서 Primitive 값(원시 값)은 object를 제외한 나머지 타입들을 말한다. 따라서 Reference 값(참조 값)은 object이다. 원시 값은 실제 자료를 가리키며, 참조 값은..

npm이란? npm은 Node Package Manager의 약자로, 자바스크립트 언어를 위한 패키지 관리자이다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생테계이기도 하다. NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며, 설치와 관리를 수행할 수 있는 CLI(Command Line Interface)를 제공한다. 서드파티(주 기술을 이용하여 파생되는 따위의 것들을 생산하는 집단) 모듈을 패키지라고 한다. 그리고 모든 패키지엔 package.json 파일이 있다. npm install + no arguments npm install를 실행하면 package.json의 dependencies 필드 정보를 기반으로 직접 패키지를 생성한..