[리액트 심화반] 2주차 개발일지

1. 배운 내용

토큰 기반 인증

파이어베이스 이용해서 로그인 기능 구현

로그인 유지 구현

로그인 권한을 체크하는 컴포넌트 구현

 

 

2. 새로 알게 된 내용

1) Promise

- 자바스크립트가 비동기처리를 하기 위한 패턴 중 하나로 콜백이 있는데 전통적인 콜백 패턴은 일명 콜백 헬이라고 불리는 중첩 문제가 발생하기 쉽다. 중첩 문제가 발생하면 오류가 발생했을 때도 캐치하기 어렵다.

- 콜백 헬이 발생하는 이유는 비동기 처리 함수 내에 또 다른 비동기 작업이 필요할 경우에 중첩이 생기면서 콜백 헬이 발생한다.

- Promise : 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴.

- Promise 생성 방법

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

- Promise 상태 값 : pending(비동기 처리 수행 전), fullfilled(수행 성공 / resolve가 호출), rejected(수행 실패 / reject가 호출된 상태), settled(성공이나 실패 / resolve나 reject가 호출된 상태)

- Promise 후속 처리 메소드

// 프라미스를 하나 만들어 봅시다!
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: 오류!가 찍힐거예요.
});

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

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

 

- Promise chaining

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 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초 후에 완료!가 콘솔에 찍힐거예요.
}

 

 

2) 토큰 기반 인증

- OAuth2.0 : 외부서비스의 인증 및 권한부여를 관리하는 프레임워크

- 유저가 특정 서비스에 로그인을 하면 특정 서비스에서 해당 유저를 인증해주고 클라이언트가 접근할 수 있는 권한을 준다. 클라이언트는 이 권한을 가지고 권한 서버에 토큰을 요청한다. 클라이언트는 토큰을 받아서 특정 서비스에서 유저 정보를 가져올 수 있다. 특정 서비스는 클라이언트가 보낸 토큰을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에 보내준다.

- JWT(Json Web Token) : 데이터가 JSON 형태로 이루어져 있는 토큰.

- [header].[payload].[signature]의 형식으로 토큰 타입과 암호화 방식 정보 / name: value 쌍으로 토큰에 담을 정보 / secret key를 포함한 header, payload 정보가 암호화 되어 들어가는 서명 정보가 담아져있다.

- 유저가 로그인을 시도하면, 서버가 요청을 확인하고 secret key를 가지고 토큰을 발급한다. 클라이언트에 JWT를 전달하고 클라이언트는 API 요청을 할 때 Authorization 헤더에 JWT를 담아서 보낸다. 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보낸다.

 

3) 웹 저장소

- 클라이언트 저장소 : 개발자도구 → Application 탭 → 좌측 Storage

- 쿠키 : 클라이언트 로컬에 저장되는 key:value 형태의 저장소이다. 약 4KB 정도 저장 가능.

// 쿠키 만들기
// key는 MY_COOKIE, value는 here, 
document.cookie = "MY_COOKIE=here;";

// 쿠키 가져오기
console.log(document.cookie);

// 쿠키 삭제
document.cookie = "MY_COOKIE=here; expires=new Date('2020-12-12').toUTCString()";

- 세션 스토리지 : HTML5에서 추가된 key:value 형태의 저장소. 브라우저를 닫으면 제거됨.

// 세션 값 추가
// key는 MY_SESSION, value는 here인 세션을 만들어요.
sessionStorage.setItem("MY_SESSION", "here");

// 세션 값 가져오기
// key값으로 쉽게 가져올 수 있어요 :) 
sessionStorage.getItem("MY_SESSION");

// 세션 값 삭제하기
// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
sessionStorage.removeItem("MY_SESSION");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
sessionStorage.clear();

- 로컬 스토리지 : HTML5에서 추가된 key:value 형태의 저장소. 따로 지워주지 않으면 계속 브라우저에 남아 있음.

// 로컬 스토리지에 값 추가하기
// key는 MY_LOCAL, value는 here인 데이터를 저장해요.
localStorage.setItem("MY_LOCAL", "here");

// 로컬 스토리지에서 값 가져오기
// key값으로 쉽게 가져올 수 있어요 :) 
localStorage.getItem("MY_LOCAL");

// 로컬 스토리지에서 값 삭제하기
// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
localStorage.removeItem("MY_LOCAL");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
localStorage.clear();

- 보통 토큰은 쿠키에 저장했으나 HTML5가 나온 후로 로컬 스토리지에 저장하는 경우가 많아짐. 그러나 프로젝트 성향에 따라 저장 장소는 달라짐.

 

4) 로그인 유지하기

- 로그인 시, 세션에 로그인 상태를 기록하도록 바꿔준다.

- firebase 인증 키를 export 해준다.

- 세션을 체크해서 로그인 상태를 유지한다.

- 혹은? 파이어베이스를 통해 로그인 한 상태가 맞나 확인한다.

- 맞다면 유저 정보를 가져다가 넣어줘야 한다.

 

 

3. 느낀 점

역시 내용은 좀 많아서 듣기 힘들지만 아주 중요한 내용을 배웠다고 생각한다. 지금 일하고 있는 곳에서도 로그인을 맡아서 하고 있기 때문에 더 도움이 되는 주차였던 것 같다.