글

라벨이 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에 대해 : 서론, 소개 (Class Based Component, Hooks)

-
이미지
비교적 최근에 새로운 프로젝트에 참가하게 되었다. 이 프로젝트는 나의 모회사에서 사용하고 있는  자사 시스템의 리뉴얼로 기존 시스템은 perl로 작성되어 있기 때문에 리뉴얼 하면서 프론트 엔드 쪽과  백 엔드 쪽 모두 바꾸고 하고 싶어했다. 프론트 엔드 쪽은 React였다. 물론 나는 이전 부터 React에 대해  조금씩 공부하고 있었으며 운이 좋게도 프로젝트에 참가할 수 있게 되었다. 그러한 상황에서  나는 React에 대해 제대로 공부할 필요가 있었고 또한 이를 정리해볼 필요가 있었다. 따라서 이를 정리하면서 React에서  깊은 인상을 받은 부분을 소개하면서 공유해보려고 한다. 서론 아마 대부분의 개발자가 느끼고 있듯이(적어도 내가) React와 같은 자바스크립트 라이브러리가 등장하기 전까지만 해도 기존 프론트 엔드의 프로그래밍은 방식은 너무나도 지저분해 보였다. 왜냐하면, 기존 프로그래밍 형식과 다르게  HTML 태그에 덕지덕지 붙여 있는 JavaSciprt는 가독성이 떨어지고 이는 생산성에 영향을 주기 때문이다. 이러한 상황 속에서 ReactJS와 같은 자바스크립트 라이브러리가 등장 했는데, React외에도 구글의 AngluarJS, Vue.JS등이 있다. Ruby가 모든 것을 객체화하려 했다면 이런 자바스크립트 라이브러리 중에서  React는 모든 것을 컴포넌트화 한듯 보였다. 모든 항목에 대해 컴포넌트화 할 수 있으며, 이는 마치 객체지향 패러다임의 캡슐화 한 것과 유사하다. 이러한 자바스크립트 라이브러리들 가운데  React에서는 두 가지 방식으로 프로그래밍하기를 권장하는듯 보였다. 첫 번째, Class Based Component를 이용한 컴포넌트화 그리고 두 번째, Hooks를 이용한 컴포넌트화 이다. Component Class를 이용한 컴포넌트화는 React팀에서 제안하는 방식이고, Hooks는 나중에 확장된 방식이다. 먼저 Class Based Component 부터 살펴보자. 소개: Class Based Component를 이용한 컴포
자세한 내용 보기

[ React, JavaScript ] 함수형 컴포넌트 정의에 대해: function 정의, const 정의(Arrow Function)

-
이미지
서론 React에서 컴포넌트를 새로 작성한다고 가정해보자. 이 때 가장 먼저해야 하는 것은  어떤 형식으로든 메인 함수를 정의하는 것 부터 시작할 것 이며 이와 동시에 하단에 이를 export 할 때,  디폴트로 설정한다는 코드를 작성하게 될 것이다. 아래와 같이 말이다. function NewComponet (){   return < div > null </ div > ; } export default NewComponet ; 나는 React를 배울 때,  위와 같은 방식으로 배웠기 때문에 항상 위와 같은 방식을 선호 했다. 하지만, 개발자라면 모두 느끼고 있듯이 코딩 스타일이라는 것이 일부 다를 수 있다는 것을 가장 잘 알 것이다. 가장 대표적으로 중괄호를 어떻게 쓰느냐를 예를 들 수 있다. function NewComponet () {   return < div > null </ div > ; } export default NewComponet ; 중괄호 스타일 1 function NewComponet (){   return < div > null </ div > ; } export default NewComponet ; 중괄호 스타일 2 재미있게도 나는 실무를 하면서 이런 선언 방식이  사람에 따라 두 가지 방식으로 정의하는 것을 발견했다. 정의 방법은 아래와 같다. 첫 번째, function 정의  두 번째, const 정의 무엇이 다를까 매우 흥미롭다. 이번에는 이 두 가지 정의 방법에 대해 알아보고 이에 대한 차이점에 대해  그리고 이런 정의 방법에 따라 퍼포먼스 문제를  야기 할 수 있는지에 대해 이야기를 나누어 보자. 함수형 컴포넌트 정의에 대해 : 정의 예 먼저 이 두 가지 방법을 한눈에 보기 위해  두 가지 정의 코드를 먼저 살펴보자. function NewComponet (){   return < div > null </ div >
자세한 내용 보기