DOM, 동기와 비동기, Hook, Promise(callback)

1. DOM(Document Object Model)이란?
DOM은 웹 페이지의 구조를 노드의 상속 관계를 맺는 트리 구조로 이루어져 있습니다. 각 노드는 요소(element), 속성(attribute) 등을 나타내며, 부모-자식 관계에 따라 구성됩니다. JavaScript의 를 통해 `document` 객체를 통해 웹 페이지의 요소에 접근하여 동적으로 변경할 수 있습니다. 이러한 노드를 읽고 조작할 수 있으며, 이를 통해 웹 페이지는 브라우저가 이해할 수 있는 구조로 만들어지며, JavaScript를 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있습니다.

keyword : 웹 페이지의 구조, 트리 구조로 이루어져 있다, 상속관계, 요소, 속성, js의 documnet 객체

2. DOM과 Virtual DOM의 차이는?
DOM: 실제 브라우저, 페이지의 구조를 나타내며, 변경사항이 있을 때마다 브라우저는 DOM을 다시 렌더링합니다. 이 과정은 비효율적일 수 있습니다.
Virtual DOM: 메모리에 존재하는 DOM의 가벼운 사본입니다. 변경사항이 발생하면, Virtual DOM에 먼저 적용되고, 최종적으로 실제 DOM과 비교하여 실제로 변경된 부분만을 실제 DOM에 적용합니다. 이 과정은 더 빠른 성능을 가능하게 합니다.
 
3. 동기(Synchronous)와 비동기(Asynchronous)란?
동기: 작업을 순차적으로 처리합니다. 한 작업이 끝나야 다음 작업을 시작할 수 있습니다. 작업의 완료를 기다리는 동안 다른 작업을 수행할 수 없습니다.
비동기: 여러 작업을 동시에 처리할 수 있습니다. 하나의 작업이 끝나기를 기다리지 않고, 다음 작업을 시작할 수 있습니다. 이는 특히 네트워크 요청, 파일 I/O와 같이 시간이 걸리는 작업을 처리할 때 유용합니다.
 
4. 커스텀 훅(Custom Hooks)과 일반 훅(Hooks)의 차이는?
일반 훅: React에서 제공하는 기본 훅입니다. 예를 들어, `useState`, `useEffect` 같은 훅들이 있습니다. 이들은 React 기능을 함수 컴포넌트 내에서 사용할 수 있게 해 줍니다.
커스텀 훅: 개발자가 직접 만드는 훅입니다. 여러 컴포넌트에서 재사용할 수 있는 로직을 커스텀 훅으로 만들어 관리할 수 있습니다. 커스텀 훅은 일반 훅을 내부에서 사용하여 만들어집니다.
※커스텀 훅 제작시 고려할 점, 규칙
1. 이름: 커스텀 훅의 이름은 use 접두사로 시작해야 합니다. 이렇게 함으로써, React가 해당 함수를 훅으로 인식할 수 있습니다.
2. 로직 분리: 커스텀 훅을 만들 때는 로직을 가능한 한 잘 분리하여 관리해야 합니다. 이로써 코드의 재사용성과 가독성을 향상시킬 수 있습니다.
3. 의존성 관리: 커스텀 훅 내에서 사용하는 모든 상태와 효과는 의존성 배열에 명시적으로 포함되어야 합니다. 이를 통해 React가 해당 훅의 의존성을 추적하여 적절한 시기에 훅을 재실행할 수 있습니다.
 
 
5. Promise란? (콜백함수와 연관지어서)
Promise는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타내는 객체입니다. 콜백 함수의 콜백 지옥으로부터 벗어나게 해 주는 방법 중 하나입니다. Promise는 `.then()`, `.catch()`, `.finally()` 함수를 사용하여 비동기 작업의 성공, 실패, 완료 후 처리를 간결하게 표현할 수 있습니다.
(Then체인 설명이 필요)

keyword : 비동기 작업의 결과값, 객체, 콜백함수, 콜백지옥
 
 
5.1 콜박함수란 무엇인가
콜백 함수는 함수를 다른 함수에게 인자로 전달 되어 특정 상황이나 조건에 도달 하면 호출, 실행되는 함수이다. 즉, 콜백 함수는 다른 함수에게 작업을 의존하고, 그 작업이 완료되었을 때 해당 함수에게 결과를 알려줍니다.
 
 
6. async와 await란?
`async`와 `await`는 비동기 작업을 더 쉽게 작성할 수 있게 해 주는 JavaScript의 문법적 설탕(syntactic sugar)입니다. `async` 함수는 항상 Promise를 반환하며, 함수 내에서 `await` 키워드를 사용할 수 있게 해줍니다. await는 Promise가 완료될 때까지 다음 함수의 실행을 일시 중지하고, Promise의 결과를 반환합니다. 이를 통해 비동기 코드를 동기 코드처럼 읽고 쓸 수 있게 됩니다. await를 사용함으로써, Promies의 .then() 체인을 사용하는 대신, 보다 명확하고 직관적인 코드 작성이 가능해집니다. 하지만, await를 사용할 때는 해당 코드를 try-catch 블록으로 감싸서 예외 처리를 해주는 것이 좋습니다. 이렇게 함으로써, 비동기 작업 중 발생할 수 있는 오류를 적절히 처리할 수 있습니다.

keyword : 비동기 작업을 더 쉽게 작성, async는 Promise를 반환, await는 Promise가 완료될 때까지 다음 함수의 실행 기다림, 비동기 코드를 동기 코드처럼 읽고 쓸 수 있다.