[ 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. 비동기

# 동기(Synchronous)

항목	설명
정의	코드가 한 줄씩 순차적으로 실행됨
특징	이전 작업이 끝나야 다음 작업 실행
장점	코드 흐름이 예측 가능함
단점	시간이 오래 걸리는 작업이 있으면 전체 코드 실행이 멈춤
예시	for, function, console.log() 등 일반 코드

console.log("1");
console.log("2");
console.log("3");
// 출력: 1 → 2 → 3

# 비동기(Asynchronous)

항목	설명
정의	시간이 걸리는 작업을 따로 처리하고, 다음 코드를 먼저 실행
특징	이벤트 루프(Event Loop)를 통해 콜백 큐에 등록됨
장점	기다릴 필요 없이 다음 코드 실행 → 성능 향상
단점	코드 흐름 파악이 어려울 수 있음
사용 예	setTimeout, fetch, Promise, async/await 등

console.log("1");
setTimeout(() => {
  console.log("2");
}, 1000);
console.log("3");
// 출력: 1 → 3 → (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

비동기 작업의 완료(또는 실패)를 다루기 위한 객체입니다. 비동기 처리의 가독성과 제어력을 높이기 위해 사용

용어	설명
생성	new Promise((resolve, reject) => {}) 형식
상태(state)	pending(대기) → fulfilled(성공) or rejected(실패)
핸들러	.then()(성공 처리), .catch()(실패 처리), .finally()(무조건 실행)

# Promise 장점

콜백 지옥 방지	.then() 체이닝으로 가독성 개선
에러 처리 통합	.catch()로 한 번에 예외 처리 가능
async/await과 궁합	더 직관적인 비동기 코드를 작성 가능

then()은 Promise의 메서드로, 비동기 작업이 성공적으로 완료된 후 실행할 코드를 정의

정의	비동기 작업이 resolve() 되었을 때 실행되는 콜백 함수 등록
리턴값	새로운 Promise 객체 반환 → 체이닝 가능
예외 처리	실패(reject()) 시 then()은 실행되지 않음 → 대신 catch() 사용

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('비동기 작업을 기다리는 중...');

then()은 성공(resolve) 했을 때 실행됨
연속 처리가 가능 (then().then().then())
실패 시에는 catch() 사용

async / await

async	비동기 함수를 선언할 때 사용함. 해당 함수는 항상 Promise를 반환함.
await	Promise가 처리(resolve 또는 reject) 될 때까지 기다림(블로킹 아님)

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetch()가 Promise를 반환 → await가 이 작업이 끝날 때까지 기다림
결과를 response에 저장
response.json()도 Promise → 다시 await
최종 data를 반환

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);
});

fetch('/api')
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

async function getData() {
  try {
    const res = await fetch('/api');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

async	함수가 Promise를 반환하게 함
await	Promise가 완료될 때까지 기다림
장점	가독성 향상, 코드 흐름이 동기 코드처럼 보임

# 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)을 출력합니다.

async function getData() {
  try {
    const response = await axios.get('/api/data'); // GET 요청
    console.log(response.data); // 응답 데이터 출력
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

axios.get('/api')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

   const response = await axios.get('/api/data'); // GET 요청
   console.log(response.data); // 응답 데이터 출력

async	비동기 함수 선언
await	비동기 작업이 끝날 때까지 기다림
fetch()	네트워크 요청 함수
.json()	응답을 JSON 형식으로 파싱
return	데이터를 반환

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

범위	분류	설명
1xx	정보(Informational)	요청을 받았으며 계속 처리 중
2xx	성공(Success)	요청이 성공적으로 처리됨
3xx	리다이렉션(Redirection)	요청 완료를 위해 추가 작업 필요
4xx	클라이언트 오류(Client Error)	클라이언트 요청에 문제 있음
5xx	서버 오류(Server Error)	서버가 요청을 처리하지 못함

2xx: 성공 (Success)

200	OK	요청 성공, 일반적인 응답
201	Created	새 리소스 생성 성공 (POST 요청 결과)
202	Accepted	요청 수락했지만 아직 처리되지 않음 (비동기 작업)
204	No Content	요청 성공, 응답 본문 없음

4xx: 클라이언트 오류 (Client Error)

코드 이름 설명

400	Bad Request	잘못된 요청 (문법 오류, 파라미터 누락 등)
401	Unauthorized	인증 필요 (로그인하지 않음 또는 토큰 없음)
403	Forbidden	권한 없음 (로그인했지만 접근 불가)
404	Not Found	요청한 리소스가 존재하지 않음
405	Method Not Allowed	지원하지 않는 HTTP 메서드 사용
409	Conflict	리소스 충돌 발생 (예: 중복 등록 시)

5xx: 서버 오류 (Server Error)

코드 이름 설명

500	Internal Server Error	서버 내부에서 오류 발생
502	Bad Gateway	게이트웨이 또는 프록시 서버가 잘못된 응답을 받음
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입니다. 국가별 정보, 수도, 통화, 인구 등을 확인할 수 있습니다.	바로가기

# API란

API는 Application Programming Interface(애플리케이션 프로그래밍 인터페이스)의 줄임말로,
소프트웨어끼리 상호작용할 수 있게 해주는 통신 규칙(인터페이스)입니다.

API는 프로그램과 프로그램 사이의 약속된 소통 방법

날씨 앱이 기상청 서버에서 데이터를 받는다 → API를 통해
웹사이트에서 구글 로그인 한다 → 구글 로그인 API 사용

REST API는 HTTP 기반으로 리소스(데이터)를 주고받기 위한 표준화된 URL+메서드 구조

'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