개발일지/TIL

[TIL] 2109010 오늘 공부는 null 병합 연산자, OAuth 2.0

햄❤️ 2021. 9. 11. 13:46
728x90

null 병합 연산자 (nullish coalescing operator) 

 

??

 

물음표 두개짜리 코드를 봤다.  널 병합 연산자라고 한다.

a ?? b 는 a가 null도 아니고 undefined도 아니면 a , 그 외의 경우는 b 인 것

즉 ?? 없이 표현하면 아래와 같다. 

a !== null && a !== undefined ? a : b; 

 

좋은 예시를 가져왔다. 

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); 
// 바이올렛

 

firstName이 null이기 때문에 lastName값이 되고, lastName도 null이기 때문에 nickName이 된다. nickName이 null과 undefined가 아닌 "바이올렛"이라는 값이 있기 때문에 "바이올렛"이 알럿으로 잘 떴다. 만약 nickName까지 null이었다면, 아마 "익명의 사용자"가 떴을 것이다. 

그런데, 

?? 를 || (OR) 연산자로 바꿔도 값이 똑같이 나온다. 

 

 

두개의 차이점은 이렇다고 한다.

||는 첫번째 truthy 값을 반환하고, ?? 는 첫번째 정의된(defined)된 값을 반환한다고 한다.  흠.. 

좋은 예시를 가져왔다.....ㅎ

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

 

height || 100 에서는 height를 falsy한 값으로 취급했다(0이라서) 그래서 null, undefined랑 동일하게 처리한다고 한다. 그래서 100이 나와부러.... 

반면에 height값이 null이나 undefined가 아니기 때문에 height 가 반환되고, height는 0이기 땜시 0이 출력되는 것이라구 한다.

결론은 0 이 할당될 수 있는 변수에서는 ??가 더 적당하다고 한다. 

 

* || 연산자에 대해 알아보면

왼쪽 피연산자부터 오른쪽으로 나아가며 값을 평가하는데, 각 피연산자를 불리언형으로 변환한다. 그 값이 true면 연산을 멈추고 해당 피연산자의 불리언 변환 전 값을 반환한다. 모든 피연산자를 평가했는데 다 false라면 마지막 값인 value3가 반환된다. 

result = value1 || value2 || value3;

 

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

 


 

OAuth 2.0 

 

자세히 공부한 건 아니고, 버그를 잡느라 회사 로그인 코드 쪽을 다 까봤는데, 소셜 로그인을 뒤지면서 최근의 소셜 로그인들이 OAuth 2.0 방식으로 진행된다는 것을 배웠다.

 

OAuth란 타사의 사이트데 대한 접근 권한을 얻고, 그 권한을 이용하여 개발할 수 있도록 도와주는 프레임워크라고 한다.  즉 구글이나 카카오 같은 곳에서 액세스 토큰을 받고, 그 토큰을 기반으로 원하는 기능을 구현한다.

액세스 토큰? 로그인을 하지 않고 인증을 할 수 있도록 해주는 토큰이다.

 

OAuth는 액세스 토큰을 발급하기 위한 일련의 과정을 인터페이스로 정의해둔 것이다. 즉 구글이나 카카오의 아이디로 제 3의 서비스(즉 우리회사 서비스!!!)에 로그인해서 등록 되어있는 정보나 기능에 접근할 수 있는 권한을 제어하기 위한 표준 프로토콜이라고 한다!!! 

 

취약점도 있고, 뭐 하기위해 ClientId를 발급받고 등등의 것들이 많지만 내가 공부한 것은, 그래서 이게 우리 서비스에서 어떻게 동작하는데?!? 

 

유저가 카카오로 로그인하기를 누른다. 사용자 인증 및 접근 권한을 받는다 (보통 동의하고 계속하기 탭) 이 되면 카카오에서 우리 회사로 response를 주는데 액세스 토큰, 리프레쉬 토큰, 만료일자 등의 정보를 준다. 

우리는 액세스 토큰을 받아서 서버로 전달해준다. 서버는 액세스토큰을 받아서 처리하고(무슨 처리일지는 모르겠다ㅠ) 돌려준다. 액세스 토큰은 탈취 방지를 위해 유효기간이 짧다. 

클라는 유저가 토큰이 필요한 api처리를 할때마다 헤더에 토큰을 담아준다. 만약 토큰이 만료되었다면 리프레쉬 토큰을 가져와서 보내준다. 리프레쉬 토큰은 다시 인증 절차를 거치지 않고 액세스 토큰의 갱신을 돕는다.  보통 카카오의 경우 액세스 토큰의 유효기간은 2시간, 리프레쉬토큰은 2달정도로 유효기간의 차이가 난다.

리프레쉬 토큰도 만료일자가 다가오면 갱신처리한다.

 

구글,카카오, 네이버가 사용하는 OAuth 방식이라고 한다. 시간이 될 때 장단점, 취약점 등을 공부해보고 싶다. 또 카카오가 준 액세스 토큰을 우리 서버에서는 어떻게 처리하는지도 궁금하다 

728x90