์นดํ…Œ๊ณ ๋ฆฌ

/icons/book_blue.svg
Shop on Amazon
/icons/book_blue.svg
Shop on Kobo
notion image

๐ŸŽจย Reference

ย 

๐Ÿ“Œย Summary

ํ”„๋กœ์ ํŠธ <๋‚ด์ž”๊ณ ๋ฅผ ๋ถ€ํƒํ•ด>๋Š” ํ˜„๋ช…ํ•˜๊ณ  ์•Œ๋œฐํ•œ ์†Œ๋น„๋ฅผ ์œ„ํ•ด ์ง‘ ๋˜๋Š” ์ง์žฅ ๋“ฑ ์ž์‹ ์ด ์„ค์ •ํ•œ ์œ„์น˜์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ๊ทผ์ฒ˜ ์œ ์ €๋“ค๊ณผ ์„œ๋กœ ํ•„์š”ํ•œ ๋ฌผ๊ฑด๋“ค์„ ๊ฑฐ๋ž˜ํ•˜๊ฑฐ๋‚˜ ๊ณต๋™๊ตฌ๋งค๋ฅผ ๋น ๋ฅด๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฌผํ’ˆ ๋“ฑ๋ก, ๊ฑฐ๋ž˜ ๋งค์นญ, ์ฑ„ํŒ… ๋“ฑ์„ ๊ตฌํ˜„ํ•œ ์œ ์ € ๊ฐ„ ๋ฌผํ’ˆ ๊ฑฐ๋ž˜ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.

๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆย Team

์ด 3๋ช…
  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž 1๋ช…
  • ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž 2๋ช…

๐Ÿ–๐Ÿปย Part

  • ์„œ๋น„์Šค ๊ธฐํš ์ฐธ์—ฌ
    • PWA ์ง€์‹์„ ๊ณต์œ ํ•˜๊ณ  ์ง„ํ–‰์„ ์ฃผ๋„ ๋ฐ ์ ์šฉ
    • UI/UX์— ๊ด€๋ จํ•˜์—ฌ ์ •์ ์ธ ํ™”๋ฉด์—์„œ ์‹œ์„ ์„ ๋Œ ์ธํ„ฐ๋ ‰์…˜ ๋“ฑ ์ ๊ทน์ ์ธ ์•„์ด๋””์–ด ์ œ์‹œ ๋ฐ ๋ฐ˜์˜
  • ์„œ๋น„์Šค ๋””์ž์ธ ์ œ์ž‘
    • ํ”ผ๊ทธ๋งˆ๋ฅผ ํ™œ์šฉํ•œ UI ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘ ๋ฐ ๊ณต์œ 
    • ํฌํ† ์ƒต์„ ํ™œ์šฉํ•œ ๋กœ๊ณ  ์ œ์ž‘ ๋ฐ ๊ณต์œ 
  • ์•ฑ ์„œ๋น„์Šค ์ „์ฒด ๊ฐœ๋ฐœ
    • ์ „์ฒด ๋ผ์šฐํ„ฐ ๊ตฌ์กฐ ๋ฐ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ
    • ํŽ˜์ด์ง€ ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœ
ย 

๐Ÿ› ๏ธย Skill Stack

notion image
ย 
  • Tailwind CSS ์„ ์ • ์ด์œ 
    • ๊ธฐํš์ž ๋˜๋Š” ๋””์ž์ด๋„ˆ๊ฐ€ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์ด ์ž์ฃผ ๋ฐ”๋€” ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ
    • ์ƒ์‚ฐ์„ฑ ์žˆ๊ฒŒ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค๊ณ  ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ณ ๋ ค
    • BootStrap๊ณผ Tailwind CSS ์ค‘์—์„œ ์•ˆ ์จ๋ดค๋˜ Tailwind CSS๋ฅผ ๊ณต๋ถ€ ๋ชฉ์ ์œผ๋กœ ์„ ํƒ
    • ๊ณต์‹ ์‚ฌ์ดํŠธ์—์„œ ์•ฑ ์„œ๋น„์Šค ํ•๊ณผ ๋งž๋Š” UI๋ฅผ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋งŽ์ด ์ง€์›ํ•ด์ฃผ๋Š” ๋ถ€๋ถ„์—์„œ๋„ Tailwind CSS๋ฅผ ์„ ํƒ
ย 
  • AWS CloudFront ์„ ์ • ์ด์œ 
    • AWS๊ฐ€ ์ฃผ๋Š” ์ด์ ์ด ๋งŽ์•„ ์ ๊ทน์ ์œผ๋กœ ์ž˜ ํ™œ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์Œ
    • ๊ณต๋ถ€ ๋ชฉ์ ์œผ๋กœ S3, CodeBuild, CodePipeline, CloudFront๋ฅผ ์„ ํƒํ•˜์—ฌ ํ”„๋ก ํŠธ์—”๋“œ ์ž๋™ํ™” ๋ฐฐํฌ ๊ตฌ์ถ•
ย 

โš ๏ธย Issue & Trouble-shooting

๐ŸŒย Common Issue

๐Ÿ™‹โ€โ™‚๏ธย [๊ธฐํš] ์›น์•ฑ ๋„์ž… with PWA
๐Ÿ’ซ [์•„ํ•˜!] ์นด์นด์˜ค ๋กœ๊ทธ์ธ Oauth2 ํ”„๋กœํ† ์ฝœ ๋™์ž‘ ๋ฐฉ์‹
  • ์นด์นด์˜ค ๋กœ๊ทธ์ธ์„ ์œ„ํ•œ Oauth2 ํ”„๋กœํ† ์ฝœ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ฒ˜์Œ์—๋Š” ์ดํ•ดํ•˜๋Š” ๋ฐ ์–ด๋ ค์›€์„ ๊ฒช์Œ
    • ๋ฐฑ์—”๋“œ์™€์˜ ์†Œํ†ต์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ํŒ๋‹จํ•˜์˜€๊ณ , ์„œ๋กœ ๋” ๋‚˜์€ ์ดํ•ด๋ฅผ ๋•๊ธฐ ์œ„ํ•ด ์‹œํ€€์Šค ๋‹ค์ด์–ด๊ทธ๋žจ์œผ๋กœ ๊ณต์œ ํ•˜๋ฉด์„œ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์ดํ•ดํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋˜ ๊ฒฝํ—˜์ด ์žˆ์Œ
    • ์นด์นด์˜ค ๋กœ๊ทธ์ธ ์‹œ๋‚˜๋ฆฌ์˜ค (๋งํฌ)
๐Ÿ’ซย [์•„ํ•˜!] ๋ ˆ์ด์•„์›ƒ ๊ณต์œ 
  • ์‹ค์ œ๋กœ ๊ฐœ๋ฐœํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๊ณต์œ ํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ๋ฏธ์ˆ™ํ•œ ์ ์„ ๋ฐœ๊ฒฌ
    • ์„œ๋น„์Šค ๊ธฐ๋Šฅ์„ ์„œ๋กœ ๋‹ค๋ฅธ ์‹œ๊ฐ์—์„œ ๋ฐ”๋ผ๋ณด๊ณ  ์žˆ๋‹ค๋Š” ๋ฌธ์ œ์  ์ธ์ง€
      • ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„ ์ค‘๊ฐ„๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐ„์— ๊ฐœ๋ฐœํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์ž์ฃผ ๊ณต์œ ํ•ด์•ผ ํ•จ์„ ๊นจ๋‹ฌ์•˜๊ณ , ์ดํ›„๋กœ๋Š” ํ™”๋ฉด์„ ์ฃผ๊ณ ๋ฐ›๋Š” ์Šต๊ด€์„ ๋“ค์ด๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅ ํ•˜์˜€์Œ
๐Ÿ’กย [ASIS] ๋กœ์ปฌํ˜ธ์ŠคํŠธ http to https ๋งคํ•‘ํ•˜๊ธฐ

๐Ÿšจย FrontEnd Issue

๐Ÿ’กย [ASIS] ๋กœ๊ทธ์ธ ์ด์Šˆ
๐Ÿ’กย [ASIS] ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹  SSE ์•Œ๋ฆผ ์ œ์–ด
๐Ÿ’กย [ASIS] Yarn to Yarn Berry ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
๐Ÿ’กย [ASIS] PWA with ํ•˜์ด๋ธŒ๋ฆฌ๋“œ์•ฑ ์‚ฌ์šฉ๊ธฐ
๐Ÿ”จย [TOBE] ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค ์ž‘์„ฑ
โ—๏ธย [TOBE] ์–‘๋ฐฉํ–ฅ ํ†ต์‹  ์—ฐ๊ฒฐ์ค‘์— ์บ์‹ฑ ๋ฌดํšจํ™”๊ฐ€ ์•ˆ๋˜๋Š” ์ด์Šˆ

๐ŸŽฒย Cloud Issue

๐Ÿ’กย [ASIS] AWS ๋นŒ๋“œ ์‹œ CloudFront ์บ์‹ฑ ์ด์Šˆ
๐Ÿ’กย [ASIS] AWS ๋นŒ๋“œ ์‹œ ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์ฝ๋Š” ์‹œ์  ๋ณ€๊ฒฝ๊ธฐ
ย