Frontend ๊ฐœ๋ฐœ์ž - hyo.loui

Project : ํŒฌPicK - S.A (๊ธฐํš) ๋ณธ๋ฌธ

Project

Project : ํŒฌPicK - S.A (๊ธฐํš)

hyo.loui 2022. 11. 18. 17:39

S.A (Starting Assignments) 

 

๐Ÿ’พ Project : ํŒฌPicK

  • ์ œ๋ชฉ โœ”
  • ์™€์ด์–ดํ”„๋ ˆ์ž„ โœ”
  • ๊ธฐ๋Šฅ ๋ถ„๋ฅ˜ โœ”

 

๐Ÿ“ ์ฒซ ๋ฒˆ์งธ ํšŒ์˜ ๋‚ด์šฉ

 

ํ”„๋กœ์ ํŠธ ์„œ๋น„์Šค ํ‚ค์›Œ๋“œ :

์Šคํ„ฐ๋””(์ฑ„ํŒ…)
์ƒˆ์ƒํ’ˆ(๊ฑฐ๋ž˜)
์‚ฌ์ด๋“œํ”„๋กœ์ ํŠธ(๋งค์นญ)
๋ฐ˜๋ ค๋™๋ฌผ(์ปค๋ฎค๋‹ˆํ‹ฐ)
์ฑŒ๋ฆฐ์ €์Šค(๋งค์นญ)
๐ŸšฉํŒฌ(์ปค๋ฎค๋‹ˆํ‹ฐ)

* ํˆฌํ‘œํ•˜์—ฌ ์„ ์ •

 

์ œ๋ชฉ

ํ”„๋กœ์ ํŠธ ๋„ค์ž„ :

ํ™๋ณดํŒฌ ํŒฌ๊ฒฐ๊ณ ๋ฆฌ
๐ŸšฉํŒฌPick - fix

* ํˆฌํ‘œํ•˜์—ฌ ์„ ์ •

logo image

 

 

๐Ÿ’ก ์ฐธ์กฐ ๋ ˆํผ๋Ÿฐ์Šค

 

#ํŒฌํ”ฝ : ์Šคํƒ€์™€ ํŒฌ์ด ํ•จ๊ป˜ํ•˜๋Š” ๊ณต๊ฐ„

 

#ํŒฌํ”ฝ : ์Šคํƒ€์™€ ํŒฌ์ด ํ•จ๊ป˜ํ•˜๋Š” ๊ณต๊ฐ„

 

shopfanpick.com

Disquiet*

 

Disquiet*

IT ์„œ๋น„์Šค ๋ฉ”์ด์ปค๋“ค์˜ ์†Œ์…œ ๋„คํŠธ์›Œํฌ. ๋””์Šค์ฝฐ์ด์—‡์—์„œ ์„œ๋กœ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณต์œ ํ•ด ๋ณด์„ธ์š”!

disquiet.io

velog

 

velog

๋””์ž์ธ ์ €์ž‘๊ถŒ ๋ฌธ์ œ๋กœ ๋””์ž์ธ์€ ์˜ฌ๋ฆด ์ˆ˜ ์—†์ง€๋งŒ ๋‚ด๊ฐ€ ๋ณด๊ธฐ ์œ„ํ•ด ์ •๋ฆฌํ•˜๊ธฐ... ๋•Œ๋ฌธ์— ๋””์ž์ธ ๋‹ค ๋นผ๊ณ  ๋‚ ๊ฒƒ์œผ๋กœ ์„ค๋ช…ํ•ด๋ณธ๋‹ค... ์›๋ž˜๋Š” ์˜ˆ๋ปค์–ด์š”... ๊ธฐ๋Šฅ ๊ตฌํ˜„ ๋ฐฉhrs, min, sec์— ๊ฐ๊ฐ ์‹œ, ๋ถ„, ์ดˆ๋ฅผ ์ž…๋ ฅ

velog.io

 

์™€์ด์–ด ํ”„๋ ˆ์ž„

https://xd.adobe.com/view/400da440-ac14-4f56-9d0c-c401c6708c34-155e/

 

ํ”Œ๋กœ์šฐ 1

15 Screens, Last modified on Nov 18, 2022 08:48 GMT

xd.adobe.com

 

๊ธฐ๋Šฅ ๋ถ„๋ฅ˜

  • ํ”„๋กœ์ ํŠธ ํ•„์ˆ˜ ๊ธฐ๋Šฅ 
    • ๋กœ๊ทธ์ธ, ํšŒ์› ๊ฐ€์ž…
      • Authentication ์—์„œ ์ œ๊ณตํ•˜๋Š” api๋ฅผ ์ด์šฉํ•˜์—ฌ ์•„๋ž˜ ํšŒ์› ๊ฐ€์ž…, ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”.
        • ์•„์ด๋””(์ด๋ฉ”์ผ), ํŒจ์Šค์›Œ๋“œ ๋กœ๊ทธ์ธ ๋ฐ ํšŒ์›๊ฐ€์ž…
        • ์†Œ์…œ ๋กœ๊ทธ์ธ (๊ตฌ๊ธ€, ๊นƒํ—™)
    • CRUD
      • Firestore ์—์„œ ์ œ๊ณตํ•˜๋Š” api๋ฅผ ์ด์šฉํ•˜์—ฌ CRUD ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ํ•ธ๋“ค๋ง์„ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”.
      • CUD(๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ)๊ฐ€ ์ผ์–ด๋‚  ๋•Œ ๋งˆ๋‹ค R(์กฐํšŒ)ํ•ด์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ™”๋ฉด ๋ณ€๊ฒฝ์„ ํ•ด๋ณด์„ธ์š”.
    • ๋งˆ์ด ํŽ˜์ด์ง€
      • ๋‚ด ๊ฒŒ์‹œ๋ฌผ ๋ณด๊ธฐ
        • Authentication ์—์„œ ์ œ๊ณตํ•˜๋Š” uid ๋ฅผ ์ด์šฉํ•ด์„œ ๋‚ด ๊ฒŒ์‹œ๋ฌผ์„ ๋ชจ์•„์„œ ์กฐํšŒํ•ด ๋ณด์„ธ์š”.
      • ํ”„๋กœํ•„ ์ˆ˜์ • ๊ธฐ๋Šฅ
        • Cloud Storage ์—์„œ ์ œ๊ณตํ•˜๋Š” api๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ์™€ ๋‹ค์šด๋กœ๋“œ url ์„ ๋ฐ›์•„์„œ ์ด๋ฏธ์ง€ ํ•ธ๋“ค๋ง์„ ํ•ด๋ณด์„ธ์š”.
    • ๋ฐฐํฌํ•˜๊ธฐ
      • S3๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐฐํฌํ•˜์‹ค ๋•Œ๋Š”, ์™„์„ฑ ํ›„์— ๋ฐฐํฌํ•˜์ง€ ์•Š์œผ์…”๋„ ๋ฉ๋‹ˆ๋‹ค! ์—ฌ์œ ๊ฐ€ ์žˆ์„ ๋•Œ ๋ฏธ๋ฆฌ ๋ฐฐํฌํ•ด๋‘๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ๋ฐ˜์˜์‹œํ‚ค๋ฉด ํ”„๋กœ์ ํŠธ ๋งˆ๊ฐ ์‹œ์— ์กฐ๊ธ‰ํ•˜๊ฒŒ ๋ฐฐํฌํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.
      • ๊ฐ€๋น„์•„์—์„œ ์ €๋ ดํ•œ ๋„๋ฉ”์ธ(500์›)์„ ๊ตฌ๋งคํ•˜์‹  ํ›„ AWS Route 53(DNS ์„œ๋ฒ„)๊ณผ ๊ฐ€๋น„์•„(๋„ค์ž„ ์„œ๋ฒ„) ์„ค์ •์„ ํ†ตํ•ด ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ์„ ํ•ด๋ณด์„ธ์š”.
    • Git์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด๊ธฐ!

  • ํ”„๋กœ์ ํŠธ ์„ ํƒ ๊ธฐ๋Šฅ (์šฐ์„ ์ˆœ์œ„)

    1. ์ฆ๊ฒจ์ฐพ๊ธฐ ์ •๋ ฌ
      โ—พ ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„ ์ฆ๊ฒจ์ฐพ๊ธฐ - ์นด์šดํŠธ ๊ธฐ๋Šฅ
      โ—พ Hot ์…€๋Ÿฝ ์นดํ…Œ๊ณ ๋ฆฌ์— ์ฆ๊ฒจ์ฐพ๊ธฐ ์นด์šดํŠธ ์ˆœ์„œ๋กœ ์ •๋ ฌ

    2. ๊ฒŒ์‹œ๊ธ€ ์ •๋ ฌ
      โ—พ ์ตœ์‹  ์ˆœ ์ •๋ ฌ (Default)
      โ—พ ์ข‹์•„์š” ์ˆœ ์ •๋ ฌ

    3. ๋Œ“๊ธ€
      โ—พ ๊ธ€๋งˆ๋‹ค ๋Œ“๊ธ€์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ์ถ”๊ฐ€ (์ข‹์•„์š”?)
      โ—พ ๋Œ“๊ธ€ ์ˆ˜์ • ๋ฐ ์‚ญ์ œ

    4. ๊ฒ€์ƒ‰
      โ—พ ๊ฒ€์ƒ‰ ์ฐฝ ์ƒ์„ฑํ•˜์—ฌ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ตฌํ˜„ (์นดํ…Œ๊ณ ๋ฆฌ, ๊ธ€)

    5. ์ข‹์•„์š”
      โ—พ ๊ฒŒ์‹œ ๊ธ€ ๋งˆ๋‹ค ์ข‹์•„์š” ๊ธฐ๋Šฅ ์ถ”๊ฐ€
      โ—พ ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ๋ณ€ํ•˜์—ฌ ์ข‹์•„์š” ํ™œ์„ฑ ์ƒํƒœ ์ œ๊ณต