2021 09 15 - Hi-Fi-Club/common GitHub Wiki

2021-09-15 ํšŒ์˜

ํšŒ์˜ ์•ˆ๊ฑด

  • โ€œ๊ฐœ์ธ์ •๋ณด ๊ด€์‹ฌ์‚ฌ & ์ง€์—ญโ€ ํŽ˜์ด์ง€์˜ url path ์„ค์ •์— ๋Œ€ํ•ด ์˜๋…ผํ•  ํ•„์š”๊ฐ€ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ( ๋ฐฑ์—”๋“œ )
  • ๋ฐ˜์‘ํ˜• ์›น์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด ์–ด๋–จ๊นŒํ•ฉ๋‹ˆ๋‹ค. (ํŠน์ • ๋ ˆํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋งŒ๋“ค ์˜ˆ์ •)
  • ๊ฐœ๋ฐœ ์†๋„๋ฅผ ์˜ฌ๋ฆด ํ•„์š”๊ฐ€ ์žˆ์–ด๋ณด์ž…๋‹ˆ๋‹ค.
  • ํ˜„์žฌ ์ง€๋ผ์˜ ๊ฒฝ์šฐ ๋ฌด๋ฃŒ ํ”Œ๋žœ์ผ ๊ฒฝ์šฐ์—” ์™ธ๋ถ€์— ๋…ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.. (git์œผ๋กœ ์ „๋ถ€ ์˜ฎ๊ฒจ์•ผํ•˜๋‚˜ ์ƒ๊ฐ์ค‘์ž…๋‹ˆ๋‹ค.) (์—ฌ๊ธฐ๊นŒ์ง€ ๋ผ๋…ธ)
  • ๋กœ๊ทธ์•„์›ƒ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์˜๋…ผ (๊ตฌ๋””)
  • ๋กœ๊ทธ์ธ ์งˆ๋ฌธ (์ฃผ๋‚˜๋ฏธ)

1. โ€œ๊ฐœ์ธ์ •๋ณด ๊ด€์‹ฌ์‚ฌ & ์ง€์—ญโ€ ํŽ˜์ด์ง€์˜ url path ์„ค์ •์— ๋Œ€ํ•˜์—ฌ

  • ๋ฐฑ์—”๋“œ ์ธก์˜ user_interest ๊ด€๋ จ api :
๊ด€์‹ฌ ๋ถ„์•ผ ํฐ ์นดํ…Œ๊ณ ๋ฆฌ GET ์š”์ฒญ
GET /api/user/interests
๊ด€์‹ฌ ๋ถ„์•ผ ์„ธ๋ถ€ ์นดํ…Œ๊ณ ๋ฆฌ GET ์š”์ฒญ
GET /api/user/interests/{categoryId}


[์œ ์ € ๊ด€์‹ฌ ๋“ฑ๋ก]
POST /api/user/interests

// POST ์š”์ฒญ์˜ body ์˜ˆ์‹œ
{
    โ€œuserIdโ€ : โ€œ1",
    โ€œinterestsโ€ : [
        {
          โ€œcategoryIdโ€: 1,
          โ€œdetailIdโ€:1,
          โ€œnameโ€:โ€œJavaScriptโ€
        },
        {
          โ€œcategoryIdโ€: 2,
          โ€œdetailIdโ€:5,
          โ€œnameโ€:โ€œ์˜์–ดโ€
        },
        {
          โ€œcategoryIdโ€: 5,
          โ€œdetailIdโ€:16,
          โ€œnameโ€:โ€œ์™€์ธ ๊ณต๋ถ€ํ•˜๊ธฐโ€
        }
      ]
}

  • ํ”„๋ก ํŠธ ๋ผ์šฐํŒ…์€ ๋ฐฑ์—”๋“œ ์ธก์˜ url์— ๋งž์ถฐ์„œ user/interest || user/location
  • ๊ฐœ์ธ์ •๋ณด ์ˆ˜์ •ํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด user/detail ์ด๋Ÿฐ์‹์œผ๋กœ? ์ถ”ํ›„์— ๋‹ค์‹œ ์ •ํ•  ์˜ˆ์ •

2. ๋ฐ˜์‘ํ˜• ์›น์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ํ•˜์ž

  • ๋ชจ๋ฐ”์ผ / ํƒœ๋ธ”๋ฆฟ / PC ๋ฐ˜์‘ํ˜•์„ ํ• ์ง€ ํ™•์‹คํžˆ ์ •ํ•˜๊ณ  ๊ฐ€์•ผํ•˜์ง€ ์•Š์„๊นŒ?
  • max-width 768px
  • ํ”„๋ก ํŠธ๋ผ๋ฆฌ ํšŒ์˜ ์ข€ ๋” ํ•ด๋ด์•ผ ํ•จ

3. ๊ฐœ๋ฐœ ์†๋„๋ฅผ ์˜ฌ๋ฆด ํ•„์š”๊ฐ€ ์žˆ์–ด๋ณด์ž…๋‹ˆ๋‹ค.

  • ๋ฐ๋“œ๋ผ์ธ์„ ๋”ฑ ์ •ํ•ด๋†“์ž
  • ๊ธฐ์กด ๊ธฐ๋Šฅ : ์Šคํ„ฐ๋”” ๋ชจ์ง‘ + ์Šคํ„ฐ๋””๋ฃธ ์˜ˆ์•ฝ
  • ๋ฒ„์ „ lite : ๋ฉ”์ธํ™”๋ฉด ๋ชฉ๋ฐ์ดํ„ฐ + ๊ฒŒ์‹œํŒ ์ปจํ…์ธ  GET์š”์ฒญ์œผ๋กœ ๋ Œ๋”๋ง (10์›” 15์ผ + 7์ผ)
    • ํ•˜๋ฐ˜๊ธฐ ์ฑ„์šฉ ์ผ์ •๊ณผ ์—‰์ผœ์„œ ๋Šฆ์–ด์งˆ ์ˆ˜ ์žˆ์Œ
    • ๊ฐœ์ธ์ •๋ณด ๋ฐ์ดํ„ฐ ๋ฐ˜์˜ํ•œ ๋ฉ”์ธํ™”๋ฉด ์ปจํ…์ธ  ๋ Œ๋”๋ง (์ง€์—ญ)
  • ๋ฒ„์ „ 1 : ์Šคํ„ฐ๋”” ๋ชจ์ง‘ (์˜ฌํ•ด๊นŒ์ง€) ๊ฒŒ์‹œํŒ ๊ฒŒ์‹œ๊ธ€, CRUD + ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ๋Œ“๊ธ€
  • ๋ฒ„์ „ 2 : ์Šคํ„ฐ๋””๋ฃธ ์˜ˆ์•ฝ (์ฐฝ์—… >!>!>!?!?!)
  • ํšŒ์˜๋ฅผ ๊พธ์ค€ํžˆ ํ•˜๋ฉด์„œ ์†๋„ + ์ง„๋„ ์ฒดํฌ๊ฐ€ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Œ. ๊ธˆ์š”์ผ ์˜ค์ „ 10์‹œ 30๋ถ„
    • ํ”„๋ก ํŠธ ํšŒ์˜ ใ„ฑใ„ฑ (ํ™•์ •)
    • ๋ฐฑ์—”๋“œ ํšŒ์˜ ใ„ฑใ„ฑ (ํ™•์ •)

4. ํ˜„์žฌ ์ง€๋ผ์˜ ๊ฒฝ์šฐ ๋ฌด๋ฃŒ ํ”Œ๋žœ์ผ ๊ฒฝ์šฐ์—” ์™ธ๋ถ€์— ๋…ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅ -> Git์œผ๋กœ ์ด๋ฏผ

  • ์ง€๋ผ ๋ฌด๋ฃŒ ํ”Œ๋žœ์€ ์ €์žฅ์†Œ๋ฅผ ๊ณต๊ฐœํ•  ์ˆ˜๊ฐ€ ์—†์Œ -> ํฌํŠธํด๋ฆฌ์˜ค์— ๊ฐœ๋ฐœ ๊ณผ์ •์„ ๋ณด์—ฌ์ฃผ๊ธฐ ํž˜๋“ฆ

  • ๊นƒ์œผ๋กœ ์˜ฎ๊ธฐ๋ฉด

    • ์ด์Šˆ๋งŒ ๋‹ค์‹œ ๋งŒ๋“ค์–ด๋†“๊ธฐ
    • Projects ํƒญ์—์„œ ์นธ๋ฐ˜ ๊ด€๋ฆฌ ( ์ผ๋ฐ˜ -> Automatic ์นธ๋ฐ˜์ด ๋” ๋‚ซ๋”๋ผ๋Š” ์˜๊ฒฌ )
  • FE / BE ๋ณ„๋กœ ๊ฐ์ž ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜? ์ž‘์—… ํ•˜๊ธฐ

    • ๊ณตํ†ต ์ž๋ฃŒ๋Š” ๊ตฌ๋””๊ฐ€ ์˜ฎ๊น€

5. ๋กœ๊ทธ์•„์›ƒ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์˜๋…ผ (๊ตฌ๋””)

  • ์นด์นด์˜ค OAuth ์ธ์ฆ ์„œ๋ฒ„์—์„œ ๋กœ๊ทธ์•„์›ƒ
    • ํ•ด์•ผ ํ•˜๋Š” ์ด์œ  : ์„œ๋ฒ„์—์„œ ๋กœ๊ทธ์ธ ํ•œ ์‚ฌ๋žŒ์˜ AccessToken ์„ ์ €์žฅ. ๋กœ๊ทธ์•„์›ƒํ•˜๋ฉด AccessToken์„ ์œ ์ €๊ฐ€ ์„œ๋ฒ„์ชฝ์— ๋‚ ๋ฆผ
    • ์„œ๋ฒ„์ชฝ์—์„œ๋„ ํ˜„์žฌ A ๋ผ๋Š” ์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธ ์ƒํƒœ์ธ์ง€ ๋กœ๊ทธ์•„์›ƒ ์ƒํƒœ์ธ์ง€ ํ™•์ธํ• 
    • ๋กœ๊ทธ์•„์›ƒ ํ•œ ์ƒํƒœ์—์„œ ๋‹ค์‹œ ๋กœ๊ทธ์ธ ํ•˜๋ฉด ์ž๋™๋กœ๊ทธ์ธ ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ (!!!!!)

6. ๋กœ๊ทธ์ธ ์งˆ๋ฌธ (์ฃผ๋‚˜๋ฏธ)

  • ์ €๋ฒˆ ์ด์ŠˆํŠธ๋ž˜์ปค ๋•Œ๋Š” ํ˜„์žฌ JWTํ† ํฐ์ด ์œ ํšจํ•œ์ง€ ์œ ํšจํ•˜์ง€ ์•Š์€์ง€ ๊ฒ€์‚ฌํ•ด์„œ ๋กœ๊ทธ์ธ/์•„์›ƒ ์ฒ˜๋ฆฌ๋ฅผ ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ์—๋Š” ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋Š”์ง€
    • ์ง€๋‚œ๋ฒˆ์—” JWT ๊ธฐ๊ฐ„์ด ๋งŒ๋ฃŒ๋˜๋ฉด ํŽ˜์ด์ง€ ์ ‘๊ทผ์„ ์ฐจ๋‹จํ•˜๊ฒŒ ํ–ˆ์—ˆ์Œ
    • ์ด๋ฒˆ์—๋„ ๊ฐ™์Œ ( JWT ๊ธฐ๊ฐ„ ๋งŒ๋ฃŒ ๊ธฐํ•œ 1์ฃผ -> ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด 10๋ถ„์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌ.. )
    • jwt ์œ ํšจ๊ธฐ๊ฐ„์ด ์ง€๋‚˜๋ฉด ๋‹ค์‹œ ๋กœ๊ทธ์ธ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํด๋ผ์ด์–ธํŠธ์—์„œ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผ ํ•จ
    • ๋กœ๊ทธ์ธ ์š”์ฒญ ๋บด๊ณ ๋Š” ๋ชจ๋“  ์š”์ฒญ์— jwt ํ† ํฐ์„ ๋‹ด์•„์„œ ๋ณด๋‚ด์ค˜์•ผ ํ•จ
    • ์—๋Ÿฌ์ฝ”๋“œ
      • Bad request : 400
      • JSON REST API ์˜ Token ๋งŒ๋ฃŒ : 401 (Unauthorized)
    • ํ”„๋ก ํŠธ ์ธก ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด JWT ํ† ํฐ ๋งŒ๋ฃŒ ๊ธฐ๊ฐ„ 10๋ถ„์œผ๋กœ ์ž„์‹œ ์ˆ˜์ •
    • ๋ฆฌํ”„๋ ˆ์‹œ ํ† ํฐ
      • JWT ๊ฐ€ ๋งŒ๋ฃŒ๋์„ ๋•Œ ๋กœ๊ทธ์ธ๋˜์–ด ์žˆ๋Š” ์œ ์ €๊ฐ€ ๋‹ค์‹œ ๋กœ๊ทธ์ธํ•˜๊ฒŒ ํ•˜๋Š” ๊ฑฐ๋Š” UX ์ธก๋ฉด์—์„œ ์ข€ ์ด์ƒํ•จ.
      • JWT ํ† ํฐ์„ ์žฌ๋ฐœ๊ธ‰์„ ์ž๋™์œผ๋กœ ๋„์™€์ฃผ๋Š” ๋ฆฌํ”„๋ ˆ์‹œ ํ† ํฐ์„ ๋ฐœ๊ธ‰๋ฐ›์•„์•ผ ํ• ๊นŒ?
      • ์‚ฌ์šฉ์ž ์ •๋ณด ๋ณด์•ˆ ์ธก๋ฉด์—์„œ ํ•„์š”ํ•˜๋‹ค๋Š” ๊ธ€์ด ์žˆ์Œ. (https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie)
    • JWT ํ† ํฐ์ด ๋งŒ๋ฃŒ๋œ ์ƒํƒœ์—์„œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€์—์„œ ๋กœ๊ทธ์ธ์„ ๋ˆ„๋ฅด๋ฉด ์ž๋™ ๋กœ๊ทธ์ธ (์นด์นด์˜ค์˜ OAuth ๋กœ๊ทธ์ธ ์ฐฝ ์Šคํ‚ต)
    • ์œ ์ €์ •๋ณด ๋กœ์ปฌ ๋ง๊ณ  ์—”ํŠธ๋ฆฌ์˜ ์ƒํƒœ์— ์ €์žฅํ•˜๊ฑฐ๋‚˜ , ํ•„์š”ํ•  ๋•Œ ๋‹ค์‹œ jwt ๋กœ ์š”์ฒญ ๋ณด๋‚ด๊ฑฐ๋‚˜?
      • ์ƒํƒœ์— ์ €์žฅํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์–ด์ง.
      • ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŒ…์œผ๋กœ ๋กœ์ปฌ์—๋Š” ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ํด๋ผ์ด์–ธํŠธ ์ฝ”๋“œ๋Š” ๋ณต์žกํ•ด์„œ ์ ‘๊ทผ ๋ถˆ๊ฐ€?