[기술면접] JavaScript 부분 12

<목차>

24. 비동기 코드의 콜백지옥과 비동기 제어 기술
25. DOM

24. 비동기 코드의 콜백지옥과 비동기 제어 기술

• 비동기적인 코드 작성은 네트워크 요청, 파일 시스템 작업 또는 지연된 코드 실행같은 작업 처리할 때 사용
• 콜백 지옥 : 여러겹의 중첩된 콜백 함수가 생성되어 코드의 가독성과 유지관리가 어려워지는 현상
• 코드가 계단처럼 보임

콜백 지옥 예방 방법
1. 모듈화

• 프라미스 패턴도 모듈화의 한 형태
• 콜백 함수를 독립적인 함수로 분리하여 모듈화
• 코드의 재사용성과 가독성 향상
  예시) 콜백을 사용한 경우

function getData(callback) {
    // 데이터를 비동기적으로 가져오는 코드
    setTimeout(() => {
        callback(null, '첫 번째 데이터');
    }, 1000);
}

function getMoreData(input, callback) {
    // 또 다른 데이터를 비동기적으로 가져오는 코드
    setTimeout(() => {
        callback(null, `${input} + 두 번째 데이터`);
    }, 1000);
}

function getFinalData(input, callback) {
    // 최종 데이터를 비동기적으로 가져오는 코드
    setTimeout(() => {
        callback(null, `${input} + 최종 데이터`);
    }, 1000);
}

// 사용 예
getData(function(err, result) {
    if (err) {
        console.error(err);
    } else {
        getMoreData(result, function(err, result) {
            if (err) {
                console.error(err);
            } else {
                getFinalData(result, function(err, result) {
                    if (err) {
                        console.error(err);
                    } else {
                        console.log(result); // "첫 번째 데이터 + 두 번째 데이터 + 최종 데이터"
                    }
                });
            }
        });
    }
});

예시) 모듈을 사용한 경우

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('첫 번째 데이터');
        }, 1000);
    });
}

function getMoreData(input) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${input} + 두 번째 데이터`);
        }, 1000);
    });
}

function getFinalData(input) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${input} + 최종 데이터`);
        }, 1000);
    });
}

// 사용 예
getData()
    .then(getMoreData)
    .then(getFinalData)
    .then(console.log) // "첫 번째 데이터 + 두 번째 데이터 + 최종 데이터"
    .catch(console.error);

2. 프라미스(Promise)

• 콜백 대신 프라미스 사용
• 프라미스는 비동기 작업의 최정 성공 또는 실패를 나타내는 객체

getData()
  .then(getMoreData)
  .then(getMoreData)
  .then(function(c) {
    console.log(c);
  })
  .catch(function(error) {
    console.error(error);
  });

• async/await
  - 비동기 코드를 동기 코드처럼 간결하고 이해하기 쉽게 작성할 수 있게 해준다.
  • async함수는 항상 프라미스를 반환
  • await 키워드는 프라미스가 처리될 때까지 함수의 실행을 일시 중단
    예시)

  async function asyncFunction() {
    try {
      const a = await getData();
      const b = await getMoreData(a);
      const c = await getMoreData(b);
      console.log(c);
    } catch (error) {
      console.error(error);
    }
  }

Q. 비동기적인 코드 작성에서 발생할 수 있는 콜백지옥에 대해 설명해주시고 예방할수 있는 방법과 비동기제어를 할 수 있는 Promise, async/await 등의 기술에 대해 설명해주세요.

25. DOM

• DOM(Document Object Model)
• HTML과 XML 문서를 위한 프로그래밍 인터페이스
• 웹페이지의 콘텐츠, 구조, 스타일을 프로그래밍 방식으로 조작 가능
• 문서를 노드와 객체의 계층 구조로 표현
• 자바스크립트를 통해 이 구조에 접근하고 변경 가능

DOM의 기본 개념

• 노드Node
  - DOM에서는 모든 문서요소가 노드로 표현
  - HTML 요소뿐 아니라 속성, 텍스트까지도..!
• 트리구조
  - 문서를 트리 구조로 표현
  • 루트 노드 아래 자식 노드들이 달리는 형태
• 요소Element
  - HTML의 태그에 해당하는 DOM객체, 태그들은 각각 DOM요소로 표현
  

DOM접근 및 제어 방법

• DOM 요소 접근 방법

  1. getElementById(): 아이디를 이용하여 요소 찾기

  var element = document.getElementById("example");

  2. getElementsByClassName(): 클래스 이름을 이용하여 요소 목록을 찾습니다.

  var elements = document.getElementsByClassName("example-class");

  3. getElementsByTagName(): 태그 이름을 이용하여 요소 목록을 찾기

    var elements = document.getElementsByTagName("div");

  4. querySelector(): CSS 선택자를 이용하여 첫번째 요소를 찾기

    var element = document.querySelector(".example-class");

  5. querySelectorAll(): CSS 선택자를 이용하여 일치하는 요소를 찾기

    var elements = document.querySelectorAll("div.example-class");
  

• DOM 요소 제어 방법

  1. 텍스트 및 HTML 수정
  • textContent: 속성을 이용해 텍스트 내용을 변경
  • innerHTML : 속성을 이용해 HTML 내용을 변경

    element.textContent = "새로운 텍스트";
    element.innerHTML = "<span>새로운 HTML</span>";

  2. 스타일 변경
  • style: 속성을 통해 직접 스타일 변경

    element.style.color = "red";
    element.style.display = "none";  // 요소를 숨깁니다.

  3. 속성 설정 및 제거
  • setAttribute() : 새로운 속성을 추가하거나 기존 속성을 수정
  • removeAttribute() : 속성 제거

    element.setAttribute("href", "https://www.example.com");
    element.removeAttribute("href");

  4. 이벤트 핸들러 등록
  • addEventListener() : 사용자의 액션에 반응

  element.addEventListener("click", function() {
    alert("클릭됨!");
  });

Q. DOM의 기본 개념과 접근 및 제어하는 방법을 설명해주세요.