[자바스크립트] 기초문법 공부노트 - 인프런 Amazing Javascript 후기 및 추천!

 

 

시작하며

이번에 캡틴판교님의 자바스크립트 무료강의가 새로 오픈됐다.

사실 캡틴판교님 강의 오픈 소식은, 개인적으로 좋아하고 존경하는 개발자 유르마무님을 통해 알게되었는데

 

이후 개인적으로 TS를 공부할 일이 생겨서 자바스크립트 강의를 듣게 되었다. 

 

기초부터 차근차근 잘 짚어주시기도 했고, Swift와도 많이 유사하기 때문에 가벼운 마음으로 들을 수 있었다.

 

 

강의링크

[지금 무료] Amazing JavaScript - 입문 강의 | 장기효(캡틴판교) - 인프런

 

듣다보니 한 이틀, 순식간에 완강!하게 됐다. 쉽고 가볍게 설명해주시고 강의 교안이 웹사이트로 따로 정리되어 있어서 공부하며 듣기 좋았다. 

강의 영상은 약 3시간이지만, 실제로는 공부노트 정리하고 실습한 시간 포함하면 6시간~7시간 정도 걸린 것 같다.

 

인프런에서는 강의를 들으면서 공부노트를 회차마다 정리할 수 있는데, 정리하다보니 노트가 약 67개...!

 

기존 공부노트에 개인적으로 정리하고 따로 실습한 내용을 추가하여, 한번에 편하게 볼 용도로 블로그에 정리하였다. 

이후에도 캡틴판교님의 타입스크립트 강의들도 결제했는데, 완강할 때마다 공부한 기록을 블로그에 올리는 것이 목표!

 

타입스크립트 끝내면 리액트도 도전할 예정!!

 

 

 

---

 

공부 내용 정리

작업환경 - 콘솔

Chrome 브라우저에서 개발자 도구, Console 에 들어가서 간단한 자바스크립트 문법을 실습할 수 있다.

단축키

• Window: F12
• Mac: Cmd + Opt + i

콘솔에서 필요한 정보만 보기

ㅚ

작업환경 - 코드샌드박스

모듈화와 같이 별도의 도구설정이 필요한 실습에서는 코드 샌드박스를 이용해 ㅁ리 설정된 도구를 이용하여 실습할 수 있다.

코드샌드박스

코드샌드박스 단축키

ctrl+space bar 단축키를 이용하여 자동완성을 할 수 있다.
코드샌드박스는 VSCode의 기본적인 동작과 특성을 많이 가져온 개발툴이어서 동일한 단축키도 적용되는 것을 확인할 수 있다.

코드샌드박스 장점

파일을 변경했을 때 변경한 것이 바로 적용되고 콘솔에 찍힌다.

변수

예전에는 var를 이용해서 선언하다가 요즘엔 let, const 를 사용한다.

다만 수업 중에는 var가 계속 예제로 나왔는데 var로 선언한 변수는 이미 선언했어도 또 아래에서 선언할 수 있기 때문에 일일히 브라우저를 새로고침(F5) 하지 않아도 되는 장점이 있다.

var 엣날변수선언방식 = 'hi';

let 요즘변수 = 'hi';

newVar = 'hello'; // ✅ OK

const 요즘상수 = 10;

요즘상수 = 20; // ❌ Error 

let은 값을 재할당 할 수 있지만 const는 상수이므로 값을 재할당 할 수 없다.

때문에 const 키워드를 이용해서 상수인 변수를 선언하려면 처음 선언 시에 초기화도 같이 해주어야 한다.

undefined

변수를 선언만 하고 값을 할당하지 않으면 undefined 가 된다.

변수에 넣을 수 있는 데이터 유형

숫자, 문자열, 진리값, 배열, 객체 모두 변수로 선언할 수 있다.

let a = 0.6;
let b = 'hi'; // 작은 따옴표로 문자열 정의하는 것을 권장 
let c = true;
let d = []; // 배열
let e = {}; // 객체

유의사항/컨벤션

유의사항

변수명으로 영어 대소문자, 언더스코어(_), 한글이 가능하다. 단 숫자는 변수명의 첫글자로 사용할 수 없다.
각종 특수문자, 대시(-)는 사용불가.

컨벤션

주로 camelCase 를 많이 사용한다. 첫 글자는 소문자로 시작하고, 뒤에 붙는 단어의 시작글자를 대문자로 하는 기법.

함수

함수 선언

function 함수명(인자) {
    // 함수 구현부
  return 반환값
}

함수 호출

함수명(인자);

익명함수와 화살표 함수

// 함수명이 없다. 
let 변수 = function(인자) {
    console.log('익명함수', 인자);
}

// function 키워드없이 익명함수를 사용할 수 있다. 
let 변수2 = (인자) => {
    console.log('화살표함수', 인자);
}

일급 함수

함수가 변수처럼 어디든 할당될 수 있는 것이 1급 함수로서의 특성.

• 참고링크
  MDN: First Class Function

때문에 함수의 인자로도 사용이 될 수 있다.

function 함수(인자) {
  인자();
}

함수(function() {
  console.log('일급함수');
});

화살표 함수의 축약 문법

var annonymous = () => { console.log('hi, i\`m annonymous.'); }

1. 반환문 하나만 함수본문에 있을 경우 {} 중괄호를 생략할 수 있다.
   () => 10+20; // {} 을 안 씀
2. 전달인자가 하나일 경우 () 소괄호를 생랼할 수 있다.
   let a = num => { return num * 10; }
3. 1과 2를 조합할 수 있다. (), {}를 모두 생략.
   let a = num => num * num;

조건문

if, else 키워드를 이용하여 조건문을 정의할 수 있다. 중간에 조건을 더 달고 싶으면 else if 키워드 사용한다.

let height = 130; 
if (height >= 120) { console.log('탑승가능'); } else { console.log('탑승불가'); }

반복문

for 키워드를 이용하여 반복할 수 있다.

for(let i=0; i<10; i++) {
  console.log(i);
}

객체 Object

자바스크립트는 객체기반 언어이다. 배열도 기술적으로 따지면 객체이며, 자바스크립트에서는 객체를 정말 많이 다룬다.

객체 선언하는 방식

key: value 형식으로 {} 중괄호 내에 선언한다.

let obj = {
  id: 10,
  name: 'Dee'
}

obj // { id: 10, name: 'Dee' }

객체에 속성 추가하기

맨 처음에 변수 선언 시에 객체 형태로만 선언하면 이후 얼마든지 객체 내의 속성을 추가할 수 있다.

let obj = {};

obj.id = 36;
obj.hobby = '가드닝';

obj // { id: 36, hobby: '가드닝' }

객체 축약 문법 Enhanced Object Literal

객체를 정의할 때 타이핑을 줄여줄 수 있다.

만약 특정 변수 a 에 대해 정의되어 있을 때, a의 값을 사용하려면 아래와 같이 정의해주어야 한다.

let a = 10;

let obj = {
  a: a
}

obj // { a:10 }

그런데 a의 변수명을 그대로 key 로 사용하고 값도 a와 동일하게 사용한다면 key:value 위치에 변수 이름만 넣어 대체할 수 있다.

let a = 10;
let b = 20;

let obj = {
  a,
  b,
  c: 40
}

obj // { a: 10, b: 20, c: 40 }

객체 속성에 함수를 정의할 수 있다.

let dee = {
  studying: function() { console.log('자바스크립트 공부중!'); }
};

dee.studying(); // 자바스크립트 공부중!

function 키워드와 key값 없이 바로 함수명() {} 형태로 객체안에 선언할 수 있다.

const 개냥이 = { 울기() { console.log('멍멍냥냥'); } };

개냥이.울기(); // 멍멍냥냥 

배열

[] 배열 리터럴을 통해 배열을 정의할 수 있다.

let 배열 = [];

배열 인덱스에 접근하여 값을 부여할 수 있다.

// 배열[인덱스] = 값; 
배열[0] = 10;

이렇게 인덱스에 바로 접근하는 경우, 추가하려는 값이 바로 뒤여도 인덱스를 점프할 수 있는데, 이 경우 중간에 빈 값이 자동으로 추가된다.

배열 조작방법과 내장 API

내장 API: 자바스크립트에서 개발자들이 사용할 수 있게 미리 만들어진 기능
자바스크립트 표현으로는 프로토타입 메서드 Prototype method 라고 부른다.

• 배열의 길이

let arr = [];
arr.length // 0

• push를 이용해 배열 끝에 값을 넣어준다.

var arr = ['a','b'];
arr.push('c');

arr // ['a', 'b', 'c']

• 그 외에도 아래와 같은 배열 내장 API들이 있다.
  push(값)
  pop()
  splice()
  slice()

배열의 내용을 조작할 때 내장 API를 이용하는 것이 가장 안전한다. 실질적으로 웹앱을 이용할 때도 이 방식을 이용해 많이 만든다.

배열 반복문: forEach

var arr = [1,2,3];

arr.forEach(function(value, index) { console.log(value, index) });

함수에 넘길때 배열의 값을 첫번째 파라미터로 접근할 수 있다. 두번째 파라미터를 선언하게 하게 되면 배열의 인덱스를 접근할 수 있다.

• 참고문서
  MDN: 배열의 반복문

배열의 또다른 주요 API: map, filter

• map 을 통해 배열 요소 값을 변환한 다른 배열을 반환한다.

[10,20,30].map(function(value, index) { return value * index; }) 
// [0, 20, 300] 이 반환된다. 

• filter 를 통해 조건을 충족하는 배열 요소로 이루어진 배열을 반환한다.
• [10,20,30].filter( value => { return value > 10 });

// [20, 30]을 반환한다.

## 템플릿 리터럴 
자바스크립트에서는 문자열을 정의할 때 '' 작은 따옴표를 사용하는데, ES6부터는 백틱(\`)을 이용하여 문자열을 선언하는 방법이 추가되었다. 

백틱을 이용하면 한줄이 아닌 여러줄도 정의가 가능하며, 데이터를 끼워넣어 보여줄 수 있다. (텍스트 보간) 

```javascript
var a = `
백틱으로 문자열을 정의하면 이렇게 
여러줄울 선언할 수 있다.
`

var b = 3
let c = `안녕x${b}`

c // '안녕x3'

디스트럭처링 Destructuring

기존의 자바스크립트 문법에서 좀 더 진화된 최신문법. 코드의 반복을 줄이기 위한 개선된 문법이다.

배열에 대한 디스트럭처링

기존에는 매번 배열에서 특정 요소를 꺼내올 때 인덱스 하나하나 접근하여 가져오고 있다.

// AS-IS 
var arr = ['apple', 10]; 

var stockName = arr[0];
var count = arr[1]; 

디스트럭쳐링을 통해 배열의 요소를 좀 더 쉽게 가져올 수 있다.
변수를 선언할 때 배열 리터럴을 붙이고, 안에 선언할 변수를 넣은 다음 값으로 배열을 넣으면 자동으로 첫번째, 두번째 변수에 배열의 첫번째, 두번째 값이 들어간다.

let arr = ['PLTR', 20]

// var [변수이름1, 변수이름2] = 배열;
let [stock, count] = arr; 

객체애 대한 디스트럭처링

객체 프로퍼티 값을 접근할 때도 일일히 객체 이름을 적어주어야 하는 번거로움이 있다.

let obj = { language: 'english', score: 990 };

let myLanguage = obj.languange;
let myScore = obj.score;

변수 이름을 객체 프로퍼티와 동일하게 할 경우, 디스트럭쳐링을 통해서 바로 변수를 선언하면서 객체의 값을 꺼내와 초기화할 수 있다.

let obj = { skill: 'drawing', hobby: 'game' };

// let { 변수이름1, 변수이름2 } = 객체;
let { skill, hobby } = obj;

주의, 객체는 객체 프로퍼티 이름과 변수 이름이 동일하지 않으면 적용되지 않는다.

스프레드 오퍼레이터 Spread Operator

펼침 연산자로, 객체 또는 배열의 값을 다른 객체 또는 다른 배열로 복제, 옮길 때 사용한다. 연산자는 ...로 말줄임표와 동일한 모양으로, 복제하려는 곳에 배열 또는 객체이름 앞에 붙여 사용한다.

// 객체 
let obj = { id: 1, name: 'White' }; 

let user = { 
  ...obj,
  level: 15
}

user // { id: 1, name: 'White', level: 15 }

// 배열 
let a = [2,3,4];
let b = [ 1, ...a, 5];

b // [1,2,3,4,5] 

자바스크립트의 모듈화: Import와 Export

기본적으로 자바스크립트 유효범위는 전역으로, HTML 파일에서 <script> 태그를 이용해서 자바스크립트를 로딩할 수 있다. 여러개의 자바스크립트 파일을 아래와 같이 로딩해서 사용하는데, 보통은 파일 기반으로 구분되길 기대하지만 실제로는 그렇게 동작되지 않는다.

초반에 자바스크립트 언어 자체가 브라우저의 작은 동작을 담당하기 위한 스크립트 언어다보니 모듈화에 대한 지원이 되지 않았었다.

아래와 같이 first, second에 각각 변수와 함수를 선언하고, 변수명이 중복될 경우, 로드되는 값의 가장 가까운 값을 찾아오다보니 원하는 값이 나오지 않을 수 있다.

<!- index.html -->
<body> 
  <script src="first.js"></script>
  <script src ="second.js"></script> 
  <script>
    getPrice(); // 3000이 오게된다. 
  </script>
</body>

// first.js 
var price = 1500;
function getPrice() {
  return price;
}

// second.js
var price = 3000;

이렇게 파일별로 변수의 이름이 충돌되거나 중복정의가 되서 의도치 않은 동작이 일어날 수 있는데, 파일 기반으로 분리해서 사용할 필요성이 많아지고 있다, 그 관점에서 파일기반으로 모듈을 구분하기 위해서 아래와 같이 별도의 라이브러리나 패턴을 사용해왔다.

• 라이브러리 Require.js
• 네임스페이스 모듈화 패턴

이제는 자바스크립트 언어자체에서 모듈화를 지원하게 되어 이를 사용하면 된다.

ES6+(2015년 ECMAScript) 에서 Import, Export 문법이 바로 그것이다. React, Vue와 같은 프레임워크를 쓸 때 import, export를 필수적으로 쓰다보니 이에 대한 이해가 중요하다.

Import와 Export 기본 문법

다른 파일로 내보낼 변수, 함수 앞에 export 키워드를 붙인다.

export 변수, 함수

이미 export로 내보낸 변수, 함수들은 사용할 곳에서 import 키워드를 이용해서 불러와 사용할 수 있다.

import { 불러올 변수, 불러올 함수 } from '파일경로' 

default export, import

내보낼 변수 또는 함수가 파일 안에서 하나일 경우 default 키워드를 붙여서 내보내고, 가져올 때도 중괄호 없이 가져온다.
보통 Vue, React의 컴포넌트를 내보낼 때 export default를 많이 사용하게 된다.

let msg = 'hello';

export default  msg;

import msg from "./app"; 

Import, Export 를 이용한 모듈화 및 라이브러리 사용 실습

별도의 도구 설정이 필요하기 때문에 코드 샌드박스에서 실습을 한다.

JS 파일 모듈화를 위한 Import, Export

// math.js
const pi = 3.14;

function sum(a,b) { return a*b; };

export { pi, sum }

// app.js 
let message = 'Hi :)'

export default message

// index.mjs

// 일반 문법
// import { 변수, 함수 } from "파일경로";
import { pi, sum } from "./math.js"; // ctrl+space로 자동완성할 수 있다.

// default 문법
// import 변수 또는 함수 from "파일경로";
import message from "./app";

console.log(pi);
console.log(sum(pi, 10));
console.log(message);

라이브러리 Import, Export

왼쪽에 있는 dependencies 에서 검색해서 설치할 수 있다.

lodash라고 하는 유틸리티 라이브러리를 설치해볼 것이다.

lodash 공식홈페이지
lodash 는 정말 많이 쓰이는 유틸리티 라이브러리로, 자바스크립트로 데이터를 조작할 때 자주 사용되는 로직이나 구문을 기능으로 엮어놓은 라이브러리이다.

// import {  라이브러리 기능 } from "라이브러리 이름";
// import 라이브러리로 사용할 이름 from "라이브러리 이름";

import lo from "lodash"; 

console.log(lo); // 라이브러리 이름을 콘솔에 찍으면 사용가능한 유틸 목록을 확인할 수 있다. 
console.log(lo.VERSION); // lodash의 버전 정보가 뜬다. 

비동기 처리

예로 유튜브 화면을 그리기 위해서 자바스크립트가 하는 것들이 무엇인지 기술해보자.

• 사용자정보요청
  fetchUser(); // 0.1초
• 좌측 메뉴 정보 요청
  fetchMenuInfo(); // 1초
• 영상 본문 요청
  fetchContents(); // 1시간
• 페이지 UI 표시
  renderPageUI(); // 2초

만약 각 요소마다 걸리는 시간이 위와 같다면, 총합 작업은 최소 1시간이 될텐데, 사이트에서 1시간 동안 아무것도 나오지 않는다면 아무도 이 사이트를 찾지 않을 것.여기서 각각 함수, 특정 코드가 연산이나 실행이 오래걸리면 자바스크립트는 그 코드의 실행을 기다리지 않고 다른 코드를 실행하게 한다.

즉, 자바스크립트에서는 여러 작업을 동시에 처리하기위해 비동기(Asynchronous)라는 개념을 도입하여 특정 작업이 완료되기까지 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 하였다.

• 참고: inpa dev tistory

비동기 처리방식 3가지

자바스크립트에서 비동기 처리방식은

콜백함수, Promise, Async-Await

이렇게 3가지가 있다.

비동기처리: 콜백함수

요청 완료 후에 실행할 코드를 콜백함수라고 한다.
1급함수의 개념이 사용되는 부분, 비동기 처리를 위해서 꼭 사용할 수 밖에 없는 문법이 콜백함수 문법이다.

function fetchMenuInfo() {
  // return "메뉴명";
  // 문자열이 아니라 jquery, axios, 서버로 데이터를 요청하는 코드를 넣는다면 오랜 시간이 걸릴 것
  // return axios.get("");
  return $.get("http://domain.com/api/menu");
}

fetchUser();

// 함수의 반환값이 변수에 담긴다.
var menu = fetchMenuInfo();

fetchContents();

renderPageUI(menu);

서버 요청 후 받아오는 것이 한시간이 걸린다고 하면, 그걸 코드가 실행이 완료될 때까지 기다린다고 하면 이후 코드는 진행이 되지 않고, 페이지에서 사용자가 볼 수 있는, 상호작용할 수 있는 요소가 없어서 웹페이지의 품질이 떨어지게 된다.

이렇게 오래걸리는 코드는 let menu = 함수(); 로 사용하는 것이 아니라 콜백을 이용한다.

바로 이렇게

// 비동기 처리를 위한 콜백 등록
function fetchMenuInfoAsync() {
  let menu;
  return $.get("http://domain.com/api/menu", function (response) {
    menu = response;
  });
}

혹은 이렇게 둘 수도 있다.

let menu;
fetchMenuInfo(function(response) {
  menu = response;
});

만약 어떤 데이터를 받아왔을 때 특정로직을 실행하고 싶다면 콜백함수를 이용해서 하고 싶은 동작을 넣어주면 된다.

let menu;
fetchMenuInfo(function(response) {
  menu = response;
  renderPageUI(menu);
});

setTimeOut() 메서드를 통해 콜백함수 눈으로 확인해보기

function fetchMenu() {
  return { first: "마이페이지" };
}

let menu;
menu = fetchMenu();

console.log("출력결과: ", menu);

이렇게 할 경우 바로 콘솔에 값이 찍히지만 setTimeOut()을 통해 일정시간 딜레이를 주게 되면 아래와 같이 출력결과의 값이 없는 상태로 콘솔에 찍게 되어서 undefined가 오게된다.

function fetchMenu() {
  setTimeout(() => {
    // #1
    let data = { first: "마이페이지" };
    return data;
  }, 5000); // 5초 딜레이
}

let menu;
menu = fetchMenu();

// #2
console.log("출력결과: ", menu);

즉 위의 코드에서 #2 코드가 먼저 실행되고 이후 #1이 완료된다.

때문에 결과를 받고 나서 출력을 하려고 하면, 아래와 같이 콜백함수를 등록해주어야 한다.

function fetchMenu(callbackFunction) {
  setTimeout(() => {
    // #1
    let data = { first: "마이페이지" };
    callbackFunction(data);
    return data;
  }, 5000); // 5초 딜레이
}

let menu;
menu = fetchMenu(function (data) {
  console.log("5초 뒤 결과", data);
  menu = data;
  console.log("5초 뒤 출력결과: ", menu);
});

// #2
console.log("출력결과: ", menu);

콜백 함수의 단점

콜백함수를 통해서 충분히 현대의 프론트엔드 개발을 진행할 수 있다. 다만 콜백함수를 썼을 때의 두가지 단점때문에 Promise 또는 Async/Await을 쓰는 것이 좋다.

1. 에러처리에 대한 번거로움

기존 코드에서 코드에 에러가 날 경우 어떻게 처리해야될까?
에러 값을 콜백의 인자로 넣어주고 에러값이 있을 경우 대응을 하는 등 추가적인 처리가 필요하다.

function fetchMenu(callbackFunction) {
  setTimeout(() => {
    // #1
    let data = { first: "마이페이지" };
    callbackFunction(error, data);
    return data;
  }, 5000); // 5초 딜레이
}

let menu;
menu = fetchMenu(function (error, data) {
  // 에러핸들링
  if (error) {
    console.log("에러처리");
    return;
  }
  console.log("5초 뒤 결과", data);
  menu = data;
  console.log("5초 뒤 출력결과: ", menu);

  renderPageUI(function (response) {
    response;
  });
});

2. 콜백 지옥 Callback Hell

러가 하나의 콜백함수를 처리할 땐 문제가 없어보여지지만 콜백함수가 여러개 겹쳐지는 경우에는 문제가 생길 수 있다.
콜백 안에 계속 콜백, 콜백으로 이어지는 것을 콜백 지옥이라고 부른다.

이 경우 어느 지점에 어떤 에러처리를 해야되는지 코드 분기가 복잡해진다.

비동기처리: Promise

콜백보다 개선된 문법이 필요했고 그에 맞춰 Promise가 등장했다.

강사님 블로그: Promise

Promise는 자바스크립트 비동기처리에 사용되는 객체이다.

Promise 사용해보기

Promise 를 이용해 여러가지 함수를 체이닝해서 사용할 수 있고,간결화되며 전체 구간에서 로직상 난 에러가 catch에서 잡아줄 수 있다.

et menu;

// 프로미스 문법으로 작성된 코드
// .then()은 코드의 실행이 끝나고 나면 then 이 실행이 됨
function fetchMenuPromise(callbackFunction) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      // #1
      let data = { first: "마이페이지" };

      if (data.first != 1) {
        reject(new Error("first data is not 1"));
      }

      resolve(data);
    }, 5000); // 5초 딜레이
  });
}

fetchMenuPromise() // Promise 객체여야만 then, catch가 유효하게 동작한다.
  .then(function (result) {
    console.log("5초 뒤 실행", result);
    menu = result;
  })
  .catch(function (error) {
    // catch를 이용해 에러핸들링
    console.log("에러 처리", error);
    return;
  });

비동기처리: Async/Await

자바스크립트 비동기 처리 패턴 중 가장 최근에 나온 문법
콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있도록 도와준다.

[강사님 블로그: Async, Await](https://joshua1988.github.io/web-development/javascript/js-async-await/

Async/Await의 장점

기본적으로 위 아래를 왔다갔다 하며 읽는 다이나믹 리딩이 아닌, 위에서부터 아래로 한줄한줄 읽으며 사고하는 것이 사람들에게 편하다. 콜백과 Promise 의 경우 코드의 흐름이 인간의 자연스러운 시각적 흐름과 맞지 않는다. 이를 개선하기 위해 나온 것이 Async, Await 문법으로 위에서부터 아래로 한줄 한줄씩 비동기처리를 할 수 있도록 하는 것이 async/await 코드가 된다.

Async, Await 문법

동기코드를 작성하는 순서대로 async, await 문법을 사용할 수 있다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

강사님 예제와 다르게 axios를 활용하여 실제 API에서 명언을 가져와서 출력하는 코드를 구현해보았다.

• Axios 사용방법 참고링크 codeit

import axios from "axios";

const instance = axios.create({
  baseURL: "https://type.fit/api/quotes",
});

// async=await 문법으로 작성된 코드
async function fetchMenu() {
  return await instance.get();
}

async function init() {
  let quote; // undefined

  quote = await fetchMenu();

  console.log(quote.data);
}

init();

Async, Await 의 에러 핸들링

await 구문을 try로 묶고, 뒤에 catch 로 error를 처리해준다.

이후에 할 다른 비동기 코드로 await 키워드를 이용하여 호출해주면 된다.

import axios from "axios";

const instance = axios.create({
  baseURL: "https://type.fit/api/quotes",
});

// async=await 문법으로 작성된 코드
async function fetchMenu() {
  return await instance.get();
}

async function renderPageUI() {
  console.log("페이지 UI 렌더링");
}

async function init() {
  try {
    let quote; // undefined
    quote = await fetchMenu();
    await renderPageUI();
    console.log(quote.data);
  } catch (error) {
    console.log(error);
  }
}

init();

 

 

---

 

 

오늘도 읽어주셔서 감사합니다. 

 

궁금하거나 나누고 싶은 얘기가 있으시면 댓글로 알려주세요!

재밌게 읽으셨다면 공감과 구독은 큰 힘이 됩니다. 

 

항상 감사합니다.