"Storybook" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

인증 서비스 기초 강의#

Auth Service Fundamentals#

• 구글과 유튜브의 사례 - 인증이 필요한 이유가 있어야 한다.

• 서비스 제공자 : 회원 확보 → 데이터 분석 → 서비스 방향 설정, 다양한 마케팅 활용

• 사용자 : 서비스 이용 편의성, 개인화 서비스 이용

회원 가입#

• 서비스의 일원이 되기 위한 절차

• 이 과정을 거치지 못한다면 경우에 따라서 해당 서비스에 게시되어 있는 글 자체를못 보게 되는 등 가입자들에 비해 활동의 제약이 발생

로그인#

• 로그인은 접근 허가 증명을 얻기 위해 사용자 인증으로 개인이 컴퓨터 시스템에 접근하는 작업

인증 방법#

Authentication vs Authorization#

• Authorization은 올바르게 인증된 유저에게 자원의 소유자가 허가한 자원에 접근할수 있는 권한을 부여하는 것이다.

OAuth 2.0#

• OAuth 2.0은 다양한 플랫폼 환경에서 권한 부여를 위한 표준 프로토콜

• 제 3의 앱이 자원의 소유자인 서비스 이용자를 대신하여 서비스를 요청할 수 있도록자원 접근 권한을 위임하는 방법

Sample#

필수 정보 - key (사용자에 대한 유니크 값), id , password

• ? 유저 아이디를 key 로 사용했을 때의 문제점

  • id 는 public 하다.

  • id 는 변경될 수 있다. (유저의 key 값이 바뀔 수 있다.)

    • 관계된 데이터에 문제가 발생한다.

• id 는 unique 해야 한다.

  • 대소문자를 허용할 경우 문제가 발생할 수 있다.

• password 는 암호화 되어야 한다.

• • 가입 일자

• key 값으로 숫자를 사용하면 공격의 여지를 줄 수 있다.

• 문자열을 많이 쓰는데, 유추하기 어려워야 한다.

• user_id 는 이메일을 많이 쓰는데, 이메일은 유니크 하다는 점이 보장된다.

  • 이메일이 해당 유저의 소유인지 인증 과정이 필요하다.

• password 는 문자와 숫자, 특수 문자 등을 조합하는 것이 좋다.

• Cookie vs Session

쿠키가 보안에 취약한 이유

많은 경우 쿠키에 token 을 넣는데, 보안 측면에서 그냥 넣는 경우, 조합해서 넣는경우 등이 있다.

• access token 은 시간 단위를 많이 쓰고 ex) 6시간 , refresh token은 몇 일 단위 , ex) 1주 2주 한 달

• 재발급 하지 않고 기존 것을 사용하면, refresh token은 언젠가 만료 되어 사용자에게 불편함을 줄 수 있다.

• 항상 신규로 발급하면, 여러 플랫폼 간에 재발급 된 토큰을 어떻게 동기화 할 것이냐에 대한 고민이 필요하다.

Storybook 글로벌 스타일 설정#

preview.js

import React from 'react';
import {ThemeProvider} from 'styled-components';
import GlobalStyle from 'src/styles/GlobalStyle';import theme from 'src/styles/theme';
export const parameters = {    actions: {argTypesRegex: '^on[A-Z].*'},};
export const decorators = [    (Story) => (        <ThemeProvider theme={theme}>            <GlobalStyle />            <Story />        </ThemeProvider>    ),];

Styled-components#

The Advanced Way to Style with Styled Components

이슈 - styled-components의 craeteGlobalStyle 적용 시 user agent stylesheet가 override 하는 이슈

Validation#

Use RegEx To Test Password Strength In JavaScript

Form Validation

Say Hello to Storybook#

리액트 컴포넌트 트리#

  - Pure Components
  ![2020-12-04-201204-image-0](./images/2020-12-04-201204-image-0.png)


  - Container - Presenter 패턴
  ![2020-12-04-201204-image-1](./images/2020-12-04-201204-image-1.png)




  - Redux
  ![2020-12-04-201204-image-2](./images/2020-12-04-201204-image-2.png)


  - MobX
  ![2020-12-04-201204-image-3](./images/2020-12-04-201204-image-3.png)

뷰가 깊숙히 숨어 있는 경우#

• 깊은 트리, nullable, 라우팅 등으로 인해 하나의 컴포넌트를 수정하기 위해 들여야하는 노력이 너무 크다.

스토리북이 하는 역할#

스토리북은 UI컴포넌트를 위한 간단한 scaffolder이자 UI 테스팅 툴이다.

각종 라우팅과 state들로 연결이 되어있는 React 뷰 컴포넌트들을 nomalize 시켜 isolate 시켜 독립적 환경에서 돌아갈 수 있도록 해주는 UI scaffolding 라이브러리이다.

  ![2020-12-04-201204-image-5](./images/2020-12-04-201204-image-5.png)


  ![2020-12-04-201204-image-6](./images/2020-12-04-201204-image-6.png)


  ![2020-12-04-201204-image-7](./images/2020-12-04-201204-image-7.png)

• 자체 웹팩이 있어서 핫 리로딩 지원

• 디자이너와 개발자, PM을 연결시켜주는 하나의 툴이다.

스토리북은 앱 밖에서 따로 돈다#

addons#

• actions : 이벤트 시 로그를 찍어줌

• links : 스토리에서 다른 스토리로 이동

• knobs : 동적으로 상태 변경

• console : 콘솔 찍어줌

• notes : 다른 사람에게 노트를 보여줄 수 있다.

서드 파티#

• backgrounds

• chapters