[Javascript] - 8가지 개념 정리

1️⃣ 자바스크립트에서 콜백(콜백 함수)이 무엇인지 설명해 주세요.

🏷️ 자바스크립트에서 콜백 함수는 다른 함수의 인자로 전달되어, 해당 함수가 작업을 완료한 후 호출되는 "나중에 호출될 함수"입니다.

// 각 배열의 요소에 콜백 함수를 호출
const numbers = [1,2,3,4,5];
numbers.forEach((number)=> console.log(number));

콜백 함수의 문제점

많은 콜백 함수가 중첩되면 코드가 복잡하고 가독성이 떨어집니다. 이를 방지하기 위해 'Promise', 'async/await'과 같은 비동기 처리 방법이 사용됩니다.

---

2️⃣ 배열에 있는 filter, map과 같은 메서드에 있는 콜백과 setTimeout에 있는 콜백의 차이에 대해 설명해 주세요.

🏷️ filter나 map과 같은 메소드에 있는 콜백은 “동기 실행되는 콜백”입니다. 즉, 배열의 각 요소에 대해 콜백 함수가 즉시 호출됩니다.

🏷️ setTimeout에 있는 콜백은 “비동기 실행되는 콜백”입니다. 설정한 지연 시간 후에 콜백 함수가 호출되며, 이 과정 동안 다른 코드가 실행될 수 있습니다.

---

3️⃣ 동기 비동기 실행에 대해 설명해 주세요.

🏷️ 동기 실행은 코드가 위에서 아래 순서대로 순차적으로 실행됩니다. 현재 작업이 완료될 때까지 다음 작업이 시작되지 않습니다.

🏷️ 비동기 실행은 현재 작업이 완료되지 않더라도 다른 작업을 진행할 수 있습니다.

비동기 실행의 추가 개념들

• Promise : 비동기 작업의 결과를 나중에 받을 수 있도록 하는 객체, 'resolve'와 'reject'를 사용하여 작업의 성공 실패를 처리
• async/await : Promise 기반의 비동기 코드를 더 간결하고 동기적인 코드처럼 작성할 수 있도록 하는 문법

---

4️⃣ HTTP 메소드들에 대해 설명해 주세요.

1. GET

• 설명: 서버에서 리소스를 조회하기 위해 사용됩니다. 서버의 상태를 변경하지 않고, 단순히 데이터를 요청합니다.
• 용도: 웹 페이지를 로드하거나, 데이터를 조회할 때 사용됩니다.
• 특징: 요청 URL에 데이터가 포함될 수 있지만, 본문(body)은 포함되지 않습니다. 요청이 캐시될 수 있으며, URL 길이 제한이 있습니다.
• 예시: GET /users/123는 ID가 123인 사용자의 정보를 요청하는 것입니다.

2. POST

• 설명: 서버에 데이터를 제출하여 새로운 리소스를 생성하거나 서버의 상태를 변경하는 데 사용됩니다.
• 용도: 폼 제출, 데이터 생성 요청, 서버에 정보를 보낼 때 사용됩니다.
• 특징: 요청 본문에 데이터를 포함할 수 있으며, 요청이 서버의 상태를 변경합니다. 캐시되지 않는 경우가 많습니다.
• 예시: POST /users는 새로운 사용자를 생성하기 위해 사용자 정보를 서버에 제출하는 것입니다.

3. PUT

• 설명: 서버에 특정 리소스를 업데이트하거나 새로 생성할 때 사용됩니다. 클라이언트가 제공한 데이터로 리소스를 대체합니다.
• 용도: 특정 리소스를 업데이트하거나, 리소스가 없을 경우 새로 생성할 때 사용됩니다.
• 특징: 요청 본문에 업데이트할 데이터를 포함하며, 요청한 URI가 리소스를 식별합니다.
• 예시: PUT /users/123는 ID가 123인 사용자의 정보를 새로운 데이터로 업데이트합니다.

4. DELETE

• 설명: 서버에서 특정 리소스를 삭제할 때 사용됩니다.
• 용도: 리소스를 삭제하거나 제거할 때 사용됩니다.
• 특징: 삭제할 리소스를 식별하는 URI를 요청하며, 요청 본문은 일반적으로 포함되지 않습니다.
• 예시: DELETE /users/123는 ID가 123인 사용자를 삭제하는 요청입니다.

5. PATCH

• 설명: 서버의 리소스를 부분적으로 업데이트할 때 사용됩니다. 전체 리소스를 대체하는 것이 아니라, 특정 필드나 부분만 업데이트합니다.
• 용도: 리소스의 일부를 수정하거나 업데이트할 때 사용됩니다.
• 특징: 요청 본문에 업데이트할 데이터의 일부만 포함됩니다.
• 예시: PATCH /users/123와 함께 제공되는 데이터가 사용자 프로필의 일부만 업데이트하는 것입니다.

6. OPTIONS

• 설명: 서버가 지원하는 HTTP 메소드나 요청에 대한 옵션을 조회할 때 사용됩니다. 서버가 지원하는 메소드나 기능에 대한 정보를 얻을 수 있습니다.
• 용도: CORS(Cross-Origin Resource Sharing) 요청에서 주로 사용됩니다.
• 특징: 요청 본문이 없으며, 서버가 지원하는 메소드나 기능을 확인할 때 사용됩니다.
• 예시: OPTIONS /users는 /users 리소스에 대해 서버가 지원하는 메소드를 조회하는 요청입니다.

7. HEAD

• 설명: GET 요청과 유사하지만, 응답 본문이 없습니다. 주로 헤더 정보를 얻을 때 사용됩니다.
• 용도: 리소스의 메타데이터나 헤더 정보만 필요할 때 사용됩니다.
• 특징: 본문(body)은 포함되지 않으며, 상태 코드와 헤더만 포함됩니다.
• 예시: HEAD /users/123는 ID가 123인 사용자에 대한 정보의 헤더만 요청하는 것입니다.

8. TRACE

• 설명: 요청이 서버를 통해 어떻게 전달되는지를 추적하기 위해 사용됩니다. 주로 디버깅 목적으로 사용됩니다.
• 용도: 요청이 서버를 통해 어떻게 전달되는지 확인하고, 진단 정보(디버깅)를 수집하는 데 사용됩니다.
• 특징: 보안상의 이유로 대부분의 서버에서 비활성화되어 있습니다.
• 예시: TRACE /는 요청의 경로를 서버에서 확인하는 요청입니다.

9. CONNECT

• 설명: 주로 프록시 서버를 통해 TCP 연결을 수립하는 데 사용됩니다. HTTPS와 같은 암호화된 통신을 위해 사용됩니다.
• 용도: 클라이언트와 서버 간의 터널을 설정하여 보안 연결을 수립하는 데 사용됩니다.
• 특징: 일반적으로 HTTP 프로토콜과는 다르게 동작하며, TCP 연결을 직접적으로 설정합니다.
• 예시: CONNECT example.com:443은 example.com의 443번 포트로 연결을 수립하는 요청입니다.

---

5️⃣ GET 요청과 POST 요청을 비교해 설명해 주세요.

1. GET 요청

GET 요청은 주로 서버에서 데이터를 조회하거나 리소스를 요청할 때 사용됩니다. 서버의 상태를 변경하지 않고, 클라이언트가 필요한 데이터를 요청합니다.

특징

• 목적: 리소스 조회. 서버에서 데이터를 가져오는 데 사용됩니다.
• 요청 본문: GET 요청은 요청 본문(body)을 포함하지 않습니다. 모든 데이터는 URL의 쿼리 문자열을 통해 전달됩니다.
• URL: 요청 데이터는 URL에 포함됩니다. 예를 들어, GET /search?query=example과 같은 형태입니다.
• 캐싱: GET 요청은 일반적으로 캐시될 수 있습니다. 브라우저나 서버 캐시를 활용하여 성능을 최적화할 수 있습니다.
• 북마크: GET 요청은 URL에 데이터가 포함되므로 북마크하거나 공유할 수 있습니다.
• 제한: URL 길이 제한이 있으며, 브라우저나 서버에 따라 다를 수 있습니다.

2. POST 요청

POST 요청은 주로 서버에 데이터를 제출하거나 서버의 상태를 변경할 때 사용됩니다. 데이터 제출을 통해 새로운 리소스를 생성하거나 기존 리소스를 업데이트할 때 사용됩니다.

특징

• 목적: 서버에 데이터를 제출하거나 리소스를 생성 및 업데이트하는 데 사용됩니다.
• 요청 본문: POST 요청은 요청 본문(body)에 데이터를 포함합니다. 이 데이터는 요청의 본문에 포함되어 URL에는 나타나지 않습니다.
• URL: 데이터는 URL이 아닌 요청 본문을 통해 전달됩니다.
• 캐싱: POST 요청은 일반적으로 캐시되지 않습니다. 요청이 서버의 상태를 변경할 수 있기 때문에, 캐시가 위험할 수 있습니다.
• 북마크: POST 요청은 URL에 데이터가 포함되지 않으므로 북마크하거나 공유할 수 없습니다.
• 제한: URL 길이 제한이 없으며, 본문에 큰 양의 데이터를 포함할 수 있습니다.

요약

• GET 요청:
  
  • 목적: 데이터를 조회하거나 리소스를 요청할 때 사용됩니다.
  • 요청 본문: 없음. 데이터는 URL의 쿼리 문자열로 전달됩니다.
  • 캐싱: 가능.
  • 북마크: 가능.
  • 제한: URL 길이 제한 있음.
• POST 요청:
  • 목적: 데이터를 제출하거나 서버의 상태를 변경할 때 사용됩니다.
  • 요청 본문: 데이터가 요청 본문에 포함됩니다.
  • 캐싱: 일반적으로 불가능.
  • 북마크: 불가능.
  • 제한: URL 길이 제한 없음.

---

6️⃣ 브라우저 또는 Node.js 환경에서 비동기 함수의 콜백이 실행되는 원리에 대해 setTimeout 을 예로 들어 설명해 주세요.

비동기 함수와 콜백의 실행 원리

비동기 함수는 주로 콜백 함수를 사용하여 비동기 작업이 완료된 후에 특정 작업을 수행하도록 합니다. setTimeout은 비동기 작업을 다루는 가장 간단한 예시 중 하나입니다. 이 함수는 일정 시간이 지난 후에 콜백 함수를 호출합니다.

1. 브라우저에서의 동작 원리

브라우저에서의 비동기 함수, 예를 들어 setTimeout,은 다음과 같은 원리로 동작합니다:

1. 콜백 등록: setTimeout을 호출하면, 지정된 시간 후에 호출될 콜백 함수를 등록합니다. 이때, setTimeout은 웹 브라우저의 타이머 기능을 사용하여 시간 지연을 설정합니다.
2. 타이머 설정: 브라우저는 타이머를 설정하고, 타이머가 끝나면 콜백 함수를 이벤트 큐(Event Queue)에 넣습니다.
3. 이벤트 루프: 자바스크립트의 실행 스레드는 하나의 메인 스레드에서 동작하며, 이 스레드는 이벤트 루프(Event Loop)라는 메커니즘을 사용합니다. 이벤트 루프는 호출 스택(Call Stack)과 이벤트 큐를 관리합니다.
4. 콜백 실행: 호출 스택이 비어 있는 상태에서 이벤트 루프는 이벤트 큐에 있는 콜백 함수를 호출 스택으로 옮깁니다. 이 때, 콜백 함수가 실행됩니다.

console.log('시작');

setTimeout(function() {
  console.log('타이머 완료');
}, 2000);

console.log('끝');

• console.log('시작')과 console.log('끝')은 즉시 호출 스택에서 실행됩니다.

• setTimeout은 타이머를 설정하고 콜백 함수를 이벤트 큐에 추가합니다.
• 2초 후에, 타이머가 완료되면 콜백 함수가 이벤트 큐에 추가됩니다.

• 호출 스택이 비어 있을 때 이벤트 루프가 이 콜백 함수를 호출 스택으로 옮기고, 콜백 함수가 실행됩니다.

2. Node.js에서의 동작 원리

Node.js는 비동기 I/O를 처리하는 서버 사이드 자바스크립트 환경으로, setTimeout과 비슷한 방식으로 동작하지만 내부 메커니즘에는 차이가 있습니다.

1. 콜백 등록: Node.js의 setTimeout은 내부적으로 타이머를 설정하고 콜백 함수를 타이머 핸들러(Timer Handler) 큐에 추가합니다.
2. 타이머 설정: Node.js의 이벤트 루프는 C++의 libuv 라이브러리에서 구현되며, 이 라이브러리가 타이머를 설정하고 관리합니다.
3. 이벤트 루프: Node.js의 이벤트 루프는 여러 단계로 나뉘어 있으며, 각 단계에서 큐에 있는 콜백 함수를 실행합니다. 타이머 콜백 함수는 타이머 단계에서 처리됩니다.
4. 콜백 실행: 이벤트 루프가 타이머 단계에 도달하면, 설정된 시간 후에 타이머 핸들러 큐에 있는 콜백 함수가 호출 스택으로 옮겨져 실행됩니다.

• 브라우저와 동일하게, console.log('시작')과 console.log('끝')은 즉시 실행됩니다.
• setTimeout은 타이머를 설정하고 콜백 함수를 타이머 핸들러 큐에 추가합니다.
• 2초 후에 타이머 핸들러 큐에 있는 콜백 함수가 호출 스택으로 이동하여 실행됩니다.

---

7️⃣ 브라우저 주소창에 https://www.~ 을 입력하고 화면에 표시되기 까지 통신, 렌더링 과정을 설명해 주세요.

1. 요청-응답 과정

1. URL 입력 및 요청 생성:
   • 사용자가 브라우저의 주소창에 URL을 입력하고 Enter를 누르면, 브라우저는 입력된 URL을 기반으로 HTTP 요청을 생성합니다.
   • URL은 브라우저가 요청할 서버의 주소와 리소스를 식별합니다.
2. DNS 조회:
   • 브라우저는 URL에서 도메인 이름을 추출하고, 이 도메인을 IP 주소로 변환하기 위해 DNS(도메인 네임 시스템) 조회를 수행합니다.
   • DNS 서버는 도메인 이름을 해당하는 IP 주소로 변환합니다.
3. TCP 연결:
   • 브라우저는 서버의 IP 주소로 TCP 연결을 설정합니다. 이 과정은 3-way 핸드셰이크(서버와 클라이언트 간의 연결 수립 과정)를 포함합니다.
4. HTTP 요청 전송:
   • 브라우저는 TCP 연결을 통해 서버에 HTTP 요청을 전송합니다. 이 요청은 웹 페이지를 요청하는 GET 요청일 수 있습니다.
5. 서버 응답:
   • 서버는 요청을 수신하고, 요청된 리소스(예: HTML 문서)를 처리하여 HTTP 응답을 생성합니다.
   • HTTP 응답에는 상태 코드, 헤더, 본문(HTML 문서 등)이 포함됩니다.
6. 응답 수신:
   • 브라우저는 서버로부터 HTTP 응답을 수신하고, 응답의 상태 코드를 확인하여 요청이 성공했는지 확인합니다.
   • 응답 본문(HTML, CSS, JavaScript 등)은 이후 렌더링 과정에서 사용됩니다.

2. 렌더링 과정

1. HTML 파싱:
   • 브라우저는 응답으로 받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
   • DOM은 HTML 문서의 구조와 콘텐츠를 계층적으로 표현한 것입니다.
2. CSS 파싱:
   • HTML 문서와 함께 제공된 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
   • CSSOM은 스타일 규칙을 적용한 요소의 스타일을 정의합니다.
3. DOM과 CSSOM 결합:
   • DOM 트리와 CSSOM 트리를 결합하여 **렌더 트리(Render Tree)**를 생성합니다.
   • 렌더 트리는 화면에 표시될 콘텐츠와 해당 콘텐츠의 스타일을 정의합니다.
4. 레이아웃 계산:
   • 렌더 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산합니다. 이 과정을 레이아웃(Layout) 또는 **리플로우(Reflow)**라고 합니다.
5. 페인팅(Painting):
   • 레이아웃 계산이 완료되면 각 요소를 화면에 그리기 위해 **페인팅(Painting)**이 수행됩니다.
   • 이 과정에서 텍스트, 이미지, 배경 등이 화면에 그려집니다.
6. 스크립트 실행:
   • 페이지에 포함된 JavaScript가 실행됩니다. 자바스크립트는 DOM을 수정하거나 스타일을 변경할 수 있으며, 이러한 변경은 레이아웃과 페인팅 과정에 영향을 줄 수 있습니다.
   • 자바스크립트는 동적으로 콘텐츠를 추가하거나 변경할 수 있으므로, 자바스크립트 실행 후 다시 레이아웃과 페인팅이 발생할 수 있습니다.

통신 과정

사용자가 주소창에 URL을 입력하면, DNS 조회를 해서 요청한 페이지의 자원이 어디에 위치 하는지 찾습니다. https://www.codeit.kr 을 주소창에 입력한다면, DNS조회를 통해 HTML페이지가 있는 IP 주소 50.123.123.12 를 알아냅니다.

IP 주소를 알고난 뒤, 브라우저는 서버와 TCP 핸드쉐이크를 통해 연결을 설정합니다. HTTPS를 이용한 보안성있는 연결을 위해서는 TLS 협상도 필요합니다.

웹서버로 한 번 연결이 성립되고 나면, 이제 브라우저는 HTTP GET request를 보냅니다. 브라우저가 데이터 덩어리를 받으면, 수신된 정보를 분석하고 화면에 보여주기까지 렌더링 과정을 거칩니다.

렌더링 과정

DOM(Document Object Model), CSSOM(CSS Object Model) 생성 서버로부터 받은 HTML, CSS를 다운로드 받습니다. 이 때 HTML, CSS 파일은 단순한 텍스트이므로 연산과 관리를 위해 Parser를 통해 Object Model로 만듭니다. HTML은 DOM Tree로 CSS는 CSSOM Tree로 만듭니다.

1. Render Tree 생성 DOM과 CSSOM으로 Render Tree를 생성합니다. Render Tree에는 스타일 정보가 설정되어 있으며, 실제 화면에 표현되는 노드들로만 구성됩니다.

2. Layout Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어떤 크기로 출력할지 계산합니다.

3. Paint Layout 계산이 완료되면 요소들을 실제 화면에 그립니다. 이전 단계에서 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 값을 채워 넣습니다. 이 때 텍스트, 색, 이미지, 그림자 효과 등을 모두 처리해 그립니다.

전체 흐름 요약

1. 사용자 입력: URL을 입력하고 Enter를 눌러 요청을 시작합니다.
2. DNS 조회: 도메인 이름을 IP 주소로 변환합니다.
3. TCP 연결: 서버와의 연결을 설정합니다.
4. HTTP 요청: 서버에 요청을 전송합니다.
5. 서버 응답: 서버가 응답을 반환합니다.
6. HTML 파싱: HTML을 파싱하여 DOM 트리를 생성합니다.
7. CSS 파싱: CSS를 파싱하여 CSSOM 트리를 생성합니다.
8. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
9. 레이아웃 계산: 각 요소의 위치와 크기를 계산합니다.
10. 페인팅: 화면에 콘텐츠를 그립니다.
11. 스크립트 실행: 자바스크립트가 실행되어 페이지를 동적으로 업데이트합니다.