라벨이 React인 게시물 표시

[ Architecture, Technology ,Web ] SSO(Single Sign On) 그리고 SAML에 대해

이미지
이번 프로젝트 내부에서 어쩌다보니  유저 인증 관련 업무를 담당하게 되었고, 해야하는 업무는 내부에 사용했던 적이 없던  새로운 개발 플랫폼에서  SSO의 프로토콜 중  SAML을 이용해 앱의 인증을 구현해야만 했다. SSO를 생각해본적 조차 없는 상황에 이를 새로운 개발 플랫폼에 도입해야 했기 때문에 많은 시행착오를 겪었으나 구현에 성공하였으며 덕분에 SSO에 대한 전반적인 지식을 쌓을 수 있었다. 이번에는 그러한 과정에서 나온 지식들과 경험을  공유하고자 한다. SSO에 대한 정의 먼저 사전적 정의 부터 살펴보자. 다만, 기술적인 용어다보니 자주 사용하는 옥스포드 사전에 정의를 찾을 수 없기 때문에  검색으로 찾을 수 있는 정의를 몇 가지 살펴보고 교차 검증을 해보자. 첫 번째 정의를 살펴보자. Single sign-on (SSO) is an identification method that enables users to log in to multiple applications and websites with one set of credentials.  SSO는 웹사이트에서 한 번의 인증(one set of credentials)으로 복수의 어플리케이션에 로그인 할 수 있는 인증(identification) 방법(method) 이다. 두 번째는 위키피디아의 정의이다. Single sign-on (SSO) is an authentication scheme that allows a user to log in with a single ID to any of several related, yet independent, software systems. SSO는 독립적이지만 연관되어있는 몇몇 소프트웨어에 대해 하나의 ID로 로그인을 할 수 있도록 하는 인증 구조(scheme) 세부 설명에 조금 차이가 있어 보이지만 전체적인 틀은 매우 비슷해 보인다.  몇 가지 포인트가 되는 단어를 추출해 이를 연결해보자면 아래와 같은 의미를 산출 할 수 있다. 독립적이지만 연관되어 있

[ React ] React에 대해 : 리렌더링과 memo 메소드

이미지
서론 React는 기본적으로 언제 리렌더링 될까? React에 대해 조금 지식이 있다면 잘 알다시피 아래와 같이 크게 2가지로 나눌 수 있다. 첫 번째, 컴포넌트의 상태(state), 프로퍼티(props) 변경되었을 때 두 번째, 상위 부모 컴포넌트가 변경되었을 때    첫 번째의 경우는 React의 가상 DOM(VDOM)에서 이전 VDOM과 비교해서 변경 된 곳만 실제 DOM에 업데이트 해주기 때문에 이 경우 신경 쓰지 않아도 된다. 하지만, 이 중 두 번째의 경우가 가장 문제일 수 있는데  부모 컴포넌트가 어떤 값이던 간에 바뀐다면 그 하위의 자식 컴포넌트 모두가 리렌더링 대상이 되기 때문이다 즉, 어떤 한 하위 자식 컴포넌트의 값이 변했을 때, 그와 관련 없는 또 다른 자식 컴포넌트 까지 렌더링 대상이 된다는 것 이다. 그렇기 때문에  여기서 우리는 최적화에 대한 문제에 직면하게 된다. 먼저 두 번째에 경우에 대해 이야기하기 전에  React의 이해를 돕기 위해 첫 번째의 경우 부터 이야기를 나누어보자.   첫 번째: 상태와 프로퍼티가 변경되었을 때 본론에 들어가기 앞서 먼저 VDOM에 대해 이야기를 해보자. 사실 React의 매력은 이 VDOM에 있다고 볼 수 있다. 왜냐하면 일반적인 DOM에서 내부 구성 변경되면 UI를 새로 다시 그리기 때문에  기본적으로 애플리케이션의 성능이 그렇게 썩 좋다고 보기는 힘들다.  하지만 이와 다르게 React의 VDOM은  업데이트 된 부분만 수정하기 때문에 일반 DOM을 활용한 시스템보다는  퍼포먼스 측면에서 유리하다고 할 수 있다. 이렇게 실제 DOM과 가상 VDOM을 동기하는 과정을  reconciliation(조정)이라고 하는 것 같지만 실제로는 diffing이라는 단어를 자주 사용하는 것 같다. VDOM [1]  에 대한 내용과 Reconciliation [2]  에 대해서는  공식 도큐먼트에서 확인하기를 바란다. VDOM에 대한 이야기도 조금 했으니  이제 본론으로 넘어가 보자. 여기서 상태(State)와