[카테고리:] JavaScript

만약 다음과 같은 자바스크립트 객체가 있다고 할 때..

const obj = {
  a: 'Dip2K',
  b: 30,
  c: true,
  d: {}
};

obj 객체를 구성하는 전체 키를 배열로 얻는 코드는 다음과 같습니다.

console.log(Object.keys(obj)); 
// Array ["a", "b", "c", "d"]

다시 obj 객체를 구성하는 전체 값을 배열로 얻는 코드는 다음과 같구요.

console.log(Object.values(obj)); 
// Array ["Dip2K", 30, true, Object {  }]

배열에 대해서 각 구성 항목을 참조하는 코드는 다음과 같습니다.

for(i of Object.values(obj)) {
    console.log(i);
}

/* 
"Dip2K"
30
true
Object {  }
*/

자바스크립트로 웹 앱을 개발할 때 디버깅 방법 중 콘솔에 필요한 로그를 출력하는 것은 매우 유용합니다. 이런 유용함에 더해 원하는 로그에 대한 문자열의 색상 등과 같은 스타일을 지정할 수도 있는데요. 아래의 코드가 바로 그 예시입니다.

console.log(
    '%cHello %cWorld. %cMy Name is %cDip2K.', 
    'color: red', 
    'color: yellow',
    'color: gray',
    'color: white;font-weight: 900'
)

출력 결과는 다음과 같습니다.

먼저 웹 페이지에서 전체 내용을 다 보기 위해 스크롤 해야할 크기는 다음 코드로 얻을 수 있습니다.

let totalHeight = document.body.scrollHeight - window.innerHeight;

다음으로 지금 스크롤된 정도를 백분율 값으로 얻는 코드는 다음과 같습니다.

let scrollPercentage = (window.pageYOffset / totalHeight) * 100;

이 글을 이해하기 위해서는 먼저 Promise API에 대해 알고 있어야 하며 아래의 글을 참고하시기 바랍니다.

Javascript의 Promise API 요약

async와 awit의 사용은 비동기 처리에 대한 혼란스러운 코드의 가독성을 향상 시켜줌으로써 코드의 유지보수 및 견고한 코드를 작성할 수 있습니다.

먼저 아래의 코드는 Promise API를 이용한 비동기처리입니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let result = { name: 'Dip2K', age: 44 };
            resolve(result);
        }, 2000);
    });
}

function callback(result) {
    console.log(result);
}

console.log('1');
getItem().then(callback);
console.log('2');

위의 코드를 async와 await를 이용해 동일하게 작동하도록 코드를 작성하면 다음과 같습니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let result = { name: 'Dip2K', age: 44 };
            resolve(result);
        }, 2000);
    });
}

async function get() {
    let result = await getItem();
    console.log(result);
}

console.log('1');
get();
console.log('2');

콜백함수 없이 비동기처리가 된 경우로, 순차적인 흐름의 코드로 작성되었습니다.

아래의 코드는 Promise의 예외의 처리를 async 및 await 구분에서 어떻게 처리 하는지를 보여주는 코드입니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let bOK = false;

            if(bOK) {
                let result = { name: 'Dip2K', age: 44 };
                resolve(result);
            } else {
                reject(null);
            }
        }, 2000);
    });
}

async function get() {
    try {
        let result = await getItem();
        console.log(result);
    } catch(e) {
        console.log(e);
    }
}

console.log('1');
get();
console.log('2');

await와 fetch를 함께 사용하는 코드 예시를 마지막으로 언급하고 마무리 합니다.

async function fetchData() {
  const response = await fetch("http:/...")
  const data = await response.json()
  cosnole.log(data)
}

fetchData()