[ javascript ] 28. 예외처리, 비동기 , Promise, async/await

javascript+es6

[ javascript ] 28. 예외처리, 비동기 , Promise, async/await

변쌤(이젠강남) 2024. 4. 17. 18:16

예외처리, 비동기, Promise, async/await

try ~ catch ~ finally
동기 / 비동기
비동기 콜백
Promise
async/await
fetch
axios

명령어	mdn
예외처리 try ~ catch	mdn
동기 / 비동기	mdn
promise	mdn
try ~ catch	mdn
throw	mdn
ajax	mdn , mdn
XMLHttpRequest	mdn mdn
jQuery.ajax()	jquery
Element.insertAdjacentHTML()	mdn
fetch	mdn
axios	axios

1. try ~ catch ~ finally

try 블록: 예외가 발생할 수 있는 코드를 포함하는 블록입니다. 예외가 발생할 가능성이 있는 코드를 이 블록에 넣습니다.
catch 블록: try 블록 내에서 예외가 발생하면 해당 예외를 잡아내는 역할을 합니다. catch 블록은 예외가 발생한 경우 실행되며, 예외 객체를 사용하여 예외 정보에 접근할 수 있습니다.
finally 블록: finally 블록은 예외가 발생하든 발생하지 않든 항상 실행되는 코드를 포함합니다. 주로 리소스의 해제나 정리 작업을 수행하는 데 사용됩니다.

try {
    
    ... 코드를 실행 ...
    
 } catch(e) {
 
    ... 에러 핸들링 ...
    
 } finally {
    
    ... 항상 실행 ...
    
 }

let result = 0;
try {
  result = add(10, 20);
} catch (e) {
  console.log(e.message);
} finally {
  console.log({ result });
}


add is not defined
{ result: 0 }

const add = (x, y) => x + y;

let result = 0;

try {

  result = add(10, 20);

} catch (e) {

   console.log(e.message);
   console.log(e.name);

} finally {
 
   console.log({ result });
   
}

output
{ result: 30 }

const readFileContents = (filename) => {
    try {
        // 파일을 읽어와서 내용을 반환하는 함수 (가정)
        let fileContents = readFileSync(filename, 'utf-8');
        console.log('파일 내용:', fileContents);
    } catch (error) {
        // 파일을 읽어오는 도중에 오류가 발생한 경우
        console.error('파일을 읽어오는 도중 오류 발생:', error.message);
    }
};

// 존재하지 않는 파일을 읽어오는 시도
readFileContents('nonexistent.txt');

# throw

throw 키워드는 개발자가 직접 예외를 발생시킬 때 사용됩니다. 예외는 프로그램이 실행 중에 예상하지 못한 상황이 발생했을 때 사용됩니다. 이러한 상황에는 잘못된 인수가 전달되었을 때, 파일 또는 네트워크 리소스를 찾을 수 없을 때, 또는 예상치 못한 데이터 형식이 발견되었을 때 등이 있습니다.

throw expression;

여기서 expression은 발생시킬 예외를 지정하는 표현식입니다. 보통은 Error 객체를 사용하여 예외를 정의합니다. Error 객체는 JavaScript에서 내장된 예외 객체 중 하나이며, 다양한 유형의 예외를 나타낼 수 있습니다.

const divide = (a, b) => {
    if (b === 0) {
        throw new Error('나누는 수는 0일 수 없습니다.');
    }
    return a / b;
};

try {
    let result = divide(10, 0);
    console.log('결과:', result);
} catch (error) {
    console.log('예외가 발생했습니다:', error.message);
}

2. 동기적 / 비동기적

동기적(Synchronous) :

동기 작업은 코드가 순차적으로 실행되는 방식을 의미합니다. 한 작업이 다른 작업의 완료를 기다리며 순차적으로 실행됩니다.

비동기적(Asynchronous) :

비동기 작업은 코드의 실행 순서와 상관없이 작업이 실행됩니다. 한 작업이 다른 작업의 완료를 기다리지 않고 동시에 실행될 수 있습니다.
예를 들어, 네트워크 요청이나 파일 읽기 작업은 비동기적으로 실행되며, 작업이 완료되기를 기다리지 않고 다른 작업을 계속할 수 있습니다.

동기 작업은 순차적으로 실행되고 다음 작업을 위해 이전 작업의 완료를 기다립니다. 반면에 비동기 작업은 작업이 완료될 때까지 기다리지 않고 다음 작업을 수행할 수 있습니다.

비동기적인 작업은 보통 이벤트 처리, 네트워크 요청, 파일 읽기/쓰기 등과 같은 작업에서 많이 사용됩니다.

자바스크립트는 단일 스레드로 동작합니다. 이는 한 번에 하나의 작업만을 처리할 수 있다는 것을 의미합니다. 그러나 비동기적인 코드를 사용하면, 이 단일 스레드에서 여러 작업이 동시에 실행되는 것처럼 보일 수 있습니다.

비동기적인 작업은 일반적으로 콜백(callback), Promise, async/await과 같은 기술을 사용하여 처리됩니다.

콜백(callback): 함수를 다른 함수의 인자로 전달하여, 나중에 호출되도록 하는 방식입니다. 이는 주로 이벤트 처리나 비동기 작업에서 사용됩니다. 콜백 패턴은 가독성이 떨어지고 콜백 지옥(callback hell)이라는 문제를 야기할 수 있습니다.

Promise: ES6에 도입된 개념으로, 비동기 작업을 좀 더 구조화하고 관리하기 쉽게 만들어 줍니다. Promise는 비동기 작업이 성공했는지 실패했는지를 나타내는 객체입니다. 성공 시 resolve를 호출하고 실패 시 reject를 호출합니다.

async/await: ES2017에 도입된 개념으로, Promise를 기반으로 하며 비동기 코드를 동기식으로 작성할 수 있도록 해줍니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다.

1. 동기

2. 비동기

비동기 callback 예)

// 비동기 함수
function fetchData(callback) {
    // 비동기 작업을 수행 (예: 네트워크 요청)
    setTimeout(function () {
        let data = '비동기 작업 완료';
        // 작업이 완료되면 콜백 함수 호출
        callback(data);
    }, 2000); // 2초 후에 작업이 완료됨
}

// fetchData 함수를 호출하고 콜백 함수를 전달
fetchData(function (result) {
    console.log('비동기 작업 결과:', result);
    // 여기에서 데이터를 사용하여 추가 작업을 수행할 수 있음
});

console.log('비동기 작업을 기다리는 중...');


output
비동기 작업을 기다리는 중...
(2초 후)
비동기 작업 결과: 비동기 작업 완료

# AJAX

AJAX은 "Asynchronous JavaScript and XML"의 약자로, 비동기적으로 서버와 브라우저 간의 데이터를 교환하기 위한 기술입니다. 이 기술을 사용하면 웹 페이지가 새로 고쳐지지 않고도 백그라운드에서 서버와 통신하여 데이터를 가져오거나 전송할 수 있습니다. 이는 웹 페이지의 사용자 경험을 향상하고, 페이지의 동적인 요소를 제공하는 데 도움이 됩니다.

XML은 원래 AJAX에서 데이터를 교환하기 위해 사용되었지만, 최근에는 JSON(JavaScript Object Notation)이 XML을 대체하는 데 더 많이 사용되고 있습니다. JSON은 더 간결하고 가벼우며, JavaScript에서 쉽게 처리할 수 있기 때문에 AJAX에서 보다 일반적으로 사용됩니다.

사용자 경험 향상: AJAX를 사용하면 웹 페이지가 전체적으로 새로 고쳐지지 않고도 부분적으로 업데이트할 수 있습니다. 이는 사용자가 페이지를 새로 고치지 않고도 콘텐츠를 로드하거나 업데이트할 수 있어서 빠르고 부드러운 사용자 경험을 제공합니다.
대화형 요소 구현: AJAX를 사용하면 사용자의 입력에 반응하여 동적으로 페이지의 일부를 업데이트할 수 있습니다. 이를 통해 대화형 요소를 구현할 수 있으며, 사용자와의 상호작용을 더욱 부드럽게 만들 수 있습니다.
서버 부하 감소: 전통적인 웹 애플리케이션에서는 사용자가 요청할 때마다 전체 페이지를 서버에서 다시 로드해야 했습니다. 하지만 AJAX를 사용하면 필요한 데이터만 서버에 요청하여 받아올 수 있으므로 서버 부하가 감소합니다.
비동기 통신: AJAX는 비동기적으로 데이터를 교환할 수 있는데, 이는 페이지의 다른 작업들과 독립적으로 서버와 통신할 수 있다는 것을 의미합니다. 이로써 사용자는 다른 작업을 수행하면서도 데이터가 로드되는 것을 기다릴 필요가 없습니다.
웹 애플리케이션의 유연성: AJAX를 사용하면 웹 애플리케이션의 기능을 향상시키고 다양한 형태의 상호작용을 추가할 수 있습니다. 이를 통해 더욱 동적이고 유연한 웹 애플리케이션을 개발할 수 있습니다.

Promise 예 )

// Promise를 반환하는 비동기 함수
function fetchData() {
    return new Promise(function (resolve, reject) {
        // 비동기 작업을 수행 (예: 네트워크 요청)
        setTimeout(function () {
            let success = Math.random() >= 0.5; // 무작위로 성공 또는 실패 결정
            if (success) {
                let data = '비동기 작업 완료';
                // 성공 시 resolve 호출
                resolve(data);
            } else {
                // 실패 시 reject 호출
                reject(new Error('비동기 작업 실패'));
            }
        }, 2000); // 2초 후에 작업이 완료됨
    });
}

// Promise를 사용하여 비동기 작업 처리
fetchData()
    .then(function (result) {
        // 성공 시 처리할 로직
        console.log('비동기 작업 결과:', result);
    })
    .catch(function (error) {
        // 실패 시 처리할 로직
        console.error('비동기 작업 실패:', error.message);
    });

console.log('비동기 작업을 기다리는 중...');

async / await 예 )

// 비동기 함수를 Promise로 감싸기
function fetchData() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            let success = Math.random() >= 0.5;
            if (success) {
                var data = '비동기 작업 완료';
                resolve(data);
            } else {
                reject(new Error('비동기 작업 실패'));
            }
        }, 2000);
    });
}

// async 함수를 사용하여 비동기 코드 동기식으로 작성
async function process() {
    console.log('비동기 작업을 시작합니다...');
    try {
        // await 키워드를 사용하여 비동기 작업의 완료를 기다림
        let result = await fetchData();
        console.log('비동기 작업 결과:', result);
    } catch (error) {
        console.error('비동기 작업 실패:', error.message);
    }
}

// async 함수 호출
process();

# fetch

fetch 함수는 네트워크를 통해 리소스를 가져오기 위해 사용되는 JavaScript API입니다. 주로 HTTP 요청을 보내고 응답을 받아오는 데 사용됩니다

// fetch를 사용하여 데이터를 가져오는 함수
function fetchData(url) {
    return fetch(url)
        .then((response) => {
            // 서버에서 JSON 형식의 데이터를 반환하도록 가정
            if (!response.ok) {
                throw new Error('네트워크 오류: ' + response.statusText);
            }
            return response.json();
        })
        .catch((error) => {
            console.error('데이터를 가져오는 도중 오류 발생:', error);
        });
}

// fetchData 함수를 호출하여 데이터 가져오기
fetchData('https://jsonplaceholder.typicode.com/posts/1').then((data) => {
    console.log('데이터 가져오기 성공:', data);
});

# axios

Axios는 브라우저와 Node.js를 위한 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 사용하면 간편하게 HTTP 요청을 보낼 수 있으며, 비동기적으로 응답을 처리할 수 있습니다. 아래는 Axios를 사용한 간단한 예시입니다.

특징
브라우저를 위해 XMLHttpRequests 생성
node.js를 위해 http 요청 생성
Promise API를 지원
요청 및 응답 인터셉트
요청 및 응답 데이터 변환
요청 취소
JSON 데이터 자동 변환
XSRF를 막기위한 클라이언트 사이드 지원

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

// 데이터를 가져오는 함수
async function fetchData() {
    try {
        // GET 요청을 보내고 응답을 받음
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');

        // 응답 데이터 출력
        console.log('데이터 가져오기 성공:', response.data);
    } catch (error) {
        // 오류 처리
        console.error('데이터를 가져오는 도중 오류 발생:', error);
    }
}

// fetchData 함수를 호출하여 데이터 가져오기
fetchData();

axios(url).then((response) => {
                console.log(response.data);
                console.log(response.status);
                console.log(response.statusText);
                console.log(response.headers);
                console.log(response.config);
});

axios 함수를 사용하여 지정된 URL(https://jsonplaceholder.typicode.com/posts)에서 데이터를 요청합니다.
이후 .then() 메서드를 사용하여 요청이 완료되면 실행할 작업을 지정합니다. 이 작업은 응답 객체(response)를 매개변수로 받습니다.
응답 객체에서 다양한 속성들을 사용하여 응답 데이터와 관련 정보를 콘솔에 출력합니다.
- response.data: 요청으로 받은 데이터를 출력합니다.
- response.status: HTTP 상태 코드를 출력합니다 (예: 200, 404 등).
- response.statusText: HTTP 상태 코드에 해당하는 텍스트를 출력합니다 (예: "OK", "Not Found" 등).
- response.headers: 응답 헤더를 출력합니다.
- response.config: 요청에 대한 설정(configurations)을 출력합니다.

HTTP 상태 코드는 HTTP 요청에 대한 서버의 응답을 나타내는 숫자

1xx (Informational): 요청이 수신되었으며 처리가 계속됩니다.
- 예: 100 (Continue), 101 (Switching Protocols)
2xx (Success): 요청이 성공적으로 처리되었습니다.
- 예: 200 (OK), 201 (Created), 204 (No Content)
3xx (Redirection): 추가 조치가 필요합니다. 클라이언트는 다른 위치로 이동해야 합니다.
- 예: 301 (Moved Permanently), 302 (Found), 304 (Not Modified)
4xx (Client Error): 클라이언트의 요청에 오류가 있습니다.
- 예: 400 (Bad Request), 401 (Unauthorized), 404 (Not Found)
5xx (Server Error): 서버에서 요청을 처리하는 중에 오류가 발생했습니다.
- 예: 500 (Internal Server Error), 503 (Service Unavailable)

무료 api 사이트

API	설명	사이트
JSONPlaceholder	짜 데이터를 제공하는 RESTful API입니다. 사용자, 게시물, 댓글 등 다양한 종류의 데이터를 제공합니다	바로가기
OpenWeatherMap	날씨 정보를 제공하는 API로, 현재 날씨, 일기예보, 지역별 날씨 등을 확인할 수 있습니다.	바로가기
PokéAPI	포켓몬에 관련된 데이터를 제공하는 API입니다. 포켓몬 정보, 타입, 기술, 능력 등을 확인할 수 있습니다.	바로가기
NASA Open APIs	NASA에서 제공하는 여러 가지 API로, 우주 관련 데이터를 제공합니다. 우주 사진, 우주 비행기 정보, 우주 임무 등을 확인할 수 있습니다.	바로가기
COVID-19 API	코로나바이러스 관련 데이터를 제공하는 API로, 전 세계적인 코로나바이러스 확진자 수, 사망자 수, 회복자 수 등을 확인할 수 있습니다	바로가기
REST Countries	전 세계 국가에 관한 정보를 제공하는 API입니다. 국가별 정보, 수도, 통화, 인구 등을 확인할 수 있습니다.	바로가기

'javascript+es6' 카테고리의 다른 글

[ javascript ] 30. Set, Map ,yield, Symbol (0)	2024.08.22
[ javascript ] 29. TDZ , 호이스팅( hoisting) , 스코프(Scope) (0)	2024.04.23
[ javascript ] 27. BOM ( window, navigator, screen, location, history ) (2)	2024.04.05
[ javascript ] 26. form 요소 (0)	2024.03.27
[ javascript ] 25. 정규표현식 ( 정규식 ) (2)	2024.03.13

현재글[ javascript ] 28. 예외처리, 비동기 , Promise, async/await

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study