๐Ÿ™Œ makeToon ์™„์„ฑ๊ธฐ - 1

junukim.devยท2020๋…„ 9์›” 1์ผ
3

makeToon ์™„์„ฑ๊ธฐ

๋ชฉ๋ก ๋ณด๊ธฐ
2/3

maketoon ๋ฉ”์ธ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ ์ „ ์ค€๋น„ ์‚ฌํ•ญ ๐Ÿค”

์˜ค๋žซ๋งŒ์— ํ˜ผ์žํ•˜๋Š” ํ”„๋กœ์ ํŠธ์ด๊ณ  ์—ด์‹ฌํžˆ ํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ ์ฐจ๊ทผ์ฐจ๊ทผ ์‹œ์ž‘ํ•˜๊ธฐ๋กœ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐœ๋ฐœ ์ „์— ๋ฏธ๋ฆฌ ์ค€๋น„ํ•ด์•ผํ•  ์‚ฌํ•ญ์ด ์žˆ์„๊นŒ? ์‹ถ์–ด์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋‚˜์—ดํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

  • โŒ ์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ
  • โŒ ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ
  • โŒ ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…
  • โŒ ์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

๋‚˜์—ดํ•ด๋ณธ ๋ฆฌ์ŠคํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•˜๊ณ , ํ•˜๋‚˜ํ•˜๋‚˜ ๊ผผ๊ผผํžˆ ์ค€๋น„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ ๐Ÿ˜ฌ

๊ตฌ๊ธ€์— ์ง€๋„ ๋ชจ์–‘์˜ svgํŒŒ์ผ์„ ๊ฒ€์ƒ‰ํ•˜๋ฉด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ธ”๋กœ๊ทธ์™€ ํŒŒ์ผ๋“ค์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. ์ด ์ค‘ ์ €์ž‘๊ถŒ ๊ด€๋ฆฌ๊ฐ€ ์‰ฝ๊ณ  ๋‹ค๋ฃจ๊ธฐ์‰ฌ์šธ ๋งŒํ•œ ํŒŒ์ผ์ด ๋ญ๊ฐ€ ์žˆ์„๊นŒ ์ฐพ๋‹ค๊ฐ€ ์œ„ํ‚ค๋ฐฑ๊ณผ์—์„œ ํ•œ๊ตญ ์ง€๋„๋ฅผ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. 2014๋…„์ด ๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ง€๋งŒ ๊ทธ๋ž˜๋„ ์“ธ๋งŒํ•  ๊ฒƒ ๊ฐ™์•„์„œ ํ•ด๋‹น svg๋กœ ๊ณจ๋ž์Šต๋‹ˆ๋‹ค.
์œ„ํ‚ค๋ฐฑ๊ณผ ์ด๋ฏธ์ง€

  • โœ… ์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ
  • โŒ ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ
  • โŒ ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…
  • โŒ ์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ

์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด๋‹ค ํŽธํ•œ UX๋ฅผ ์ œ๊ณตํ•˜๊ธฐ์œ„ํ•ด ๋ณ„๋„์˜ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ•˜์ง€ ์•Š๊ณ  oauth์—ฐ๋™์„ ํ†ตํ•ด ํ•œ๋ฒˆ์˜ ํด๋ฆญ๋งŒ์œผ๋กœ ๋กœ๊ทธ์€์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํŠน๋ณ„ํžˆ oAuth์ค‘ Facebook์„ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํŽ˜์ด์Šค๋ถ ์ด๋ฏธ์ง€

์ด์™€ ๊ฐ™์ด ํŽ˜์ด์Šค๋ถ ๊ฐœ๋ฐœ์ž ์„ผํ„ฐ์—์„œ ์•ฑ์„ ๋“ฑ๋กํ•˜๊ณ  Facebook๋กœ๊ทธ์ธ ์ œํ’ˆ ๊ฒ€์ˆ˜๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์š”์ฆ˜์€ COVID 19 ๋•Œ๋ฌธ์— ์•ฑ ๊ฒ€์ˆ˜๊ฐ€ ํž˜๋“ค๋‹ค๊ณ  ํ•˜๋˜๋ฐ.. ์ž‘๋…„ 12์›”์— ๋ฏธ๋ฆฌ๋ฏธ๋ฆฌ ํ•ด๋†”์„œ ๋‹คํ–‰์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • โœ… ์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ
  • โœ… ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ
  • โŒ ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…
  • โŒ ์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…

์ž์„ธํ•œ ๋‚ด์šฉ์€ CloudFront๋กœ-React์•ฑ-๋ฐฐํฌํ•˜๊ธฐ ํŽธ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ฃผ์„ธ์š”.

๊ฐœ๋ฐœ์— ์•ž์„œ์„œ ๋ฏธ๋ฆฌ ํด๋ผ์ด์–ธํŠธ์˜ ๋ฐฐํฌํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•˜๊ณ  Github Actions๋ฅผ ์ด์šฉํ•œ ํŒŒ์ดํ”„๋ผ์ธ๊นŒ์ง€ ๋งŒ๋“ค์–ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น build.ymlํŒŒ์ผ๊ณผ ๋ชจ๋“  ๊ฐœ๋ฐœ ํŒŒ์ผ์€ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊นƒํ—ˆ๋ธŒ ์•ก์…˜์Šค ์ด๋ฏธ์ง€

  • โœ… ์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ
  • โœ… ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ
  • โœ… ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…
  • โŒ ์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

์ €๋Š” ํ‰์†Œ ๊ฐœ๋ฐœํ•  ๋•Œ assets๋“ค์„ ๋ฐฐํฌ ํŒŒ์ผ์— ํ•จ๊ป˜ ๋„ฃ์–ด์„œ ๋ฐฐํฌํ–ˆ๋Š”๋ฐ ์ €๋ฒˆ์— ํ™ฉ๋‹นํ•œ ๊ฒฝํ—˜์„ ํ•œ ์ดํ›„๋กœ AWS S3์— ์ •์  ํŒŒ์ผ์„ ๋”ฐ๋กœ ์ €์žฅํ•˜๊ณ  URL๋กœ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค.

์ด๋ฏธ์ง€ ํŒŒ์ผ์ด๋ž‘ ๋™์˜์ƒํŒŒ์ผ๋“ค์„ ํ•จ๊ป˜ ๋นŒ๋“œํ•ด์„œ ๋ฐฐํฌํ–ˆ๋”๋‹ˆ ReactAPP์šฉ๋Ÿ‰์ด 8MB๊ฐ€ ๋„˜์—ˆ์—ˆ๋‹ค. ใ…‹ใ…‹.. ์ง€๊ธˆ ์ƒ๊ฐํ•ด๋ณด๋ฉด.. ์™€์šฐ
์‚ฌ์šฉ์ž๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ณ  ๋Œ์•„๊ฐ€๋‹ˆ๊นŒ ์ƒ๊ด€์—†์ง€~ ํ–ˆ๋˜ ๋‚ด๊ฐ€ ์ƒ๊ฐ๋‚œ๋‹ค..
๐Ÿ˜‘ ํ•ด๋‹น React์•ฑ ๋นŒ๋“œ๋Š” ๋‹ค์‹œ ํ–ˆ์—ˆ๋”ฐ.

์ด๋ฏธ์ง€ ์„ค๋ช… ์ฝ”๋“œ ์ด๋ฏธ์ง€

์ด๋ ‡๊ฒŒ importํ•ด์„œ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • โœ… ์ง€๋„ ๋ชจ์–‘์˜ svg ํŒŒ์ผ
  • โœ… ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ oAuth ์—ฐ๊ฒฐ
  • โœ… ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ aws ci/cd ์ž‘์—…
  • โœ… ์ •์  ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ s3 ์—ฐ๊ฒฐ

์ด์Šˆ ๋ฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ๐Ÿคทโ€โ™‚๏ธ

์ง€๋„ SVG๋ฅผ ์ด์šฉํ•˜๋ฉด์„œ ์ •๋ง ๋งŽ์€ ์ด์Šˆ์™€ ๋ฌธ์ œ๋“ค์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

SVG๋งŒ ์ด๋ ‡๊ฒŒ ์ง์ ‘์ ์œผ๋กœ ๋‹ค๋ค„๋ณธ ์ ๋„ ์ฒ˜์Œ์ด์—ˆ๊ณ  React์—์„œ SVG๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ข€ ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๋˜ ์ง€๋„ ๋“œ๋ž˜๊ทธ์™€ ์คŒ ์ธ/์•„์›ƒ, ์ง€์—ญ ๋ณ„ ํด๋ฆญ๋“ฑ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ๋‹ค์–‘ํ•œ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ์ด๋Ÿฌํ•œ ์ด์Šˆ๋“ค๊ณผ ์ด์Šˆ๋ณ„ ํ•ด๊ฒฐ๋ฐฉ์•ˆ์„ ์„ค๋ช…๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

profile
https://junukim.dev <- ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€