JS - 모듈,비동기, DOM

박찬영·2023년 5월 8일
JavaScript
1

모듈, 비동기, Dom

📚 모듈

프로그래밍에서 코드를 구성하는 작은 단위입니다. 모듈은 재사용 가능한 코드 조각으로, 하나의 파일이나 디렉토리로 구성될 수 있습니다.

모듈은 다른 모듈과 상호작용하며, 필요한 코드를 가져와 사용할 수 있습니다.
이를 위해, 모듈은 내보내기(export)와 가져오기(import)를 이용하여 다른 모듈과 상호작용합니다.
내보내기는 모듈 내의 함수, 변수, 클래스 등을 외부에 노출시키는 것이며,
가져오기는 다른 모듈에서 해당 모듈 내보내기를 사용하는 것입니다.

자바스크립트에서는 ES6에서 도입된 import와 export 키워드를 이용하여 모듈을 구현할 수 있습니다.
import 키워드를 이용하여 다른 모듈에서 필요한 코드를 가져올 수 있으며,
export 키워드를 이용하여 해당 모듈에서 사용 가능한 코드를 내보낼 수 있습니다.

예시 코드

// module.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './module.js';

console.log(sum(2, 3)); // 5

export , export default

export와 export default는 자바스크립트의 모듈 시스템에서 모듈을 내보내는 데 사용되는 키워드입니다.

export는 모듈에서 여러 개의 변수, 함수, 클래스 등을 외부로 내보낼 때 사용됩니다.
export default는 모듈에서 하나의 변수, 함수, 클래스 등을 외부로 내보낼 때 사용됩니다.

export default 로 내보내기 한 변수 이름은 받아온 모듈에서 이름을 바꾸어 사용하여도 됩니다.
export 로 내보기 한 변수 이름은 받아온 모듈에서 이름을 as 키워드로 바꾸어 사용하여야 합니다.

export 로 내보내기 했을 때

// module.js
export const sum = (a, b) => a + b;
export const num = 1;

// main.js
import { sum as total,  num as one } from './module.js';

console.log(total(2, 3)); // 5
console.log(one) 		  // 1

export default 로 내보내기 했을 때

// module.js
const sum = (a, b) => a + b;
export default sum;

// main.js
import total from './module.js';

console.log(total(2, 3)); // 5

모듈은 코드의 재사용성과 유지보수성을 높여주므로, 현대적인 프로그래밍에서 중요한 개념 중 하나입니다.

📚 비동기

동기와 비동기는 코드 실행의 흐름에 대한 방식을 나타냅니다.

📗 동기적 코드

동기적인 코드 실행 방식은, 코드의 실행 순서가 위에서 아래로 일어납니다. 즉, 어떤 작업을 수행하는 동안 다른 작업을 수행할 수 없으며, 작업이 완료될 때까지 대기해야 합니다. 예를 들어, 함수를 호출하면, 함수의 실행이 끝나기 전까지 다음 코드를 실행할 수 없습니다. 이러한 동작 방식은 코드의 실행 순서를 보장하므로, 코드를 이해하고 디버깅하기 쉬우며, 코드의 안정성을 보장합니다.

📗 비동기적 코드

반면에, 비동기적인 코드 실행 방식은, 코드의 실행 순서가 일정하지 않습니다. 즉, 어떤 작업을 수행하는 동안 다른 작업을 수행할 수 있으며, 작업이 완료되지 않더라도 다음 코드를 실행할 수 있습니다. 예를 들어, API 요청을 보내면, 요청이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있습니다. 이러한 동작 방식은 코드의 실행 속도를 향상시키고, 병렬 처리를 가능하게 하므로, 성능을 개선할 수 있습니다.
여기서 API 를 이용한 함수가 있다면 그 함수도 API 요청이 완료되면 실행이 됩니다.

비동기적 코드의 예시

비동기적인 코드는 다음과 같은 대표적인 예시가 있습니다.

  1. API 요청
    웹 애플리케이션에서 서버와 데이터를 주고받기 위해서는 API를 이용합니다. API 요청은 비동기적으로 처리됩니다. 즉, 요청이 완료될 때까지 다른 작업을 수행할 수 있습니다.
    아래 예시 코드에서 fetch 함수를 이용하여 API 요청을 보냅니다. fetch 함수는 비동기적으로 처리되며,
    요청이 완료되면 then 함수를 이용하여 응답 데이터를 처리합니다.
Copy code
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
  1. 이벤트 핸들러
    웹 애플리케이션에서 이벤트 핸들러는 비동기적으로 처리됩니다. 이벤트가 발생하면, 이벤트 핸들러가 호출되어 해당 이벤트에 대한 처리를 수행합니다.
Copy code
document.addEventListener('click', event => {
  console.log('Clicked!', event.target);
});
  1. 타이머
    자바스크립트에서는 setTimeout 함수를 이용하여 일정 시간 후에 코드를 실행할 수 있습니다. 이 함수는 비동기적으로 처리되며, 일정 시간이 지난 후에 콜백 함수가 호출됩니다.
Copy code
setTimeout(() => {
  console.log('Time is up!');
}, 1000);

위와 같은 비동기적인 코드들은 동기적으로 처리할 수 없는 작업들이기 때문에 비동기적으로 처리해야 합니다.
이를 위해, 콜백 함수, 프로미스, async/await 등의 기술들이 사용됩니다.

콜백 함수

콜백 함수(callback function)는 다른 함수에게 인수로 전달되는 함수입니다.
콜백 함수는 다른 함수의 실행 결과에 대한 처리를 수행하며, 이를 통해 비동기적인 코드의 처리를 가능하게 합니다.

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  setTimeout(() => {
    callback();
  }, 1000);
}

function sayBye() {
  console.log('Goodbye!');
}

greet('John', sayBye);

하지만 콜백 함수를 잘못 사용하면 콜백 지옥이라는 것이 발생할 수 있습니다.

콜백 지옥(callback hell)은 콜백 함수를 중첩하여 사용할 때 발생하는 코드의 가독성이 떨어지고,
유지보수하기 어려운 상황을 말합니다. 콜백 지옥은 코드가 복잡해질수록 더욱 심각한 문제가 됩니다.

콜백 지옥은 주로 비동기적인 작업을 수행할 때 발생합니다. 예를 들어, 여러 개의 API 요청을 연속적으로 수행해야 하는 경우, 각각의 요청이 완료된 후에 다음 요청을 수행해야 하기 때문에 콜백 함수를 중첩하여 사용해야 합니다. 이러한 코드는 콜백 함수를 계속 중첩하여 사용하면서 가독성이 떨어지고, 유지보수가 어렵습니다.

function getData(callback) {
  setTimeout(() => {
    const data1 = 'Data 1';
    callback(data1, data2 => {
      setTimeout(() => {
        const data2 = 'Data 2';
        callback(data2, data3 => {
          setTimeout(() => {
            const data3 = 'Data 3';
            callback(data3);
          }, 1000);
        });
      }, 1000);
    });
  }, 1000);
}

getData((data1, callback1) => {
  console.log(data1);
  callback1((data2, callback2) => {
    console.log(data2);
    callback2(data3 => {
      console.log(data3);
    });
  });
});

이러한 콜백 지옥을 없애기 위해 Promise 라는 개념을 도입하였습니다.

Promise

Promise는 자바스크립트에서 비동기적인 처리를 다루기 위한 객체입니다. Promise는 비동기적으로 처리될 작업을 담은 함수를 인자로 받아, 해당 작업이 성공적으로 완료되면 결과 값을 반환하고, 실패할 경우 에러를 반환합니다. Promise를 이용하여 비동기적인 작업을 처리하면, 코드의 가독성을 높일 수 있습니다.

Promise는 세 가지 상태를 가지며, 이를 상태(state)라고 합니다. 세 가지 상태는 다음과 같습니다.

대기(pending): Promise 객체가 생성되었지만, 아직 결과 값을 반환하지 않은 상태
이행(fulfilled): Promise 객체가 성공적으로 처리되어 결과 값을 반환한 상태
거부(rejected): Promise 객체가 처리 중에 에러가 발생하여 결과 값을 반환하지 못한 상태

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Data';
      if (data) {
        resolve(data);
      } else {
        reject(new Error('Data not found!'));
      }
    }, 1000);
  });
}

getData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 예시 코드에서 getData 함수는 Promise 객체를 반환합니다.
Promise 객체는 setTimeout 함수를 이용하여 1초 후에 결과 값을 반환합니다.
이후, 결과 값이 성공적으로 반환되면 resolve 메서드를 이용하여 결과 값을 반환합니다.
만약 결과 값이 없으면 reject 메서드를 이용하여 에러를 반환합니다.

getData 함수를 호출한 후에는 .then()과 .catch() 메서드를 이용하여 Promise 객체의 결과 값을 처리합니다.
.then() 메서드는 Promise 객체가 성공적으로 처리된 경우에 호출되며,
.catch() 메서드는 Promise 객체가 거부된 경우에 호출됩니다.

Promise를 이용하여 비동기적인 작업을 처리하면,
콜백 함수를 중첩하여 사용하는 콜백 지옥(callback hell)을 피할 수 있습니다. 또한, 코드의 가독성을 높일 수 있습니다.

await,async

await와 async는 Promise를 더욱 쉽게 다룰 수 있도록 도와주는 기술입니다. async는 함수 앞에 붙어 해당 함수가 Promise를 반환하는 비동기 함수임을 나타내고, await는 Promise를 기다리면서 함수를 일시 중지하는 역할을 합니다.

async 함수는 Promise를 반환하며, 내부적으로 Promise를 사용하여 비동기적인 작업을 처리합니다. async 함수를 호출할 때에는 .then()과 .catch() 메서드를 이용하여 Promise 객체의 결과 값을 처리할 수 있습니다.

await는 Promise가 완료될 때까지 함수를 일시 중지시키며, 결과 값을 반환합니다.
await는 async 함수 내부에서만 사용할 수 있습니다.

대부분 new Promise 를 쓰지 않고 함수에 await 과 async 를 사용하여 이용합니다.

예시 코드

async function getWeather(city) {
  const apiKey = 'YOUR_API_KEY';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

getWeather('Seoul')
  .then(data => console.log(data))
  .catch(error => console.error(error));

📚 DOM

DOM(Document Object Model)은 HTML, XML 등의 문서를 계층 구조로 표현하는 객체 모델입니다.

DOM은 문서의 각 요소(element)와 속성(attribute), 텍스트 등을 객체로 나타내어, 자바스크립트 등의 프로그래밍 언어로 문서의 내용을 수정하거나 조작할 수 있습니다.

DOM은 다음과 같은 구조를 가집니다.

문서 노드(Document Node): 전체 문서를 나타냅니다.
요소 노드(Element Node): 문서의 태그를 나타냅니다.
속성 노드(Attribute Node): 요소 노드의 속성을 나타냅니다.
텍스트 노드(Text Node): 요소 노드의 텍스트를 나타냅니다.

DOM은 HTML 문서의 구조를 객체로 표현하기 때문에, 자바스크립트 등의 프로그래밍 언어로 문서의 내용을 동적으로 수정하거나 조작할 수 있습니다.
예를 들어, 요소의 스타일이나 속성을 변경하거나, 새로운 요소를 추가하는 등의 작업이 가능합니다.

아래는 DOM을 이용하여 HTML 요소를 선택하고, 내용을 변경하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <p>This is a paragraph.</p>
  <script>
    const heading = document.getElementById('heading');
    heading.innerHTML = 'Hello, DOM!';
  </script>
</body>
</html>

위 예시 코드에서 document 객체는 현재 문서를 나타냅니다.
document.getElementById() 메서드를 이용하여 id가 heading인 요소를 선택하고,
innerHTML 속성을 이용하여 해당 요소의 내용을 변경합니다.
이후, Hello, DOM!으로 변경된 내용이 출력됩니다.

꿀팁

heading 이라는 변수를 console.log 로 확인하면 forEeach 메서드만 사용할 수 있다.
이유는 유사배열이기 때문인데 Array 메서드를 사용해야 하는 상황이라면 Array.from(heading) 으로 바꾸어 주면 된다.

node - HTML 요소, 텍스트, 주석등 모든것을 의미
Element - HTML 요소를 의미

DOM 요소 접근

  • N.parentElement
    노드의 부모요소를 반환합니다.

  • E.closest
    자신을 포함한 조상 요소중 'css 선택자' 와 일치하는 가장 가까운 요소를 반환합니다.
    만약 자기 자신이 div 인데 자기자신.closest('div') 하면 자기 자신이 출력합니다.

  • N.previousSibling , N.nextSibling
    노드의 이전 형제 혹은 다음 형제를 반환합니다.

  • E.previousElementSibling, E.nextElementSibling
    요소의 이전 형제 혹은 다음 형제 요소를 반환합니다.

  • E.children
    요소의 모든 자식 요소를 반환합니다.

  • E.firstElementChild, E.lastElementChild
    요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환합니다.

  • document.createElement
    메모리에만 존재하는 새로운 HTML 요소를 생성해 반환합니다.

  • E.prepend, E.append
    노드를 요소의 첫 번째 혹은 마지막 자식으로 삽입합니다.

  • E.remove
    요소를 제거합니다.

  • E.insertAdjacentElement
    대상 요소의 지정한 위치에 새로운 요소를 삽입합니다.
    대상요소.insertAdjacentElement(위치, 새로운 요소)
    위치 - 'beforebegin', 'afterbegin', 'beforeend', 'afterend'

  • N.insertBefore
    부모노드의 자식인 참조노드의 이전 형제로 노드를 삽입합니다.

  • N.textContent
    노드의 모든 텍스트를 얻거나 변경합니다.

  • N.contains
    주어진 노드가 노드의 자신을 포함한 후손인지 확인합니다.

  • E.innerHTML
    요소의 모든 HTML내용을 하나의 문자로 얻거나, 새로운 HTML 을 지정합니다.

  • E.dataset
    요소의 각 'data-' 속성 값을 얻거나 지정합니다.

  • E.tagName
    요소의 태그 이름을 반환합니다.

  • E.className
    요소의 'class' 속성 값을 얻거나 지정합니다.

  • E.id
    요소의 id 속성 값을 얻거나 지정합니다.

  • E.classList
    요소의 class 속성 값을 제어합니다.

  • E.style
    요소의 style 속성을 얻거나 지정합니다.

  • window.getComputedStyle
    요소에 적용된 스타일 객체를 반환합니다.

  • E.getAttribute E.setAttribute
    요소에서 특정 속성 값을 얻거나 지정합니다.
    예시) div.setAttribute('title', 'Hello world')

  • E.hasAttribute, E.removeAttribute
    요소에서 특정 속성을 확인하거나 제거합니다.

profile
박찬영
오류는 도전, 코드는 예술
이전 포스트

React-Redux

다음 포스트

프론트엔드 개발자가 알아야 할 CS 지식(Web)

0개의 댓글