node js 관련 키워드 정리 (node란, 스코프란, 스코프체인이란, 렉시컬 스코핑, 실행 컨텍스트, 호이스팅, this, 호출스택, 이벤트루프, http, 자료구조

- Node js

크럼 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임.

싱글 스레드.

​

- 스코프(Scope)

범위라는 의미.

var one = 1; function click() { var one = 'x'; console.log('one = ', one); } click(); // x

click 함수 내부의 지역변수 one 은 바깥의 전역번수 one을 건들 수 없음.

​

스코프체인

var one = 1; function click() { console.log('one = ', one); } click(); // 1

click 내부의 one이라는 지역변수를 찾고, 없으면 바깥의 one 변수를 찾음.

이렇게 범위를 넓히면서 찾는 관계가 스코프 체인.

​

렉시컬 스코핑(lexical scoping)

var dog = 'paul'; function log() { console.log(dog); } function lexicalScoping() { var dog = 'foo'; log(); } lexicalScoping(); // paul

lexicalScoping 함수 내에서 실행된 log 함수 내의 dog는 전역변수 dog를 가리키고 있는 것을 렉시컬 스코핑이라고 함.

​

- 실행 컨텍스트

scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리.

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념. 다시 말해 코드의 실행 환경.

​

최초 코드 실행 후, 전역 컨텍스트(모든 것을 관리하는 환경)가 생성.

함수를 호출할 때마다 함수 컨텐스트가 생성됨.

참고 - https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0

​

- es6문법 중 let, const, var의 차이

const - 재선언, 변수 재할당 모두 불가능

let - 재선언은 불가능 하나, 재할당은 가능

var - 재선언, 변수 재할당 모두 가능

​

- js호이스팅이란

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

var 에 한해서 (const, let 불가능)

변수 '할당'이 함수 선언보다 우선 순위이고, 함수 선언이 변수 선언보다 우선 순위

변수a 선언 > 함수b 선언 > 변수a 값 할당

console.log('name', name); // undefined var name = 'test'; nameLog(); // test function nameLog() { console.log('name',name); }

​

- 클로저란

내부함수가 외부함수의 컨텍스트에 접근할 수 있는 것. 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미.

참조하면 좋은 글 - https://hyunseob.github.io/2016/08/30/javascript-closure/

​

- this가 무엇?

[javascript]

java에서는 '자기자신'을 뜻하지만, javascript의 this는 다양한(통상 네가지) 방법으로 사용됨.

1. 기본 바인딩(전역객체)

this가 전역 객체(window)를 context 객체로 갖는 것.

console.log(this); // window 객체 var a = 10; console.log(this.a); // 10 function test() { console.log(this); // window 객체 }

2. 암시적 바인딩

어떤 객체를 통해 함수가 호출된다면 그 객체가 this의 context 객체.

var b = 10; function check() { console.log(this.b); } var obj = { b: 20, func1: check, func2: function() { console.log(this.b); } }; check(); // 10 obj.func1(); // 20 const c = obj.func1; c(); // 10 obj.func2(); // 20

3. 명시적 바인딩

첫번째 인자로 넘겨주는 것이 this context 객체. (call, apply, bind)

function test() { console.log('this =',this); } test(); // this = window 객체 test(1); // this = window 객체 test.call(); // this = window 객체 test.call(1); // this = 1 test.apply(); // this = window 객체 test.apply(1); // this = 1 const test2 = test.bind(); test2(); // this = window 객체 const test3 = test.bind(1); test3(); // this = 1

4. new 바인딩.

1. 새 객체가 만들어짐

2. 새로 생성된 객체의 Prototype 체인이 호출 함수의 프로토타입과 연결됨

3. 1에서 생성된 객체를 this context 객체로 사용(명시적으로)하여 함수가 실행됨

4. 이 함수가 객체를 반환하지 않는 한 1에서 생성된객체가 반환됨

function test(v) { this.a = v; this.b = 10; } var check = new test(5); console.log(check); // test {a: 5, b: 10} var check2 = test(5); console.log(check2); // undefined

[Node]

Node 에서 console.log(this); 를 실행하면 {} 값 출력

console.log('this =',this); //this = {}

Node에서의 this는 module.exports와 exports, this 모두 같다.

​

node에서도 전역객체를 가리키는 경우도 있음. (함수 안에서 사용될때)

하지만, 화살표 함수는 this가 상위 환경의 this를 물려받기 때문에 module.exports와 같음.

function test() { console.log(this); } test() // 전역객체 const test1 = () => { console.log(this); } test1(); // {}

​

- 일반함수와 화살표형 함수의 차이점

1. this의 차이. 일반 함수는 자신이 종속된 객체, 화살표 함수는 상위 컨택스트를 가리킴.

function first() { this.name = "첫번째"; return { name: "두번째", call: function() { console.log(this.name); } }; } const func1 = new first(); func1.call(); // 두번째 function second() { this.name = "첫번째"; return { name: "두번째", call: () => { console.log(this.name); } }; } const func2 = new second(); func2.call(); // 첫번째

2.일반함수에서는 argument 문법을 사용할 수 있으나 화살표 함수에서는 사용 불가능.

function foo() { console.log(arguments[0]); } foo(1); // 1 const hoo = () => { console.log(arguments[0]); } hoo(1); // error arguments is not defined

3. new (생성자)로 사용 불가능.

function Person(name,email){ this.name = name; this.email = email; this.walk = "직립 보행" } var person1 = new Person("victolee", "foo@example.com"); var person2 = new Person("worrr", "goo@example.com"); console.log(person1); // {name: "victolee", email: "foo@example.com", walk: "직립 보행"} console.log(person2); // {name: "worrr", email: "goo@example.com", walk: "직립 보행"} const User = (name,email) => { this.name = name; this.email = email; this.walk = "직립 보행" } var user1 = new User("victolee", "foo@example.com"); // 에러발생 Uncaught TypeError: User is not a constructor

​

- null와 undefiend의 차이점

null 은 비어 있는 변수, 값이 존재하지 않음을 의미

undefined 는 변수가 선언되었으나 아무 값도 할당받지 않음 상태를 의미

var test; console.log(test); // undefined console.log(typeof test); // undefined var test1; test1 = null; console.log(test1); // null console.log(typeof test1); // object

정리하면, undefined는 타입이 결정되지않은 변수, null은 타입은 객체며, 비어있는 변수

​

- 호출스택이란?

함수 호출 순서대로 쌓이고, 역순으로 실행됨.

동기 방식

​

​

- 이벤트루프란?

비동기 함수가 호출스택에 쌓이고, 실행되어 백그라운드로 보내진 후, 백그라운드에서 작업처리 후 테스크 큐에 쌓임. 그때 이벤트 루프가 호출 스택이 비어 있는 것을 확인하면 테스크 큐에 쌓인 것들을 하나씩 호출 스택으로 보내주는 역할. 이때 Promise then 과 같은 경우는 마이크로테스크 큐에 쌓이며 우선 순위가 더 높음.

출처 - http://sculove.github.io/blog/2018/01/18/javascriptflow/

​

​

- requestAnimationFrame이란 ?

requestAnimationFrame 은 setInterval 을 대체할 수 있는 함수

지연을 방지하고 가장 최적화된 타이밍에 콜백 함수를 실행하는 비동기 함수

​

- typescript란? 사용 이유? 장점?

자바스크립트언어에 타입을 부여한 언어.

코드 수준에서 미리 타입을 체크하여 오류를 체크해냄

​

- d.ts이란

타입스크립트 선언 파일 d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일

​

- HTTP란

Hyper Text Transfer Protocol.

클라이언트와 서버가 서로 정보를 주고 받을 수 있도록 하는 규약.

​

- HTTP 메서드

1. GET

입력 정보를 URL형태로 전송하는 방법.

POST보다 처리 속도는 빠르지만, URL에 파라미터 정보가

노출되어 암호화하여 전송해야 하는 번거로움 발생.

URL 특성상 제한 길이가 있어 길이가 길면 전송 정보가 누락될 우려가 있음.

2. POST

입력정보를 FORM ACTION형태로 전송하는 방법.

GET방식보다 속도가 느리지만, 보안에 안전하고 길이 제한이 없는 장점이 있음.

3. PUT

요청된 자원을 수정.

4. PATCH

PUT과 비슷한 기능이지만, PUT은 자원 전체를 갱신하는 의미지만, PATCH는 자원 일부분을 수정.

5. DELETE

요청된 자원을 삭제.

​

- Rest, Rest api, Restful

REST(Representational State Transfer)란 어떤 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI(Resource)로 요청을 보내는 것.

Get, Post 등의 방식(Method)을 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(Representation of Resource)으로 표현.

이러한 REST 기반의 API를 웹으로 구현한 것이 RESTful API.

URI에 POST방식을 사용하여 JSON형태의 데이터를 전달할 수 있고, CRUD 연산에 대한 요청을 할 때, 요청을 위한 Resource(자원, URI)와 이에 대한 Method(행위, POST) 그리고 Representation of Resource(자원의 형태, JSON)을 사용하면 표현이 명확해지므로 이를 REST라 하며, 이러한 규칙을 지켜서 설계된 API를 Rest API 또는 Restful한 API라고 함.

​

- 자료구조

대량의 데이터를 효율적으로 관리할 수 있는 데이터의 구조.

어떤 데이터 구조를 사용하느냐에 따라, 코드 효율이 달라지며 코드 상에서 효율적으로 데이터를 처리하기 위해 데이터 특성에 따라 체계적으로 데이터를 구조화해야 함.

​

- 자료구조 종류

1. 배열(Array)

데이터를 나열하고, 각 데이터를 인덱스에 대응해주고, 인덱스로 데이터를 접근할 수 있도록 구성된 데이터 구조.

​

2. 큐(Queue)

줄을 서는 행위와 유사.

FIFO(First-In, First-Out) 또는 LILO(Last-In, Last-Out) 방식으로 스택과 꺼내는 순서가 반대.

​

3. 스택 (Stack)

데이터를 제한적으로 접근할 수 있는 구조.

한쪽 끝에서만 자료를 넣거나 뺄 수 있는 구조.

가장 나중에 쌓은 데이터를 가장 먼저 빼낼 수 있는 데이터 구조.

​

4. 링크드 리스트 (Linked List)

연결 리스트라고도 하며, 배열의 정해진 크기의 공간에 데이터를 나열해야하는 단점을 극복한 무한정 크기의 데이터 공간. 배열은 순차적으로 연결된 공간에 데이터를 나열하는 데이터 구조이지만, 링크드 리스트는 떨어진 곳에 존재하는 데이터를 화살표로 연결해서 관리하는 데이터 구조.

​

5. 해쉬 테이블

키에 데이터를 저장하는 데이터 구조.

Key 를 통해 바로 데이터를 받아올 수 있으므로, 검색 속도가 획기적으로 빨라짐.

​

6. 트리

노드로 이루어진 자료구조.

​

7. 힙

데이터에서 최대값과 최소값을 빠르게 찾기 위해 고안된 완전 이진 트리.

​

​

- cookie, session storage, local storage 각각의 차이점

쿠키는 만료 기한이 있는 키-값 형태의 브라우저 저장소.

4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송됨.

​

웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage.

영구 저장소 (LocalStorage)와 임시저장소 (SessionStorage)로 나뉨.

키-값 스토리지의 형태이며 둘의 차이는 영구성의 차이.

서버로 전송을 이루어지지 않음.

용량의 제한이 없음.