Community

๊ฐœ๋ฐœ์ž 99% ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ˆ˜๋‹ค ๋–จ์–ด์š”!

โ† Go back
๐Ÿ”ฅ[์ผ๋ฐ˜๋ถ€๋ฌธ]๐ŸŒŸํŠธ์œ„ํ„ฐ ํด๋ก  ์ปจํ…Œ์ŠคํŠธ๐ŸŒŸ ๋…ธ๋งˆ๋“œ ์ฝ”๋”๊ฐ€ ํŠธ์œ„ํ„ฐ์— ๊ฐ€์ž…ํ•œ๋‹ค๋ฉด?!๐Ÿ”ฅ
โ€ข#twitter_cloneโ€ข
9 months ago

๐Ÿ”— 1. ๊ฒฐ๊ณผ๋ฌผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

๐Ÿ‘‰๐Ÿป https://githubgw.github.io/twitter-clone

undefined

๐Ÿ™‚ 2. ์ž๊ธฐ์†Œ๊ฐœ

์•ˆ๋…•ํ•˜์„ธ์š”! ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์—ด์‹ฌํžˆ ๊ณต๋ถ€์ค‘์ธ ์ทจ์ค€์ƒ์ž…๋‹ˆ๋‹ค. :)
๋Œ€ํ•™๊ต๋•Œ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ˆ˜์—…์„ ๋“ฃ๊ณ  ์›น ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ฒŒ ๋˜๋ฉด์„œ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ฒ˜์Œ HTML๊ณผ CSS๋ฅผ ๋ฐฐ์šฐ๋ฉด์„œ ํ™”๋ฉด์— ๋ฐ”๋กœ๋ฐ”๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์ด ๋„ˆ๋ฌด ์‹ ๊ธฐํ•˜๊ณ  ์žฌ๋ฐŒ์—ˆ๋˜ ๊ธฐ์–ต์ด ๋‚˜๋„ค์š”.๊ทธ ํ›„, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋๋Š”๋ฐ ์–ด๋ ค์›Œ์„œ ์ค‘๊ฐ„์— ๋งŽ์ด ํ—ค๋งค๋˜ ์ค‘, ์šฐ์—ฐํžˆ ์œ ํŠœ๋ธŒ์—์„œ ๋…ธ๋งˆ๋“œ์ฝ”๋”๋ฅผ ์•Œ๊ฒŒ ๋œ ํ›„ ๋ฌด๋ฃŒ ๋ฐ”๋‹๋ผJS ๊ฐ•์˜๋ฅผ ์‹œ์ž‘์œผ๋กœ ์œ ํŠœ๋ธŒ ํด๋ก , ๋ฆฌ์•กํŠธ๋ฅผ ๊ฑฐ์ณ์„œ ํŠธ์œ„ํ„ฐ๊นŒ์ง€ ๋“ฃ๊ฒŒ ๋๊ณ , ๋งˆ์นจ ์ข‹์€ ์ปจํ…Œ์ŠคํŠธ๊ฐ€ ์—ด๋ ค ์ฐธ๊ฐ€ํ•˜๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.

โœ… 3. ์„œ๋น„์Šค์†Œ๊ฐœ

ํŠธ์œ„ํ„ฐ ํด๋ก  ์ปจํ…Œ์ŠคํŠธ์ธ ๋งŒํผ ์ตœ๋Œ€ํ•œ ํŠธ์œ„ํ„ฐ๊ฐ€ ๊ฐ€์ง„ ๋Š๋‚Œ๊ณผ ๊ธฐ๋Šฅ๋“ค์„ ์‚ด๋ ค์„œ ์‹ค์ œ SNS ์„œ๋น„์Šค ๊ฐ™์€ ๋ชจ์Šต์œผ๋กœ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

# 3-1. ์ธ์ฆ

  • ๋น„๋กœ๊ทธ์ธ ์‚ฌ์šฉ์ž๋„ ์ฝ๊ธฐ ํ—ˆ์šฉ

๋กœ๊ทธ์ธ์„ ํ•œ ํ›„์—๋งŒ ํŠธ์œ—์„ ์ฝ๊ณ  ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ธฐ์กด ๋ฐฉ์‹์ด ๋ถˆํŽธํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ฐ„๋‹จํ•œ ํŠธ์œ—์€ ๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š๊ณ ๋„ ๋ˆ„๊ตฌ๋‚˜ ๋ฐ”๋กœ๋ฐ”๋กœ ์ฝ๊ณ  ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ๊ธฐ๋ณธ ๋ฃฐ๊ณผ ๋ฐฉ์‹์„ ๋ฐ”๊ฟ”์„œ ๋น„๋กœ๊ทธ์ธ์‹œ์—๋„ ์ฝ๊ธฐ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณ€๊ฒฝํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š์•„๋„ ์‚ฌ์ดํŠธ์— ๋“ค์–ด์™€์„œ ๋ฐฉ๋ฌธ์ž๋Š” ๊ฐ„๋‹จํ•œ ๊ธ€์„ ์ฝ๊ณ  ํ™•์ธํ•˜๊ณ  ๊ตฌ๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • ํšŒ์›๊ฐ€์ž…, ์ด๋ฉ”์ผ ๋กœ๊ทธ์ธ, ์†Œ์…œ ๋กœ๊ทธ์ธ(๊ตฌ๊ธ€, ๊นƒํ—ˆ๋ธŒ)

์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ฉ”์ผ ๋˜๋Š” ๊ธฐ์กด์— ๊ฐ€์ง€๊ณ  ์žˆ๋˜ ๊ตฌ๊ธ€์ด๋‚˜ ๊นƒํ—ˆ๋ธŒ ์†Œ์…œ ๊ณ„์ •์„ ํ†ตํ•ด ํšŒ์›๊ฐ€์ž…์„ ํ•˜๊ณ  ๋กœ๊ทธ์ธ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํšŒ์›๊ฐ€์ž…์„ ํ•  ๋•Œ ์ถ”๊ฐ€์ ์ธ ์‚ฌ์šฉ์ž ์ด๋ฆ„์„ ํ†ตํ•ด ์ดˆ๊ธฐ ๊ธฐ๋ณธ ๋‹‰๋„ค์ž„์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํšŒ์› ํƒˆํ‡ด ๊ธฐ๋Šฅ๋„ ๊ตฌํ˜„์€ ํ•˜์˜€์ง€๋งŒ ๋งˆ์ง€๋ง‰์— ๊ณ ๋ฏผ ๋์— ์ œ๊ฑฐํ•˜์˜€์Šต๋‹ˆ๋‹ค.

undefined

  • ์ด๋ฉ”์ผ ์ฃผ์†Œ ๋ฐ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ

ํšŒ์›๊ฐ€์ž… ํ›„ ํ˜„์žฌ ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ฉ”์ผ ๋ณ€๊ฒฝ ๋ฐ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ƒˆ๋กœ์šด ์ด๋ฉ”์ผ ์ฃผ์†Œ์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ด๋ฉ”์ผ ๋ณ€๊ฒฝ๊ณผ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ ๋ฒ„ํŠผ์€ ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ Auth๋ฅผ ํ†ตํ•ด ํ˜„์žฌ ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ํ™•์ธ๋  ๋•Œ๋งŒ ๋ฒ„ํŠผ์ด ๋ณด์—ฌ์ง€๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ƒˆ๋กœ์šด ์ด๋ฉ”์ผ ์ฃผ์†Œ๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ, ๊ธฐ์กด์— ํšŒ์›๊ฐ€์ž…ํ–ˆ๋˜ ์ด๋ฉ”์ผ ์ฃผ์†Œ๋ฅผ ํ†ตํ•ด ์ธ์ฆ์„ ๋ฐ›์•„์•ผ๋งŒ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

# 3-2. ์œ ์ €

  • ์‚ฌ์šฉ์ž ์ •๋ณด ํ™•์ธ

ํ”„๋กœํ•„ ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ€์ž…ํ•œ ์ด๋ฉ”์ผ ์ฃผ์†Œ์™€ ๊ณ„์ • ์ƒ์„ฑ์ผ, ๋งˆ์ง€๋ง‰ ๋กœ๊ทธ์ธ ๋‚ ์งœ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ€์ž…ํ•œ ์ด๋ฉ”์ผ์ด ์ธ์ฆ๋œ ์ด๋ฉ”์ผ์ธ์ง€๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋ณ€๊ฒฝ ๋ฐ ํ”„๋กœํ•„ ์‚ฌ์ง„ ๋ณ€๊ฒฝ

ํ”„๋กœํ•„ ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ ํ”„๋กœํ•„ ์‚ฌ์ง„์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์—…๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

  • ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ํŠธ์œ— ๋ชฉ๋ก

ํ”„๋กœํ•„ ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ํŠธ์œ— ๋ชฉ๋ก์„ ํ•œ ๋ˆˆ์— ๋ชจ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์ด ์ž‘์„ฑํ•œ ํŠธ์œ— ์ •๋ณด์™€ ์ž‘์„ฑํ•œ ํŠธ์œ—์˜ ์ˆ˜๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ธฐ๋ณธ ํ”„๋กœํ•„ ์‚ฌ์ง„

๊ตฌ๊ธ€์ด๋‚˜ ๊นƒํ—ˆ๋ธŒ ์†Œ์…œ ๊ณ„์ •์„ ํ†ตํ•ด ํšŒ์›๊ฐ€์ž…์„ ํ•˜์ง€ ์•Š์€ ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๊ธฐ๋ณธ ํ”„๋กœํ•„ ์‚ฌ์ง„์„ ๋„ฃ์–ด ๋Œ€์ฒดํ•˜๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

# 3-3. ํŠธ์œ—

  • ํŠธ์œ— ์ž‘์„ฑ, ์ˆ˜์ •, ์‚ญ์ œ

๊ธ€, ์ด๋ฏธ์ง€, ์›€์งค ๋“ฑ์„ ๋„ฃ์–ด ํŠธ์œ—์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์ด ์ž‘์„ฑํ•œ ํŠธ์œ—์„ ํด๋ฆญํ•ด์„œ ์ˆ˜์ •ํ•˜๊ณ  ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

  • ์ด๋ชจ์ง€ ์ถ”๊ฐ€

์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ชจ์ง€๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ ๋‹จ์ถ•ํ‚ค๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์•„์ด์ฝ˜์„ ํด๋ฆญํ•ด์„œ ์›ํ•˜๋Š” ์ด๋ชจ์ง€๋ฅผ ์„ ํƒํ•ด ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • ์ข‹์•„์š”(โค๏ธ) ๊ธฐ๋Šฅ

์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์ด ์ž‘์„ฑํ•œ ๊ธ€๊ณผ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๊ธ€์— ์ข‹์•„์š”(โค๏ธ)๋ฅผ ๋ˆ„๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ข‹์•„์š”๋ฅผ ํ•œ๋ฒˆ ๋ˆ„๋ฅด๋ฉด ํ•˜ํŠธ๊ฐ€ ์ฑ„์›Œ์ง€๊ณ  ๋‹ค์‹œ ๋ˆ„๋ฅด๋ฉด ์ข‹์•„์š”๊ฐ€ ์ทจ์†Œ๋˜๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

undefined

  • ํŠธ์œ— ์ •๋ณด

ํŠธ์œ—์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๋ฉด ํŠธ์œ—์„ ์ž‘์„ฑํ•œ ์‚ฌ๋žŒ์˜ ํ”„๋กœํ•„ ์‚ฌ์ง„๊ณผ ๋‹‰๋„ค์ž„, ์ด๋ฉ”์ผ ์ฃผ์†Œ, ์ž‘์„ฑ์ผ์ž๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ „์ฒด ํŠธ์œ— ์ˆ˜, ํŠธ์œ„ํ„ฐ ๊ฒ€์ƒ‰

์ค‘์•™ ์ƒ๋‹จ์—์„œ ํ˜„์žฌ ์ž‘์„ฑ๋œ ์ „์ฒด ํŠธ์œ— ์ˆ˜๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ „์ฒด ํŠธ์œ— ์ˆ˜๋Š” ํŠธ์œ— ์ถ”๊ฐ€, ์‚ญ์ œ๊ฐ€ ์ด๋ฃจ์–ด์ง€๋ฉด ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ˆซ์ž๊ฐ€ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.
๊ฒ€์ƒ‰์ฐฝ์— ํ‚ค์›Œ๋“œ๋ฅผ ์ž…๋ ฅํ•ด ํŠธ์œ„ํ„ฐ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • + ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ํŠธ์œ— ํ™•์ธ

๋ฉ”์ธ ํŽ˜์ด์ง€์—์„œ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•˜๋ฉด ๊ทธ ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ๋ชจ๋“  ํŠธ์œ—์„ ํ•œ ๋ˆˆ์— ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ํŒ”๋กœ์šฐ ์ถ”์ฒœ๋ž€์˜ ๋”๋ณด๊ธฐ๋ฅผ ํด๋ฆญ์‹œ ์‚ฌ์ดํŠธ๋‚ด์—์„œ ํŠธ์œ—์„ ์ž‘์„ฑํ•œ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์˜ ๋ชฉ๋ก์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

# 3-4. ๊ธฐํƒ€

  • ๋‹คํฌ๋ชจ๋“œ

์ƒ๋‹จ์˜ ๐ŸŒž ์™€ ๐ŸŒ™ ์ด๋ชจํ‹ฐ์ฝ˜์„ ๋ˆŒ๋Ÿฌ์„œ ๋ผ์ดํŠธ ๋ชจ๋“œ์™€ ๋‹คํฌ ๋ชจ๋“œ๋ฅผ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ผ์ดํŠธ ๋ชจ๋“œ๋Š” ๊น”๋”ํ•œ ํฐ์ƒ‰๊ณผ ์—ฐํ•œ ํšŒ์ƒ‰์„ ์กฐํ•ฉํ•ด์„œ ๋งŒ๋“ค์—ˆ๊ณ , ๋‹คํฌ ๋ชจ๋“œ๋Š” ์–ด๋‘์šด ํšŒ์ƒ‰๊ณผ ๋‚จ์ƒ‰์„ ์กฐํ•ฉํ•ด์„œ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ state๊ฐ’์— ๋ณ€ํ™”๋ฅผ ์ค˜์„œ ๊ทธ state๊ฐ’์„ ์ด์šฉํ•ด์„œ ๋ผ์ดํŠธ/๋‹คํฌ๋ชจ๋“œ๋ฅผ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•ด์„œ props๋ฅผ ๋ฐ›์•„ ์กฐ๊ฑด์— ๋งž๊ฒŒ ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ์ฃผ๋ณ€ ์ƒ‰์ƒ์— ์ž์—ฐ์Šค๋Ÿฌ์šด ๋ณ€ํ™”๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

undefined

  • ํ”Œ๋ž˜์‹œ ๋ฉ”์„ธ์ง€

์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ, ๋กœ๊ทธ์•„์›ƒ, ํšŒ์›๊ฐ€์ž…, ํŠธ์œ— ์ž‘์„ฑ, ์ˆ˜์ •, ์‚ญ์ œ, ํ”„๋กœํ•„ ์—…๋ฐ์ดํŠธ ๋“ฑ๋“ฑ์˜ ๋™์ž‘์„ ํ•  ๋•Œ ์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ์— ์ž‘์€ ํ”Œ๋ž˜์‹œ ๋ฉ”์„ธ์ง€๋ฅผ ๋„์›Œ ์ƒํƒœ ํ™•์ธ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
ํ”Œ๋ž˜์‹œ ๋ฉ”์„ธ์ง€๋Š” alert(์•Œ๋ฆผ)์ฐฝ๊ณผ ๋‹ค๋ฅด๊ฒŒ ํด๋ฆญํ•˜์ง€ ์•Š์•„๋„ ์ผ์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ์ž๋™์œผ๋กœ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

๐Ÿ’Ž 4. ๊ฐœ๋ฐœ๊ณผ์ •(์–ด๋ ค์› ๋˜ ์ ๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•)

# 4-1. ์ข‹์•„์š”(โค๏ธ)

์š”์ฆ˜ ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ SNS์„œ๋น„์Šค๋ฅผ ๋ณด๋ฉด ์ข‹์•„์š” ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ข‹์•„์š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
์ฒ˜์Œ ์ข‹์•„์š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์„ ๋•Œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ข‹์•„์š”๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ, ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ์ปฌ๋ ‰์…˜ ์•ˆ์— ๋„ํ๋ฉ˜ํŠธ์—์„œ ํ•ด๋‹น ํŠธ์œ—์„ ์ฐพ์•„์„œ ์ข‹์•„์š” ์ˆซ์ž์— +1์„ ํ•ด์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ด ๋ฐฉ์‹์œผ๋กœ ๋งŒ๋“ค๋‹ค๋ณด๋‹ˆ ์‚ฌ์šฉ์ž๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๊ฒŒ ๋˜๋ฉด ๋˜ ๋‹ค์‹œ ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅผ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅด๊ณ  ๋‹ค์‹œ ์ข‹์•„์š” ์ทจ์†Œ๋ฅผ ํ•  ๋•Œ๋„ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅธ ์‚ฌ์šฉ์ž uid ๋˜๋Š” ์ด๋ฉ”์ผ์„ ํ•ด๋‹น ํŠธ์œ—์˜ ๋ฐฐ์—ด์— ์ถ”๊ฐ€๋ฅผ ํ•ด์„œ, ๊ทธ ๋ฐฐ์—ด ์•ˆ์— ์žˆ๋Š” ๊ฐ’๋“ค์˜ ๊ฐฏ์ˆ˜๋ฅผ ํ†ตํ•ด ์ข‹์•„์š” ๊ฐฏ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋˜ ์ด๋ฏธ ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅธ ์‚ฌ์šฉ์ž์ธ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฐฐ์—ด ์•ˆ์—์„œ ํ•ด๋‹น ์‚ฌ์šฉ์ž์˜ uid ๋˜๋Š” ์ด๋ฉ”์ผ์ด ์กด์žฌํ•˜๋Š”์ง€ ๋Œ€์กฐํ•ด์„œ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์‚ฌ์šฉ์ž๋งŒ ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅด๊ณ , ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

# 4-2. Cloud Firestore ๋ฃฐ ๋ณ€๊ฒฝ

๊ฐ•์˜์—์„œ๋Š” ์ฒ˜์Œ ์‚ฌ์ดํŠธ์— ๋“ค์–ด์™”์„ ๋•Œ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ๋ณด์—ฌ์ง€๊ณ  ๋กœ๊ทธ์ธ์„ ํ•œ ์ดํ›„์—๋งŒ ๋น„๋กœ์†Œ ์‚ฌ์šฉ์ž๊ฐ€ ํŠธ์œ—์„ ์ฝ๊ณ  ์“ธ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์‹์ด์—ˆ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ฒ˜์Œ ์‚ฌ์ดํŠธ์— ๋“ค์–ด์™”์„ ๋•Œ ๋น„๋กœ๊ทธ์ธ ์‚ฌ์šฉ์ž๋„ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ ํŠธ์œ„ํ„ฐ ํ™ˆ์œผ๋กœ ๋“ค์–ด์™€์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ํŠธ์œ—์„ ์ฝ๊ณ  ํ™•์ธ๊นŒ์ง€๋Š” ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์™„์ „ํžˆ ์ƒˆ๋กญ๊ฒŒ ๋ฐฉ์‹์„ ๋ฐ”๊ฟจ์Šต๋‹ˆ๋‹ค. Firebase ์ฝ˜์†”์—์„œ Cloud Firestore ๋ฃฐ์„ ๋ณ€๊ฒฝํ•ด์„œ ์ฝ๊ธฐ๋Š” ํ•ญ์ƒ ํ—ˆ์šฉํ•˜๊ณ , ์“ฐ๊ธฐ๋งŒ ์ œํ•œ๋˜๋„๋ก ๋ฃฐ์„ ์žฌ ์„ค์ •ํ•˜์˜€๊ณ , ๊ธฐ์กด์— ์งฐ๋˜ ์ฝ”๋“œ ๋ฐฉ์‹๋„ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ ํ™ˆ ํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๋„๋ก์ƒˆ๋กญ๊ฒŒ ๋ฐ”๊ฟจ์Šต๋‹ˆ๋‹ค.
ํŠธ์œ—์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•˜์ง€๋งŒ, ๋น„๋กœ๊ทธ์ธ ์‚ฌ์šฉ์ž๋„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ž‘์„ฑํ•œ ํŠธ์œ—์„ ์ฝ๊ณ  ํ™•์ธ๊นŒ์ง€๋Š” ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

# 4-3. Storage ๋Œ€์—ญํญ ์ดˆ๊ณผ, Firebase ์š”๊ธˆ์ œ ๋ณ€๊ฒฝ

ํŠธ์œ„ํ„ฐ ํด๋ก ์„ ์™„์„ฑํ•˜๊ณ  ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๋“ค๊ณผ ์›€์งค์„ ๋„ฃ๋‹ค๋ณด๋‹ˆ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณต๋œ Storage ๋Œ€์—ญํญ์„ ์ดˆ๊ณผํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๋Œ€์—ญํญ์ด ์ดˆ๊ณผ๊ฐ€ ๋˜๋ฉด ๊ธฐ์กด์— Storage์— ์˜ฌ๋ผ๊ฐ€ ์žˆ๋˜ ๋ชจ๋“  ์ด๋ฏธ์ง€์™€ ์›€์งค ๋“ฑ์ด ๊นจ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ Firebase ์š”๊ธˆ์ œ ๋ณ€๊ฒฝ์„ ํ†ตํ•ด ์ผ์ผ ๋Œ€์—ญํญ์˜ ์‚ฌ์šฉ๋Ÿ‰์— ์ œํ•œ์„ ํ’€์–ด ๋” ๋งŽ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ž์œ ๋กญ๊ฒŒ ๊ธ€์„ ์˜ฌ๋ฆฌ๊ณ  ์ฝ๊ณ  ์“ธ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

# 4-4. ํŠธ์œ„ํ„ฐ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„ (CSS)

์ •๋ง ํŠธ์œ„ํ„ฐ ๊ฐ™์€ ํŠธ์œ„ํ„ฐ ํด๋ก ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์„ธ์‹ฌํ•˜๊ฒŒ ๋””์ž์ธํ•˜์˜€์Šต๋‹ˆ๋‹ค.
ํŠธ์œ„ํ„ฐ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ƒ‰์ƒ๋“ค๊ณผ ๋””์ž์ธ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ์„ ์ฐธ๊ณ ํ•ด์„œ ๋””์ž์ธํ•˜์˜€์Šต๋‹ˆ๋‹ค.
ํŠธ์œ„ํ„ฐ ๋ ˆ์ด์•„์›ƒ์ด ํŠน์ดํ•˜๊ฒŒ ๊ฐ€์šด๋ฐ ์ž‘์„ฑํ•œ ํŠธ์œ—์€ ์Šคํฌ๋กค ๋˜์ง€๋งŒ, ์–‘์˜† ์‚ฌ์ด๋“œ๋Š” ๊ณ ์ •๋œ ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๊ณ , ์ค‘์•™ ๋ฐฐ์น˜๊ฐ€ ๋˜์–ด ์žˆ๋Š” ๊ตฌ์กฐ์ด๊ธฐ ๋–„๋ฌธ์— ์ด ๋ ˆ์ด์•„์›ƒ์„ ์žก๋Š”๋ฐ ์กฐ๊ธˆ ์–ด๋ ค์› ์Šต๋‹ˆ๋‹ค.
๋‹จ์ˆœํžˆ position: fixed๋ฅผ ํ†ตํ•ด ์ตœ์ƒ๋‹จ์ด๋‚˜ ํ•˜๋‹จ ๋˜๋Š” ํ•œ์ชฝ์œผ๋กœ๋งŒ ๊ณ ์ •ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๊ฐ€์šด๋ฐ๋กœ ์–‘ ์˜†์„ ๊ณ ์ •ํ•ด์•ผ ํ•ด์„œ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋ฅผ ์žก๋Š”๋ฐ ์กฐ๊ธˆ ์–ด๋ ค์›€์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ”ฅ 5. ์•ž์œผ๋กœ์˜ ๊ณ„ํš

์ด๋ฒˆ ํŠธ์œ„ํ„ฐ ํด๋ก  ์ปจํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋ฉด์„œ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฝ๋‹ค๋ณด๋‹ˆ ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋กœ ๊ตฌํ˜„ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์ด ์ •๋ง ๋งŽ๋‹ค๋Š” ๊ฒƒ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.
๋” ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ๊ธฐ๋Šฅ๋“ค๋„ ๋งŽ๊ณ , ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์€ ๊ธฐ๋Šฅ๋“ค๋„ ์žˆ์–ด์„œ ์—…๋ฐ์ดํŠธ ์˜ˆ์ •์ธ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ•์˜์™€ ์šฐ๋ฒ„์ด์ธ  ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ , ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ(๋ชจ๋ฐ”์ผ)๋กœ ์ข€ ๋” ๊น”๋”ํ•˜๊ฒŒ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ๋„ค์š”.
๋์œผ๋กœ ์ข‹์€ ์ปจํ…Œ์ŠคํŠธ ์ œ๊ณตํ•ด์ฃผ์‹  ๋‹ˆ๊ผฌ์Œค, ๋ฆฐ๋‹˜๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋•๋ถ„์— ์ข‹์€ ๊ฒฐ๊ณผ๋ฌผ๋„ ์–ป๊ณ , ์ข‹์€ ๊ฒฝํ—˜๋„ ์Œ“์•˜์Šต๋‹ˆ๋‹ค.

๊ธด ๊ธ€ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. :)

11 comments