[TIL] 2021/11/30 Tue -

 

 

 

 

 

 

 

 

Today I Learned

 

 

오늘은 리덕스와 서버리스 인증 서비스를 이용하여 회원가입과 로그인, 로그아웃을 구현하는 강의를 들었다.

말 그대로 강의를 들었을 뿐, 내 것으로 완전히 체화하지는 못 한 것 같다.

 

강의 중간 중간에 멘토님이 "생각보다 어렵지 않죠?" 라는 말을 많이 하시는데

아니요??? 라고 육성으로 대답할 뻔 했다.

 

그래도 1주차 미니 프로젝트 때 궁금했던 것들이 대부분 해소된 하루이기도 했다.

 

1주차 미니 프로젝트에서 내가 회원가입과 로그인 기능을 담당하지는 않았지만

메인 페이지를 담당했기 때문에 로그인 상태와 로그아웃 상태를 확인해야 하는 기능들이 있었고,

구현은 어찌저찌 했지만 로직을 제대로 이해하지 못 했거나 결국 구현하지 못한 기능들도 있었다. (또르륵...)

 

1주차에도 JWT 방식으로 로그인을 구현해야 했어서 토큰을 이용했었는데

오늘 강의를 듣고 나니 내가 구현했던 방법들은 보안상 굉장히 취약했었다는 걸 알 수 있었다.

 

 

 

👩🏻‍🌾 오늘의 수확

 

 

📍 콜백

 

 

콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나로,

전통적인 콜백 패턴은 콜백헬로 불리는 중첩 문제가 발생하기 쉽다.

 

콜백 헬이란?

 

꼬리에 꼬리를 무는 비동기 처리가 늘어나면 호출이 계속 중첩되고, 코드는 깊어져서 관리가 어려워지는 현상

이러한 깊은 중첩을 콜백 헬 또는 멸망의 피라미드라고 부른다.

 

function async1('a', function (err, async2){
	if(err){
		errHandler(err);
	}else{
		...
		async2('b', function (err, async3){
			...
		}){
			...
		}
	}
});

 

콜백 헬이 발생하는 이유?

 

비동기 처리를 할 때에는 실행 완료를 기다리지 않고 바로 다음 작업을 실행한다.

즉, 순서대로 코드를 작성한다고 해서 내가 원하는 순서대로 작업이 이뤄지지는 않는다.

이러한 이유로 비동기 처리 함수 안에서 처리 결과를 반환하는 것으로는 원하는 동작을 하지 않기 때문에

원하는 동작을 하게 만들기 위해 콜백 함수를 사용하게 된다.

이 콜백 함수 안에서 또 다른 비동기 작업이 필요한 경우 위와 같은 중첩이 생기면서 콜백 헬이 발생한다.

 

 

 

📍 프로미스와 프로미스 체이닝

 

 

프로미스란?

 

비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.

프로미스를 쓰면 비동기 메소드를 마치 동기 메소드처럼 값을 반환할 수 있으며,

전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴이다.

비동기처리 시점을 조금 더 명확하게 표현해준다.

 

1. 프로미스 생성

 

프로미스는 Promise 생성자 함수를 통해 생성한다.

비동기 작업을 수행할 콜백 함수를 파라미터로 받아서 사용한다.

 

// 프라미스 객체를 만든다
// 파라미터로는 (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수라고 부른다.)를 받는다.
// 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행한다.
// resolve: 작업이 성공한 경우 호출할 콜백
// reject: 작업이 실패한 경우 호출할 콜백
const promise = new Promise((resolve, reject) => {
	if(...){
		...
		resolve("성공!");
	}else{
		...
		reject("실패!");
	}
});

 

 

2. 프로미스 상태값

 

pending: 비동기 처리 수행 전 (resolve, reject가 아직 호출되지 않음)

fulfilled: 수행 성공 (resolve가 호출된 상태)

rejected: 수행 실패 (reject가 호출된 상태)

settled: 성공 or 실패 (resolve나 reject가 호출된 상태)

 

 

3. 프로미스 후속 처리 메소드

 

프로미스로 구현된 비동기 함수는 프로미스 객체를 반환한다.

프로미스로 구현된 비동기 함수를 호출하는 측에서는 이 프로미스 객체의 후속 처리 메소드를 통해 비동기 처리 결과 (성공 결과나 에러 메시지 등)를 받아서 처리해야 한다.

 

.then(성공 시, 실패 시(opt))

then의 첫 번째 인자는 성공 시 실행, 두 번째 인자는 실패 시 실행된다.

 

let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료!"), 1000);
});

// resolve
promise.then(result => {
	console.log(result); // 완료!가 콘솔에 찍힐거예요.
}, error => {
	console.log(error); // 실행되지 않습니다.
});

 

let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!")), 1000);
});

// reject
promise.then(result => {
	console.log(result); // 실행되지 않습니다.
}, error => {
	console.log(error); // Error: 오류!가 찍힐거예요.
});

 

.catch(실패 시)

 

let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!"), 1000);
});

promise.catch((error) => {console.log(error};);

 

 

Promise Chaninging

 

프로미스는 후속 처리 메소드를 체이닝해서 여러 개의 프로미스를 연결할 수 있다.

프로미스 체이닝이라고도 하며, 이 방법으로 콜백 헬을 해결할 수 있다.

 

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어준다.
	console.log(result);
	return "promise 3";
}).then(...);

 

 

 

📍 async - await

 

async

함수 앞에 async를 붙여서 사용하며, 항상 프로미스를 반환한다.

프로미스가 아닌 값이더라도 프로미스로 감싸서 반환한다.

 

await

async의 짝꿍으로, async 없이는 사용할 수 없으며, async 함수 안에서만 동작한다.

await를 만나면 함수 실행이 잠시 중단되었다가 프로미스가 처리될 때까지 기다린 이후에 결과를 반환한다.

즉, 함수 실행을 기다리게 하는 것이다.

 

 

 

📍 Firebase Authentication

 

 

📍 토큰 기반 인증

** 별도 작성