๐Ÿงจ

1์ฐจ QA (24.01.10)

QA ๋ฆฌ์ŠคํŠธ

ํ…Œ๋งˆ ์„ค์ •

  • ๊ธฐ๋Šฅ ์•ˆ ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ๊ฐ€??

๊ฐœ๋ณ„ Thread

  • ์ข‹์•„์š” ํด๋ฆญ ์‹œ ์•„๋ฐ”ํƒ€๊ฐ€ ์›€์ง์ž„
  • ์Šค๋ ˆ๋“œ ํฐํŠธ ํฌ๊ธฐ์™€ ์—๋””ํ„ฐ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฆ„
  • ์Šค๋ ˆ๋“œ ๋ณธ๋ฌธ ์ƒ‰๊น”์ด ํšŒ์ƒ‰ ๋ง๊ณ  ๊ฒ€์ •์œผ๋กœ ํ•ด๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.
 

์Šคํฌ๋กค๋ฐ”

  • ์œˆ๋„์šฐ ์Šคํฌ๋กค๋ฐ”๋Š” ugly โ†’ ๋…ธ์…˜, ์Šฌ๋ž™ ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝ
notion image
 

์—๋””ํ„ฐ

  • ๋น„ํšŒ์›์ผ ๋•Œ ๊ธ€ ์“ฐ๋Š” ๊ฒฝ์šฐ api ํ˜ธ์ถœ์ด ๋˜๋Š”๋ฐ ์•„์˜ˆ disabled + placeholder(๋ฌธ๊ตฌ : ํšŒ์›๋งŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค)๋ฅผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ๋„ ๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ์„ ๋„์›Œ์ฃผ๋Š” ๊ฒƒ๋ณด๋‹ค ์œ ์ € ๊ฒฝํ—˜๋ฉด์—์„œ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค.
  • ๋ณธ์ธ ๋ฉ˜์…˜ํ•˜๋Š” ๊ฑฐ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์•ผํ•˜๋Š”์ง€โ€ฆ?
  • ์Šค๋ ˆ๋“œ ํฐํŠธ ํฌ๊ธฐ์™€ ์—๋””ํ„ฐ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฆ„
 

๋ฉ”์ธ ํŽ˜์ด์ง€ (์นญ์ฐฌ,์‘์›,๋ฌด๋Šฅ)

  • ์Šคํฌ๋กค์— ๋‚ ์งœ๊ฐ€ ๊ฐ€๋ ค์งˆ ๋•Œ๊ฐ€ ์žˆ์Œ (๋งฅ์—์„œ ์Šคํฌ๋กค ํ˜ธ๋ฒ„ ์‹œ์— ์Šคํฌ๋กค์ด ๋‘๊บผ์›Œ์ง€๋„ค์š”)
    • notion image
  • ๊ฒŒ์‹œํŒ ๊ฒŒ์‹œ๊ธ€์„ ๊ฐ์‹ผ ul ํƒœ๊ทธ์— padding-top์ด ์žˆ์–ด์„œ ์Šคํฌ๋กค์„ ์ตœ์ƒ๋‹จ์œผ๋กœ ์˜ฌ๋ ธ์„ ๋•Œ ์—ฌ๋ฐฑ์ด ์ƒ๊น€
  • ๊ฒŒ์‹œํŒ ์Šคํฌ๋กค์„ ํ•  ๋•Œ๋งˆ๋‹ค auth-user๊ฐ€ ํ˜ธ์ถœ๋จ(์Šคํฌ๋กค์ด ์›์ธ์ธ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ๋Š”๋ฐโ€ฆ ์‹œ๋„๋•Œ๋„ ์—†์ด ํ˜ธ์ถœ๋จ)
  • ์Šค๋ ˆ๋“œ ์‚ญ์ œ/ํŽธ์ง‘ ๋ฒ„ํŠผ ํด๋ฆญ ํ–ˆ์„ ๋•Œ๋Š” ๊ตฌํ˜„์ด ์•ˆ๋˜์–ด์žˆ์—ˆ๋‚˜์š”?(์งˆ๋ฌธ)
  • ๊ธ€์„ ์ƒ์„ฑํ–ˆ์„ ๋•Œ ์ƒ์„ฑ๋œ ์Šค๋ ˆ๋“œ ๊ธฐ์ค€์œผ๋กœ ์Šคํฌ๋กค์ด ์•„๋ž˜๋กœ ์•ˆ ๋‚ด๋ ค๊ฐ€์„œ ์ƒ์„ฑ์ด ๋˜์—ˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Œ
  • ์–‘ ์˜†์— ์—ฌ๋ฐฑ์ด ๋„ˆ๋ฌด ๋งŽ์€ ๊ฒƒ ๊ฐ™์Œ(๊ตฌ๋ถ„์„ ์ด ์žˆ์–ด์„œ ๋” ๊ทน๋Œ€ํ™”๋˜์–ด๋ณด์ด๋Š” ๋А๋‚Œ ..? ๊ฐœ์ธ์˜๊ฒฌ ์ž…๋‹ˆ๋‹ค..)
 

๋‚ด ์•Œ๋ฆผ

  • ์•Œ๋ฆผ ๋ฐฐ์—ด์ด ์˜ค๋Š” ๊ฒฝ์šฐ JSON.parse ์—๋Ÿฌ๊ฐ€ ๋‚จ
  • ์•Œ๋ฆผ์ด ์—†๋Š” ๊ฒฝ์šฐ ์•Œ๋ฆผ์ด ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ๋“ฑ์˜ ๋ฌธ๊ตฌ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Œ
  • ์‹œ๊ฐ ํ…์ŠคํŠธ๊ฐ€ ๋„ˆ๋ฌด ์ž‘์Œ
 

๋‚ด๊ฐ€ ์“ด ๊ธ€

  • ๋‚ด๊ฐ€ ์“ด ๊ธ€์ด ์—†๋Š” ๊ฒฝ์šฐ ๊ฒŒ์‹œ๊ธ€์ด ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ๋“ฑ์˜ ๋ฌธ๊ตฌ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Œ
 

์‚ฌ์ด๋“œ๋ฐ”

  • flex-shrink: 0; ์ฃผ๋ฉด ์ด๊ฑฐ ๊ดœ์ฐฎ์•„์ง
    • notion image
  • ์•Œ๋ฆผ ๋ฑƒ์ง€๊ฐ€ ๋ฐ˜์˜์ด ๋˜๋Š”๊ฐ€? ์•ˆ ๋œ๋‹ค๋ฉด ์ œ๊ฑฐํ•˜๋Š” ๊ฒŒ?
    • polling? ์œผ๋กœ ๊ณ„์† ๊ฐฑ์‹ ์„ ์ง์ ‘ ํ•ด์ค˜์•ผ
 

๐Ÿšจ ๋‚ด์ผ๊นŒ์ง€ ๋ฐ˜์˜ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ

๋ฉ”์ธํŽ˜์ด์ง€ (์นญ์ฐฌ, ์‘์›, ๋ฌด๋Šฅ)

 

์—๋””ํ„ฐ

๋น„ํšŒ์› ์ฒ˜๋ฆฌ โ†’ ๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ๋กœ ๋ณ€๊ฒฝ
์Šค๋ ˆ๋“œ ํฐํŠธ ๋”ฐ๋ผ๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค.
 

๋‚ด ์•Œ๋ฆผ

  • ์•Œ๋ฆผ ๋ฐฐ์—ด์ด ์˜ค๋Š” ๊ฒฝ์šฐ JSON.parse ์—๋Ÿฌ๊ฐ€ ๋‚จ โ†’ ์ˆ˜์ •์™„๋ฃŒ
  • ์•Œ๋ฆผ์ด ์—†๋Š” ๊ฒฝ์šฐ ์•Œ๋ฆผ์ด ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ๋“ฑ์˜ ๋ฌธ๊ตฌ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Œ โ†’ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค (1.10๊นŒ์ง€)
 

๋‚ด๊ฐ€ ์“ด ๊ธ€

  • ๋‚ด๊ฐ€ ์“ด ๊ธ€์ด ์—†๋Š” ๊ฒฝ์šฐ ๊ฒŒ์‹œ๊ธ€์ด ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ๋“ฑ์˜ ๋ฌธ๊ตฌ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Œ โ†’ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค (1.10๊นŒ์ง€)
 

ํšŒ์›๊ฐ€์ž… ๋ชจ๋‹ฌ

์ต๋ช…์˜ ํ”„๋กฑ์ด๋กœ ๋‹‰๋„ค์ž„์— ๊ธฐ์ž…ํ•œ ๊ฒฝ์šฐ ๋ง‰๋Š” ์ฒ˜๋ฆฌ ํ•„์š”ํ•˜์ง€ ์•Š์„์ง€
๋‹‰๋„ค์ž„๋ฌธ๊ตฌ: ๋ฏธ๊ฐ€์ž… ์‹œ ์ต๋ช…์˜ ํ”„๋กฑ์ด๋กœ ๋ณ€๊ฒฝ
์„ฑ๊ณตํ–ˆ์„ ๋•Œ ๋Œ€์‘์ด ๋ถ€์žฌํ•จ (์„ฑ๊ณตํ–ˆ๋Š”์ง€ ๋ชจ๋ฆ„)

๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ

๋กœ๊ทธ์ธ ์‹คํŒจ ์‹œ ์•ก์…˜์—†์ด ๋ชจ๋‹ฌ๋งŒ ๋‹ซํž˜
์„ฑ๊ณตํ–ˆ์„ ๋•Œ ๋Œ€์‘์ด ๋ถ€์žฌํ•จ (์„ฑ๊ณตํ–ˆ๋Š”์ง€ ๋ชจ๋ฆ„)

ํ”„๋กœํ•„ ๋ณ€๊ฒฝ ๋ชจ๋‹ฌ

์„ฑ๊ณต/์‹คํŒจํ–ˆ์„ ๋•Œ ๋Œ€์‘์ด ๋ถ€์žฌํ•จ
๋‹‰๋„ค์ž„ ๋™์ผํ•˜๋ฉด ์•Œ๋žŒ์ฐฝ ๋œจ๊ณ  ์•Œ๋žŒ์ฐฝ ๋‹ซ์œผ๋ฉด ๋ชจ๋‹ฌ์ด ๋‹ซํž˜ โ‡’ ์•Œ๋žŒ์ฐฝ ๋‹ซ์•„๋„ ๋ชจ๋‹ฌ์€ ๋– ์žˆ๋Š”๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ€ํƒ€์š”!
์‹œ์Šคํ…œ์ด๋ผ๋Š” ๋ฌธ๊ตฌ๋ž‘ ๋ณ€๊ฒฝ์ด๋ž‘ ์•ˆ๋งž๋Š”๊ฑฐ ๊ฐ™์€๋ฐ ๋‚ด ํ”„๋กœํ•„ ํŽธ์ง‘์€ ์–ด๋– ํ•˜์‹ ์ง€..?
์ต๋ช…์˜ ํ”„๋กฑ์ด๋กœ ๋‹‰๋„ค์ž„์— ๊ธฐ์ž…ํ•œ ๊ฒฝ์šฐ ๋ง‰๋Š” ์ฒ˜๋ฆฌ ํ•„์š”ํ•˜์ง€ ์•Š์„์ง€
์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ƒ๊น€ (scroll โ†’ auto)
  • header๋นผ๊ณ  body์—๋งŒ ์Šคํฌ๋กค์ด ์žˆ๋Š” ๊ฒŒ ๋” ์ข‹์•„๋ณด์ผ์ง€๋„?
  • scroll-x๋Š” ํ•„์š” ์—†์„์ง€๋„
notion image

๊ฐœ๋ณ„ Thread

 

๐Ÿ’จ ์›”์š”์ผ๊นŒ์ง€ ๋ฐ˜์˜ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ

๋ฉ”์ธํŽ˜์ด์ง€ (์นญ์ฐฌ, ์‘์›, ๋ฌด๋Šฅ)

 

์—๋””ํ„ฐ

  • ๋น„ํšŒ์› ์ฒ˜๋ฆฌ โ†’ ๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ๋กœ ๋ณ€๊ฒฝ
  • ์Šค๋ ˆ๋“œ ํฐํŠธ ๋”ฐ๋ผ๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค.
 

๋‚ด ์•Œ๋ฆผ, ๋‚ด๊ฐ€ ์“ด ๊ธ€

  • ์‹œ๊ฐ ํ…์ŠคํŠธ๊ฐ€ ๋„ˆ๋ฌด ์ž‘์Œ โ†’ ํฌ๊ธฐ ์ข€ ๋” ํ‚ค์šฐ๊ฒ ์Šต๋‹ˆ๋‹ค
 

ํšŒ์›๊ฐ€์ž… ๋ชจ๋‹ฌ

padding์ด ์ž˜๋ชป ๋“ค์–ด๊ฐ€์ ธ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Œ(๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ, ๋‚ด ํ”„๋กœํ•„ ํŽธ์ง‘ ๋ชจ๋‹ฌ ๋™์ผ)
notion image
backdrop ํด๋ฆญ ์‹œ ๋‚˜๊ฐ€์ง€์ง€ ์•Š์Œ
๋‹ค๋ฅธ ๊ณณ ํด๋ฆญํ–ˆ์„ ์‹œ ์œ ํšจ์„ฑ ์‹คํŒจ ๋ฌธ๊ตฌ๊ฐ€ ๋œจ๊ณ  ๋„˜์–ด๊ฐ (๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ ๋™์ผ)
๋ชจ๋‹ฌ์ด ๊ทธ ์‚ฌ๋ฌด์ ์œผ๋กœ ์ƒ๊ฒผ์–ด์š” ์ข€ ๋” ํ™˜์˜ํ–ˆ์œผ๋ฉด ์ข‹๊ฒ ์–ด์š”!
  • (๋””์ž์ธ ์š”๊ตฌ์‚ฌํ•ญ์ด๋ผ์„œ ์–ด๋ ค์šธ ๋“ฏ)

๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ

 

ํ”„๋กœํ•„ ๋ณ€๊ฒฝ ๋ชจ๋‹ฌ

์ด๋ฆ„๊ณผ ์ด๋ฉ”์ผ๋„ ๋‹ค๋ฅธ input์ฐฝ๊ณผ ๋™์ผํ•ด์„œ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์€ ํฌ๋ง๊ณ ๋ฌธ์ƒ๊น€ disabled ์ฒ˜๋ฆฌํ•ด๋†“๋Š” ๊ฑด ์–ด๋–ค๊ฐ€์š”??

๊ฐœ๋ณ„ Thread

 

๐ŸŒˆ ์ตœ์ข… ๋ฐœํ‘œ ์ „๊นŒ์ง€ ๋ฐ˜์˜ํ•˜๋ฉด ์ข‹์€ ๊ฒƒ, ํ˜น์€ ๋…ผ์˜์‚ฌํ•ญ

๋ฉ”์ธํŽ˜์ด์ง€ (์นญ์ฐฌ, ์‘์›, ๋ฌด๋Šฅ)

 

์—๋””ํ„ฐ

 

๋‚ด ์•Œ๋ฆผ

 

๋‚ด๊ฐ€ ์“ด ๊ธ€

 

ํšŒ์›๊ฐ€์ž… ๋ชจ๋‹ฌ

 

๋กœ๊ทธ์ธ ๋ชจ๋‹ฌ

 

ํ”„๋กœํ•„ ๋ณ€๊ฒฝ ๋ชจ๋‹ฌ

 

๊ฐœ๋ณ„ Thread