나의 개발일지 TIL(Today I learned) - promise, async, await, 객체리터럴, 에러 핸들링, 클래스, express.js

Today I learned

• promise
• async, await
• 객체리터럴
• 에러 핸들링
• 클래스
• express.js

 

promise

promise는 비동기 처리를 위해 사용된다

왜 promise를 사용할까? 기존 비동기 처리는 콜백함수를 사용해서 처리하는데 콜백함수를 연달아 써야하는 경우 코드가 매우 깊어지고 가독성도 좋지 못한다 이를 콜백 지옥이라고 부른다

이러한 불편함을 개선하기 위해 개선된 비동기 처리 promise를 사용하여 비동기 작업의 개수가 많아져도 코드의 깊이가 깊어지지 않게 된다.

 

promise는 비동기 작업이 완료된 후 다음 작업을 연결시켜 진행할 수 있다 작업 결과에 따라서 성공 또는 실패를 리턴하며 결과값을 전달 받을 수 있다 promise객체를 통해 미리 함수를 등록해두고 resolve, reject가 호출받으면 함수를 실행하는 식이다 여기서 excutor부분은 바로 실행이 되버리기 때문에 그 부분을 잘 생각하고 사용해야한다

promise는 3가지의 상태가 있다 pending, fulfilled, rejected 프로미스 객체는 생성자를 통해서 만드는데 만들어 질 때executor가 바로 실행이 되면서 pending상태가 되고 실행이 끝나고 resolve()가 실행이되면 fulfilled상태가 된다 에러가나서 reject함수가 실행이 된다면 rejected상태가 된다 fulfilled상태과 되면 p.then안에서 설정한 callback함수가 실행이 된다

const p = new Promise((resolve, reject) => {
    /* executor */
	/* pending */
	setTimeout(() => {
		resolve(); /* fulfilled */
	}, 1000);
});

p.then(() => {
	/* resolve 된 이후에 실행됨*/ 
	/* callback */
	console.log('1000ms후에 fulfilled 됩니다.');
});

rejected상태가 되면 catch안에서 callback함수가 실행이 된다

function p() {
	return new Promise((resolve, reject) => {
		 /* executor */
	/* pending */
		setTimeout(() => {
			reject(); /* rejected */
		}, 1000);
	});
}

//원하는 시점에 프로미스 객체를 생성하고 콜백함수도 호출할 수 있다.
p()
	.then(() => {
		console.log('1000ms후에 fulfilled 됩니다.');
	})
	.catch(() => {
		console.log('1000ms후에 rejected 됩니다.');
});

resolve, reject함수에는 인자를 넣어서 then, catch의 callback함수의 인자로 사용할 수 있다

function p() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			reject(new Error('error');
		}, 1000);
	});
}

//원하는 시점에 프로미스 객체를 생성하고 콜백함수도 호출할 수 있다.
p()
	.then(() => {
		console.log('1000ms후에 fulfilled 됩니다.');
	})
	.catch(reason => {
		console.log('1000ms후에 rejected 됩니다.', reason);
});

fulfilled와 rejected가 진행 후 최종적으로 실행해야 하는 부분이 있다면 finally를 설정하고 사용하면 된다

p()
	.then(() => {
		console.log('1000ms후에 fulfilled 됩니다.');
	})
	.catch(e => {
		console.log('1000ms후에 rejected 됩니다.', e);
	})
	.finally(() => { //finally는 resolve나 reject로 인자를 줄수없다. 무조건 빈함수
		console.log('end');
	});

프로젝트 중에 API로 데이터를 요청하고 처리하는 경우에 데이터가 도착하지 않았는데 처리를 진행하고 표현해서 하얀 웹 화면을 보고 콜백으로 처리한 적이 있는데 그 부분에서 promise를 사용하면 조금 더 깔끔하게 해결 할 수 있을 거 같다

 

async, await

자바스크립트의 비동기 처리 기법은 setTimeout과 callback그리고 위에서 학습한 promise가 있다

세 가지 모두 비동기 코드를 동기식으로 작성하는 기법이지만 각자 약간의 문제들이 있다

그런 문제를 해결하고 사용법이 단순해졌다

async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다.
  return 'hello2'; //리턴값은 Promise{<resolved>: "hello2"} 자동 resolve해준다는걸 알 수있다.
  // reject는 throw 에러를 날리면 된다.
}

p2().then((n) => console.log(n));

함수에 async만 붙이면 promise객체로 자동으로 인식이 되고 return value는 resolve(value)와 똑같다

리턴값은 {<resolved>:"hello2"}라고 보면 된다 function 앞에다 async만 붙여주고 비동기 처리 부분 앞에 await만 붙여주면

쉽게 비동기 처리를 할 수 있다 async가 붙은 함수는 promise를 반환하고 promise가 아닌 것은 promise로 감싸 반환한다

await 키워드를 만나면 promise가 처리될 때까지 기다린다

function delay(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve(), 1000);
  })
}

async function getApple(){
  await delay();
  return "apple";
}

async function getBanana(){
  await delay();
  return "banana";
}

function getFruites(){
  getApple()
    .then((a) => { //리턴값이 곧 resolve()니까 then 가능
      getBanana()
        .then((b) => console.log(`${a} and ${b}`)); 
    }) // 콜백지옥
    
}

getFruites(); // 결과 : apple and banana

객체리터럴

객체리터럴은 객체를 생성하기 위한 표기법이다

객체 리터럴은 객체를 생성하기 위해 Class를 먼저 선언하고 new 연산자와 함께 생성자를 호출할 필요가 없이 일반적인 숫자 문자열을 만드는 것과 유사하게 객체를 생성할 수 있다 중괄호 {} 내에 0개 이상의 프로퍼티를 정의해서 선언한다

프로퍼티는 객체의 상태를 나타내는 data값이다 프로퍼티는 함수도 정의할 수 있고 이를 메서드라고 한다

let objectLiteral = {
    key: 'Value',
    helloWorld: function () {
        return "Hello world";
    }
};

 

에러 핸들링

에러 핸들링은 에러를 관리하는 방법이다 예상하지 못한 상황을 대처하는 방식이다

에러는 예상할 수 있는 에러와 예상하지 못한 에러로 구분할 수 있는데 예상하지 못한 에러의 상황이 더욱 많이 일어난다고 생각해야 한다

작성한 코드에서 예상하지 못한 에러가 일어날 가능성은 항상 언제나 존재한다 이런 상황을 대비해 언제든 처리할 수 있어야 한다

 

try / catch예외처리는 서버가 에러로 죽어버리는 경우가 없게 하기 위해서 진행한다예외 처리는 일반적으로 try / catch문을 사용한다 에러가 발생하더라도 프로그램이 멈추지 않고 에러를 기록할 수 있다

const users = ["Lee", "Kim", "Park", 2];

try {
  for (const user of users) {
    console.log(user.toUpperCase());
  }
} catch (err) {
  console.error(`Error: ${err.message}`);
}

// LEE
// KIM
// PARK
// Error: user.toUpperCase is not a function

throw에러는 무조건 발생시키면 안되는 걸까? 아니다 에러를 고의적으로 발생시켜야 하는 상황도 존재한다은행 프로그램이 현금 인출 서비스에서 계좌의 잔고가 요청 받은 금액보다 적으면 현금 인출을 막고 예외를 발생시켜야 한다 이럴때 사용하는 것이 throw이다 호출 즉시 현재 실행되고 있는 함수는 멈춘다

function withdraw(amount, account) {
  if (amount > account.balance)
    throw new Error("잔고가 부족합니다.");
  account.balance -= amount;
	console.log(`현재 잔고가 ${account.balance}남았습니다.`); // 출력되지 않음
}

const account = { balance: 1000 };
withdraw(2000, account);

// Error: 잔고가 부족합니다.

finally

try에서는 HTTP연결이 되고 있거나 파일과 같은 특정한 자원을 가지고 처리할 때가 있다

하지만 해당 자원을 계속 가지고 있으면 무의미한 메모리를 차지하게 된다 에러 여부와 상관 없이 일정 시점에서 자원을

삭제해야한다

function errorException(isThrow) {
  try {
    console.log('자원을 할당하였습니다.');
    if (isThrow) throw new Error();
  } catch (error) {
    console.log('에러가 발생했습니다.');
  } finally {
    console.log('자원을 제거하였습니다.');
  }
}

errorException(false);
// 자원을 할당하였습니다.
// 자원을 제거하였습니다.
errorException(true);
// 자원을 할당하였습니다.
// 에러가 발생했습니다.
// 자원을 제거하였습니다.

 

express.js

웹서버는 무엇인가? 웹서비는 인터넷을 통해 HTTP를 이용하여 웹상에서 클라이언트의 요청을 응답해주는 통신을 하는 컴퓨터 또는 프로그램이라고 생각하자 express.js는 node.js를 사용해서 웹서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크이다 다양한 웹 프레임워크가 존재하지만 가장 많은 node.js 웹서버는 express.js 프레임워크를 통해 개발이 되었다 최근 nest.js 프레임워크가 각광받고 있으니 한 번 공부해 보자!

새 프로젝트를 설정하고 npm 프로젝트 메니저를 사용해서 express.js를 설치하자

npm install express

 

 

기본 설정

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!');
});