๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

"Styled-components" ํƒœ๊ทธ๋กœ ์—ฐ๊ฒฐ๋œ 1๊ฐœ ๊ฒŒ์‹œ๋ฌผ๊ฐœ์˜ ๊ฒŒ์‹œ๋ฌผ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ํƒœ๊ทธ ๋ณด๊ธฐ

ยท ์•ฝ 5๋ถ„

์ธ์ฆ ์„œ๋น„์Šค ๊ธฐ์ดˆ ๊ฐ•์˜#

Auth Service Fundamentals#

  • ๊ตฌ๊ธ€๊ณผ ์œ ํŠœ๋ธŒ์˜ ์‚ฌ๋ก€ - ์ธ์ฆ์ด ํ•„์š”ํ•œ ์ด์œ ๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

2020-12-16-201216-image-0

  • ์„œ๋น„์Šค ์ œ๊ณต์ž : ํšŒ์› ํ™•๋ณด โ†’ ๋ฐ์ดํ„ฐ ๋ถ„์„ โ†’ ์„œ๋น„์Šค ๋ฐฉํ–ฅ ์„ค์ •, ๋‹ค์–‘ํ•œ ๋งˆ์ผ€ํŒ… ํ™œ์šฉ

  • ์‚ฌ์šฉ์ž : ์„œ๋น„์Šค ์ด์šฉ ํŽธ์˜์„ฑ, ๊ฐœ์ธํ™” ์„œ๋น„์Šค ์ด์šฉ

ํšŒ์› ๊ฐ€์ž…#

  • ์„œ๋น„์Šค์˜ ์ผ์›์ด ๋˜๊ธฐ ์œ„ํ•œ ์ ˆ์ฐจ

  • ์ด ๊ณผ์ •์„ ๊ฑฐ์น˜์ง€ ๋ชปํ•œ๋‹ค๋ฉด ๊ฒฝ์šฐ์— ๋”ฐ๋ผ์„œ ํ•ด๋‹น ์„œ๋น„์Šค์— ๊ฒŒ์‹œ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž์ฒด๋ฅผ๋ชป ๋ณด๊ฒŒ ๋˜๋Š” ๋“ฑ ๊ฐ€์ž…์ž๋“ค์— ๋น„ํ•ด ํ™œ๋™์˜ ์ œ์•ฝ์ด ๋ฐœ์ƒ

๋กœ๊ทธ์ธ#

  • ๋กœ๊ทธ์ธ์€ ์ ‘๊ทผ ํ—ˆ๊ฐ€ ์ฆ๋ช…์„ ์–ป๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ์ž ์ธ์ฆ์œผ๋กœ ๊ฐœ์ธ์ด ์ปดํ“จํ„ฐ ์‹œ์Šคํ…œ์— ์ ‘๊ทผํ•˜๋Š” ์ž‘์—…

์ธ์ฆ ๋ฐฉ๋ฒ•#

2020-12-16-201216-image-1

Authentication vs Authorization#

2020-12-16-201216-image-2

  • Authorization์€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ธ์ฆ๋œ ์œ ์ €์—๊ฒŒ ์ž์›์˜ ์†Œ์œ ์ž๊ฐ€ ํ—ˆ๊ฐ€ํ•œ ์ž์›์— ์ ‘๊ทผํ• ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

OAuth 2.0#

  • OAuth 2.0์€ ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ ํ™˜๊ฒฝ์—์„œ ๊ถŒํ•œ ๋ถ€์—ฌ๋ฅผ ์œ„ํ•œ ํ‘œ์ค€ ํ”„๋กœํ† ์ฝœ

  • ์ œ 3์˜ ์•ฑ์ด ์ž์›์˜ ์†Œ์œ ์ž์ธ ์„œ๋น„์Šค ์ด์šฉ์ž๋ฅผ ๋Œ€์‹ ํ•˜์—ฌ ์„œ๋น„์Šค๋ฅผ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋„๋ก์ž์› ์ ‘๊ทผ ๊ถŒํ•œ์„ ์œ„์ž„ํ•˜๋Š” ๋ฐฉ๋ฒ•

2020-12-16-201216-image-3

2020-12-16-201216-image-4

Sample#

ํ•„์ˆ˜ ์ •๋ณด - key (์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ์œ ๋‹ˆํฌ ๊ฐ’), id , password

  • ? ์œ ์ € ์•„์ด๋””๋ฅผ key ๋กœ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์˜ ๋ฌธ์ œ์ 

    • id ๋Š” public ํ•˜๋‹ค.

    • id ๋Š” ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค. (์œ ์ €์˜ key ๊ฐ’์ด ๋ฐ”๋€” ์ˆ˜ ์žˆ๋‹ค.)

      • ๊ด€๊ณ„๋œ ๋ฐ์ดํ„ฐ์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
  • id ๋Š” unique ํ•ด์•ผ ํ•œ๋‹ค.

    • ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ํ—ˆ์šฉํ•  ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.
  • password ๋Š” ์•”ํ˜ธํ™” ๋˜์–ด์•ผ ํ•œ๋‹ค.

2020-12-16-201216-image-5

    • ๊ฐ€์ž… ์ผ์ž
  • key ๊ฐ’์œผ๋กœ ์ˆซ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ณต๊ฒฉ์˜ ์—ฌ์ง€๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

  • ๋ฌธ์ž์—ด์„ ๋งŽ์ด ์“ฐ๋Š”๋ฐ, ์œ ์ถ”ํ•˜๊ธฐ ์–ด๋ ค์›Œ์•ผ ํ•œ๋‹ค.

  • user_id ๋Š” ์ด๋ฉ”์ผ์„ ๋งŽ์ด ์“ฐ๋Š”๋ฐ, ์ด๋ฉ”์ผ์€ ์œ ๋‹ˆํฌ ํ•˜๋‹ค๋Š” ์ ์ด ๋ณด์žฅ๋œ๋‹ค.

    • ์ด๋ฉ”์ผ์ด ํ•ด๋‹น ์œ ์ €์˜ ์†Œ์œ ์ธ์ง€ ์ธ์ฆ ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค.
  • password ๋Š” ๋ฌธ์ž์™€ ์ˆซ์ž, ํŠน์ˆ˜ ๋ฌธ์ž ๋“ฑ์„ ์กฐํ•ฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

2020-12-16-201216-image-6

2020-12-16-201216-image-7

2020-12-16-201216-image-8

  • Cookie vs Session

์ฟ ํ‚ค๊ฐ€ ๋ณด์•ˆ์— ์ทจ์•ฝํ•œ ์ด์œ 

2020-12-16-201216-image-9

2020-12-16-201216-image-10

๋งŽ์€ ๊ฒฝ์šฐ ์ฟ ํ‚ค์— token ์„ ๋„ฃ๋Š”๋ฐ, ๋ณด์•ˆ ์ธก๋ฉด์—์„œ ๊ทธ๋ƒฅ ๋„ฃ๋Š” ๊ฒฝ์šฐ, ์กฐํ•ฉํ•ด์„œ ๋„ฃ๋Š”๊ฒฝ์šฐ ๋“ฑ์ด ์žˆ๋‹ค.

2020-12-16-201216-image-11

  • access token ์€ ์‹œ๊ฐ„ ๋‹จ์œ„๋ฅผ ๋งŽ์ด ์“ฐ๊ณ  ex) 6์‹œ๊ฐ„ , refresh token์€ ๋ช‡ ์ผ ๋‹จ์œ„ , ex) 1์ฃผ 2์ฃผ ํ•œ ๋‹ฌ

2020-12-16-201216-image-12

  • ์žฌ๋ฐœ๊ธ‰ ํ•˜์ง€ ์•Š๊ณ  ๊ธฐ์กด ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋ฉด, 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 ํ•˜๋Š” ์ด์Šˆ

2020-12-16-201216-image-13


Validation#

Use RegEx To Test Password Strength In JavaScript

Form Validation