[면접 기출] CS 기출 문제1

GET, POST 방식의 차이점 (NetWork)

 GET과 POST의 특징만 보아도 차이가 나긴하지만 추가적으로 차이점을 정리해보면 다음과 같다.

 

• 사용목적 : GET은 서버의 리소스에서 데이터를 요청할 때, POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용한다.
• DB로 따지면 GET은 SELECT 에 가깝고, POST는 Create 에 가깝다고 보면 된다.
  
  
• 요청에 body 유무 : GET 은 URL 파라미터에 요청하는 데이터를 담아 보내기 때문에 HTTP 메시지에 body가 없다. POST 는 body 에 데이터를 담아 보내기 때문에 당연히 HTTP 메시지에 body가 존재한다.
  
  
• 멱등성 (idempotent) : GET 요청은 멱등이며, POST는 멱등이 아니다.
  
  

멱등이란?

멱등의 사전적 정의는 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미한다.

GET은 리소스를 조회한다는 점에서 여러 번 요청하더라도 응답이 똑같을 것 이다. 반대로 POST는 리소스를 새로 생성하거나 업데이트할 때 사용되기 때문에 멱등이 아니라고 볼 수 있다. (POST 요청이 발생하면 서버가 변경될 수 있다.)

JavaScript Event Loop (JavaScript)

자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다.

그러나 자바스크립트가 사용되는 환경을 생각해보면, 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.

예를 들면, 웹브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, Nodejs기반의 웹서버에서는 동시에 여러개의 http요청을 처리할 수 있다.

 

- 위 그림에서 각 요소의 역할이 어떻게 되나요?

자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다.

(자바스크립트 엔진에서 제공되는 것은 아니고, 브라우저나 node.js에서 지원된다.
nodejs는 libuv 라이브러리를 사용하여, 이벤트 루프를 제공한다.)

 

이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고,

태스트 큐에 담겨있는 콜백 함수들을 콜스택에 넘겨준다.

 

* 이벤트 루프가 태스트 큐에서 콜스택으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행된다.

 

태스크 큐에서는 web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이다.

이벤트 루프가 정해준 순서대로 줄을 서있으며, FIFO방식을 따른다.

* 태스크 큐는 하나의 큐로 이루어져 있지 않는다. Microtask Queue, Animation Frames 등 여러개의 큐로 이루어져 있다.

 

Web API는 브라우저에서 자체 지원하는 api이다. Web API는 DOM이벤트, AJAX, setTimeout등의 비동기 작업등을 수행할 수 있도록 api를 지원한다.

 

- 런타임 환경에서 어떻게 비동기 코드가 실행되는 건가요?

자바스크립트 코드들이 실행될 때, Web API가 지원하는 비동기 작업을 수행하는 코드가 실행된다고 생각해보자.

비동기 작업을 수행하는 코드는 아래의 순서로 실행된다.

 

1. 코드가 호출스택에 쌓인 후, 실행되면 자바스크립트 엔진은 비동기 작업을 Web API에게 위임한다.

2. Web API는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 태스트 큐에 넘겨주게된다.

 

3. 이벤트 루프는 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백함수를 콜스택으로 넘겨준다.

4. 콜스택에 쌓인 콜백함수가 실행되고, 콜스택에서 제거된다.

 

- 왜 자바스크립트는 싱글 스레드로 불리나요?

하나의 메인스레드와 하나의 콜스택을 가지고 있다는 관점에서 그렇게 불린다.

RESTFul API란 (NetWork)

 

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

즉 REST란 

1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
2. HTTP Method(POST, GET, PUT, DELETE)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

 

CRUD Operation이란
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 
REST에서의 CRUD Operation 동작 예시는 다음과 같다.

 

Create : 데이터 생성(POST)
Read : 데이터 조회(GET)
Update : 데이터 수정(PUT)
Delete : 데이터 삭제(DELETE)

 

REST 구성 요소

REST는 다음과 같은 3가지로 구성이 되어있다. 

 

1. 자원(Resource) : HTTP URI
2. 자원에 대한 행위(Verb) : HTTP Method
3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

REST의 특징

1. Server-Client(서버-클라이언트 구조)
2. Stateless(무상태)
3. Cacheable(캐시 처리 가능)
4. Layered System(계층화)
5. Uniform Interface(인터페이스 일관성)

REST의 장단점

장점 

• HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
• HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해 준다.
• HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
• Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
• REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
• 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
• 서버와 클라이언트의 역할을 명확하게 분리한다.

 

단점 

• 표준이 자체가 존재하지 않아 정의가 필요하다.
• 사용할 수 있는 메소드가 4가지밖에 없다.
• HTTP Method 형태가 제한적이다.
• 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 정보의 값을 처리해야 하므로 전문성이 요구된다.
• 구형 브라우저에서 호환이 되지 않아 지원해주지 못하는 동작이 많다.(익스폴로어)

---

REST API란?

 

 

RESPT API란 REST의 원리를 따르는 API를 의미합니다.

하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있으며 해당 규칙을 알아 보겠습니다.

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

 

2. 마지막에 슬래시 (/)를 포함하지 않는다.

 

3. 언더바 대신 하이폰을 사용한다.

 

4. 파일확장자는 URI에 포함하지 않는다.

 

5. 행위를 포함하지 않는다.

---

RESTful이란?

 

 

 

RESTFUL이란 REST의 원리를 따르는 시스템을 의미합니다. 하지만 REST를 사용했다 하여 모두가 RESTful 한 것은 아닙니다.  REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며

모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 REST API의 설계 규칙을 올바르게 지키지 못한 시스템은 REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

 

-출처
TCP 3-way-handshake? (NetWork)

* TCP 3-way Handshake 란?

 

TCP는 장치들 사이에 논리적인 접속을 성립(establish)하기 위하여 three-way handshake를 사용한다.

 

TCP 3 Way Handshake는 TCP/IP프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 

먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미한다..

 

Client > Server : TCP SYN

Server > Client : TCP SYN ACK

Client > Server : TCP ACK

 

여기서 SYN은 'synchronize sequence numbers', 그리고 ACK는'acknowledgment' 의 약자이다.

이러한 절차는 TCP 접속을 성공적으로 성립하기 위하여 반드시 필요하다.

 

출처: https://mindnet.tistory.com/entry/네트워크-쉽게-이해하기-22편-TCP-3-WayHandshake-4-WayHandshake [Mind Net]

 

Javascript Hoisting (JavaScript)

호이스팅(Hoisting)의 개념
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

호이스팅이란
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.
호이스팅의 대상
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

 

TDD란 무엇이며 어떠한 장점이 있는가

 

TDD 란 무엇인가

Test-Driven Development(TDD)는 매우 짧은 개발 사이클의 반복에 의존하는 소프트웨어 개발 프로세스이다. 우선 개발자는 요구되는 새로운 기능에 대한 자동화된 테스트케이스를 작성하고 해당 테스트를 통과하는 가장 간단한 코드를 작성한다. 일단 테스트 통과하는 코드를 작성하고 상황에 맞게 리팩토링하는 과정을 거치는 것이다. 말 그대로 테스트가 코드 작성을 주도하는 개발방식인 것이다.

Add a test

테스트 주도형 개발에선, 새로운 기능을 추가하기 전 테스트를 먼저 작성한다. 테스트를 작성하기 위해서, 개발자는 해당 기능의 요구사항과 명세를 분명히 이해하고 있어야 한다. 이는 사용자 케이스와 사용자 스토리 등으로 이해할 수 있으며, 이는 개발자가 코드를 작성하기 전에 보다 요구사항에 집중할 수 있도록 도와준다. 이는 정말 중요한 부분이자 테스트 주도 개발이 주는 이점이라고 볼 수 있다.

Run all tests and see if new one fails

어떤 새로운 기능을 추가하면 잘 작동하던 기능이 제대로 작동하지 않는 경우가 발생할 수 있다. 더 위험한 경우는 개발자가 이를 미처 인지하지 못하는 경우이다. 이러한 경우를 방지하기 위해 테스트 코드를 작성하는 것이다. 새로운 기능을 추가할 때 테스트 코드를 작성함으로써, 새로운 기능이 제대로 작동함과 동시에 기존의 기능들이 잘 작동하는지 테스트를 통해 확인할 수 있는 것이다.

scpoe, Closure(javascript)란? 

 

scope란?

변수에 접근할 수 있는 범위를 의미한다.

이 범위는 변수의 접근성을 관리하는 정책이며, scope에는 global(전역)와 local(지역) 2개의 범위가 존재한다.

 

global(전역) scope

const name = "Lim"; // 전역 스코프
function print(){
	console.log(name); // Lim
}

print();
console.log(name); // Lim

먼저 name이라는 변수를 정의하고 print 함수 블록 안과 밖에 console.log(name)을 출력하면 둘 다 같은 값이 나온다.

따라서, 변수 name은 전역 스코프라고 볼 수 있다.

전역 scope로 선언된 변수는 모든 범위에서 사용할 수 있다. 

 

local(지역) scope

코드 블록 내부에서 변수를 선언하고, 외부에서 console.log(bool) 했을 때 오류가 발생한다. 

if (true){
// "if" block scope
    const bool = "true";
    console.log(bool); // "true"
}

console.log(bool); // ReferenceError: message is not defined

그 이유는 코드 블록 { ... } 안에서만 변수 bool을 사용할 수 있다.

코드 블록은 if문 뿐만 아니라 for, while문도 범위를 만들 수 있고, 또 코드 블록만 독립적으로 만들 수 있다.

독립형 코드 블록

{
  // block scope
  const bool = "true";
  console.log(bool); // "true"
}
console.log(bool); // throws ReferenceError

이러한 것을 지역 scope라 하고, 해당 지역과 그 지역의 하부 지역에서만 접근할 수 있으며 그 지역을 벗어나면 접근할 수 없는 것이 특징이다.

 

const, let, var의 가능 범위

const와 let은 코드 블록 범위에 속하고, var는 블록 범위에 속하지 않는다.

if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

var로 선언된 count 변수가 if 코드 블록 내에서 뿐만 아니라, 코드 블록 밖에서도 출력된다.

그 이유는 var의 scope는 블록 범위가 아닌 함수 범위에 속하기 때문이다.

function hello() {
  // "hello" function scope
  var message = 'hello!';
  console.log(message); // 'hello!'
}

hello();
console.log(message); // throws ReferenceError

그렇기 때문에 변수 message는 함수 범위 내에서 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

function hello() {
  // "hello" function scope
  const two = 2;
  let count = 0;
  function hi() {}

  console.log(two);   // 2
  console.log(count); // 0
  console.log(hi);  // function
}

hello();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(hi);  // throws ReferenceError

이와 같이 같은 방식으로 함수 내부에서 선언된 let, const 변수들 또한 함수 범위 내에서 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

 

중첩 범위

function hello() {
  // "hello" function scope(외부 범위)
  const message = 'hello!';

  if (true) {
    // "if" code block scope(내부 범위)
    const name = 'Lim';
    console.log(message); // 'hello!'
  }

  console.log(name); // throws ReferenceError
}

hello();

if 코드 블록 범위는 hello() 함수 범위 내에서 중첩된다.

모든 유형의 범위들은 중첩이 가능하다.

다른 범위 내에 포함된 범위를 inner scope(내부 범위)라 하고, if 코드 블록 범위는 hello() 함수 범위의 inner scope(내부 범위)이다.

반대로 다른 범위를 감싸는 범위를 outerscope(외부 범위)라고 하고, hello()함수 범위는 if코드 블록 범위의 outer scope(외부 범위)라고 볼 수 있다.

외부 범위에 선언된 변수는 내부 범위에 액세스 할 수 있지만, 내부 범위에 선언된 변수는 외부 범위에서 액세스 할 수가 없다.

 

범위를 통한 변수 분리

범위는 변수를 분리하며, 좋은 범위는 이름이 같은 변수를 가질 수 있다.

즉, scope를 잘 활용하면 변수 이름을 재사용할 수 있다는 뜻이다.

function fnc1() {
  // "fnc1" function scope
  let count = 0;
  console.log(count); // 0
}

function fnc2() {
  // "fnc2" function scope
  let count = 1;
  console.log(count); // 1
}

fnc1();
fnc2();

이렇게 두 개의 count는 각각 다른 함수 범위 안에 존재하기 때문에 서로 다른 count로 인식한다.

 

정리!

scope는 변수의 가용성을 관리하는 정책이며, 범위 내에 정의된 변수는 해당 범위 내에서만 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

자바스크립트에서 범위는 코드 블록, 함수, 모듈로 작성된다.

const 및 let변수는 코드 블록 또는 모듈의 기능에 의해 범위가 되며, var변수만 함수 또는 모듈에 의해 범위가 된다.

범위는 중첩될 수 있고, 내부 범위 내에서 외부 범위의 변수에 액세스 할 수 있다.

 

들어가기에 앞서,

Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다.

 

렉시컬 스코프란(Lexical Scope)란?

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.

즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.

다른 말로, 정적 스코프(Static scope)라 부르기도 하다.

아래의 예시 코드가 어떻게 동작할지 생각해보자.

var x = 1; // global

function first() {
  var x = 10;
  second();
}

function second() {
  console.log(x);
}

first(); // ?
second(); // ?

필자는 당연히 출력 값으로 10 1 출력될 줄 알았다.

하지만 실제 결과에서는 전역에 있는 변수 x의 값 1이 두 번 출력되었다.

그 이유는?

자바스크립트에서는 위와 같은 코드를 작성할 때, 이미 실행 단계에서 코드들의 스코프를 결정한다.

- global 범위에 있는 변수 x

- first() 함수 안에 있는 변수 x

- second() 함수 안에 있는 변수 x

 

위 예제의 실행 결과는 함수 second()의 상위 스코프가 무엇인지에 따라 결정된다.

자바스크립트는 렉시컬 스코프(Lexical Scope)를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다.

즉, 이 말은 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다는 말이다.

그렇기 때문에, second() 함수가 first() 함수 안에서 호출된 것과 상관없이 second() 함수는 global 범위에 선언되어 있으므로, global 범위에 있는 변수 x의 값 1이 두 번 출력된 것이다.

클로저(closure)란 무엇인가?

클로저(closure)는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며,

내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다.

우선 예제를 먼저 보고 생각해보자.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}

var inner = outerFunc();
inner(); // 10

예제를 보면,

• 먼저 함수 outerFunc()를 정의하고, 그 안에 함수 innerFunc()를 정의했다.
• 그러고 나서, 변수 inner에 함수 outerFunc()에서 반환된 함수 innerFunc()를 담고 바로 호출을 시도한다.
• 호출 후에 10이라는 숫자가 반환되어 출력되었다.

 

여기서 의문점은 분명 함수 outerFunc()는 내부 함수 innerFunc()를 반환하고 생을 마감했다는 점이다.

그런데 outerFunc의 지역변수 x가 다시 부활이라도 한 듯 함수 innerFunc()에서 동작하고 있다.

 

그 이유는 무엇 때문인가?

그것은 바로 내부 함수 innerFunc()가 호출될 때, 외부 함수 outerFunc()의 환경(Lexical environment)을 기억하고 있기 때문이다.

즉, 클로저(closure)는 반환된 내부 함수가 자신이 선언되었을 때의 환경(Lexical environment)인 스코프를 기억하여, 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.

더 간단히 말한다면, 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수라고 말할 수 있다.

그렇기 때문에 외부 함수 outerFunc()에 있는 변수 x의 값 10이 내부 함수 innerFunc() 안에 있는 console.log(x)에서 그 환경을 기억하고 10이라는 값을 출력할 수 있었던 것이다.

 

🎯 결론!

이처럼 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있다.

그 이유는 자신이 생성될 때의 환경(Lexical environment)을 기억하고 있기 때문이다.

그렇기 때문에 이러한 함수를 클로저(Closure)라고 부른다.

 

Document Object Model란?

 

DOM이란 무엇인가?

DOM을 조금 풀어서 써 볼까요? DOM은 Document Object Model의 약자입니다. Document는 문서이고 Object는 객체로 번역이 되죠. 그리고 Model은 그냥 모델로 많이 쓰죠. 문서 객체 모델로 번역을 할 수 있겠네요. 번역을 해도 아직 통 감이 오지 않네요.

​

도대체 이 문서 객체란 것이 무엇일까요? 문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. (그럼 html문서의 태그들이 객체에 담긴 상태를 의미하는 것일까요? )

​

여기에 Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있습니다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있습니다.

​

이제 조금은 명확해 지지 않았나요? 이제 조금 더 명확하게 DOM을 정의해보겠습니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.

​

이제 DOM을 보게 되면 웹 브라우저가 html 페이지를 인식하는 방식을 이야기 하거나 문서 객체(document object)와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측할 수 있습니다.

DOM은 어떻게 생겼을까?

트리 구조로 형성되어 있는 DOM

DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다.

​

tree의 자료구조를 간단히 설명하겠습니다. 이름에서 알 수 있는 것처럼 하나의 root node에서 시작됩니다. 그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그립니다.

​

tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 합니다. root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 됩니다. 그리고 children(자식)이 없는 node를 leaf node라고 합니다. 뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 것이죠.

​

​

​

이 그림은 DOM에 포함된 <p> 태그를 더 자세히 본 그림입입니다. <p>태그에도 자식 노드(childNode)들과 속성(attribute)들이 트리 형태로 자료 구조를 형성하고 있는 것을 알 수 있습니다. 우리는 DOM 객체에 먼저 접근하고 또 키워드를 통해서 필요한 노드에 접근해서 우리가 필요로 하는 작업들을 할 수 있습니다.

node란 무엇인가?

노드라는 말이 계속 나오네요. 그림과 매치를 시키면서 대략적으로 이해를 하셨겠지만 조금 더 명확히 집고 넘어가겠습니다. tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현합니다. head, body, title, script, h1, HEADER-1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속합니다.

​

이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 합니다.

JavaScript로 문서객체를 생성한다는 것은 어떤 의미인가?

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것입니다.

​

반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다.

 

출처

https://ljtaek2.tistory.com/134?category=863722