항해 99 - 2022.02.05.SAT (비동기&콜백&프라미스&웹저장소)

이번 챕터 일정

• 02/04 (금) 21:00 까지 : S.A 제출 완료 ✅
• 02/07 (월) 14:00 : 아이엘포유 협력사 채용 세션
• 02/08 (화) 20:00 : ‘쌀 팔다 개발자’ 김병욱님 특강
• 02/08 (화) ~ 02/09 (목): 담당 매니저와 1:1 선택 면담
• 02/09 (수) 저녁 : 제4회 항해톡
• 02/10 (목) 21:00까지 : 주특기 심화 주차 개인/팀 과제 제출 완료
• 02/11 (금) 09:00 : 미니 프로젝트 주차 발제

오늘 내가 할 일

• 2주차 12강 까지 ✅
• 1일 1커밋 ✅

---

진짜 마의 2주 차,,, 절대 안 끝나는데요..... 찐으로 약간 지독해요,,선생님,,,

---

비동기 작업

1. 작업 요청
2. 결과를 기다리면서 다른 작업
3. 작업 결과물 내보내 줌
4. 결과물 가지고 또 다른 작업 하기

즉 서버에 작업을 요청하고 그 요청이 처리될 때까지 다른 작업을 하는 것을 말한다 

 

---

자바스크립트 

• 싱글 스레드로 작동하는 언어 (작업을 하나씩 수행하고, 동시 작업을 못함
• 대신에 비동기 작업은 동시에 가능
  • 원래 자바스크립트의 엔진은 작업이 시작되면 콜 스택에 하나씩 쌓이고, 수행하고 나면 사라진다 
  • <비동기 작업에선>
  • 작업이 시작되면 콜 스텍에 하나씩 쌓인다
  • 실행되면서 web api 쪽으로 넘어가면서 (위임) 콜스 텍에 있는 게 일단 사라짐
  • web api에서 처리하고 실행할 무언가를 콜백 큐로 넘겨준다
  • 콜백 큐 안에 콜백 함수는 이벤트 루프를 통해서 다시 콜스 텍으로 넘어간다
  • 다시 실행되면서 이제는 삭제된다 

 

---

콜백 함수 

• 자바스크립트가 비동기를 처리하기 위한 패턴 중 하나!
• 비동기 처리가 늘어나면 중첩이 깊어지고, 코드가 깊어지면 콜백 헬이 발생하게 된다 

---

콜벨헬을 처리하기 위한 다양한 방법들 

 

프라미스 

• 비동기 연산이 종료된 이후의 결과를 알기 위해서 사용하는 객체 
• 비동기 메서드를 마치 동기 메서드처럼 값을 변환할 수 있다. 
• 전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또 다른 비동기 처리 패턴
• 비동기 처리 시점을 좀 더 명확하게 표현 가능 

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

프라미스의 상태 값 

• pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행 성공(resolve가 호출된 상태)
• rejected: 수행 실패(reject가 호출된 상태)
• settled: 성공 or 실패(resolve나 reject가 호출된 상태)

프라미스의 후속 처리 메서드 

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

 

. 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: 오류!가 찍힐거예요.
});

 

• then의 첫 인자는 성공 시 실행, 두 번째 인자는 실패 시 실행됩니다. (첫 번째 인자만 넘겨도 됩니다!)

 

. catch(실패 시)

   // 프라미스를 하나 만들어 봅시다!
    let promise = new Promise((resolve, reject) => {
    	setTimeout(() => reject(new Error("오류!"), 1000);
    });
    
    promise.catch((error) => {console.log(error};);​

 

---

promise chaining(프라미스 체이닝)

1. 프라미스는 후속 처리 메서드를 체이닝 해서 여러 개의 프라미스를 연결할 수 있습니다! (이걸로 콜백 헬을 해결할 수 있어요!)
   • 체이닝이 뭔데? 그걸 어떻게 하는 건데?
   • 후속 처리 메서드 (then)을 쭉쭉 이어 주는 거예요. 

 

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

• 함수 앞에 async를 붙여서 사용합니다.
• 항상 프라미스를 반환합니다. (프라미스가 아닌 값이라도, 프라미스로 감싸서 반환해줘요!)

// async는 function 앞에 써줍니다.
async function myFunc() {
	return "프라미스를 반환해요!"; // 프라미스가 아닌 걸 반환해볼게요!
}

myFunc().then(result => {console.log(result)}); // 콘솔로 확인해봅시다!

await

• async의 짝꿍이에요. (async 없이는 못씁니다!)
• async 함수 안에서만 동작합니다.
• await는 프라미스가 처리될 때까지 기다렸다가 그 이후에 결과를 반환해요!

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

    console.log(promise);

	let result = await promise; // 여기서 기다리자!하고 신호를 줍니다.

    console.log(promise);

	console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 1초 후에 완료!가 콘솔에 찍힐거예요.
}

 

1.  👉 await를 만나면, 실행이 잠시 중단되었다가 프라미스 처리 후에 실행을 재개합니다! 즉, await를 쓰면 함수 실행을 기다리게 하는 거예요.

---

토큰 기반 인증 방식

• 유저의 인증 정부를 세션에 담지 않는 인증 방식

1.  유저가 로그인을 하면
2. 서버는 유저가 맞는지 아닌지 확인하는 작업을 진행
3. 유저가 맞다면 맞다는 걸 인증해주는 토큰을 발행
4. 클라이언트는 이 토큰을 저장했다가
5. 유저가 행동할 때마다 서버에 토큰이랑 같이 요청을 보낸다 
6. 서버는 토큰을 확인해서 맞으면 응답해준다

---

Aoth2.0

• 외부 서비스의 인증 및 권한 부여를 관리하는 프레임 워크
• 인증과 허가를 포함한다 

• OAuth 동작 방식 (간단 ver.)
  1. 클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_token을 줍니다.
  2. 클라이언트는 access_token을 이용해서 API 요청을 할 수 있어요.
  3. 서버는 API 요청을 받고, access_token을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에 보내줍니다.
• OAuth 동작 방식 (외부 서비스 엮음 ver.)
  1. 유저가 구글 로그인을 합니다.
     • 자원 소유자가 자원 서버에 권한 요청을 한 거죠!
  2. 구글은 로그인할 때 유저가 입력한 정보(아이디, 비밀번호 등)를 보고 클라이언트(우리 웹사이트!)에 접근 권한을 줍니다.
  3. 클라이언트는 이 권한을 가지고 Authorization server(권한 서버)에 access_token을 요청합니다.
  4. 클라이언트는 이 access_token을 가지고 구글에서 유저 정보를 가져올 수 있어요.
  5. 구글은 클라이언트가 보낸 access_token을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에 보내줍니다.
• </aside>
• <aside> 👉 유저가 구글 로그인을 하는 상황이라고 가정하고 생각해봅시다! 공식적으로 쓰는 용어와 함께 가정해볼게요. :)

---

JWT(Json Web Token)

• json 형태로 이루어 져있는 토큰
• 전자 서명이 포함되어있는 토근
• 토큰 방식으로 움직인다 
• [header]. [payload]. [signature]의 형태로 이루어져 있음 
• header : 토큰의 타입과 암호화 방식 정보
• payload : 토큰에 담을 정보 키: 벨류 값으로 들어감
• signature : 서명 정보로써 secret key, header, payload 가 암호화돼서 들어감

---

 웹 저장소 

1. 클라이언트 저장소  (개발자 도구 → Application 탭 → 좌측 Storage)
2. 쿠키
   • key: value 형태의 저장소 
   • 약 4kb까지 저장 가넝한~
   
3. 세션 스토리지
   •  저장된 데이터는 브라우저를 닫으면 제거된다 
   
4. 로컬 스토리지
   • 따로 지워주지 않으면 계속 브라우저에 남아있음
   • 중요한 정보를 넣어두면 아주 위험쓰,,

https://velog.io/@lsj8367/Javascript-%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%B0%A9%EC%8B%9D%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90