Community

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

โ† Go back
[์ผ๋ฐ˜ ๋ถ€๋ฌธ] ๐Ÿ‘‰Twitter๊ฐ€ ๋˜๊ณ  ์‹ถ์—ˆ๋˜ Jwitter ๐Ÿ‘จโ€๐Ÿ’ป
โ€ข#twitter_cloneโ€ข
9 months ago

ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ  ํ—๋ ˆ๋ฒŒ๋–ก ๊ธ€์„ ์“ฐ๋‹ค๋ณด๋‹ˆ ๋งˆ์ง€๋ง‰ ์ฃผ์ž๊ฐ€ ๋œ ๊ฒƒ ๊ฐ™๋„ค์š”... ใ…Žใ…Ž
(์“ฐ๋‹ค๋ณด๋‹ˆ ๋ชจ๋ฅด๊ณ  ์ฐฝ์ด ๊บผ์กŒ๋Š”๋ฐ, ์ž๋™์ €์žฅ๋„ ๋˜๋”๋ผ๊ตฌ์š”.. ์งฑ... ๐Ÿ‘)
๊ธธ๋”๋ผ๋„, ์žฌ๋ฐŒ๊ฒŒ ๋ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

1. ์ž๊ธฐ์†Œ๊ฐœ

์•ˆ๋…•ํ•˜์„ธ์š”! ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๊ณ  ์žˆ๋Š”, ์ด์ œ ๋ง‰ ์กธ์—…์„ ์•ž๋‘๊ณ  ์žˆ๋Š” ํ•™์ƒ์ž…๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์ฝ”๋”ฉ๋“ค ๋ณด๋‹ค๋„ ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•œ ๋Œ€๋กœ ๋ฐ”๋กœ ๋ฐ”๋กœ ๋ณด์—ฌ์ง€๋Š” ์›น ๊ฐœ๋ฐœ์— ํฅ๋ฏธ๋ฅผ ๋Š๋ผ๊ณ , html, css, javascript๋ฅผ ์ ‘ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ์›น ๊ฐœ๋ฐœ ๋ถ„์•ผ๋ฅผ ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

React๋ฅผ ์ œ๋Œ€๋กœ ๊ณต๋ถ€ํ•œ ์ง€๋Š” ๋ฐ˜๋…„์ด ์•ˆ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. React๊ฐ€ ๋ฐฐ์šฐ๊ธฐ ์‰ฝ๋‹ค๊ณ ๋Š” ํ•˜์ง€๋งŒ, ๋„๋ฌด์ง€ ๊ณต๋ถ€ํ•˜๊ณ  ๊ณต๋ถ€ํ•ด๋„ ๋ง‰ํžˆ๋Š” ๋ถ€๋ถ„์ด ๊ณ„์†ํ•ด์„œ ์ƒ๊ธฐ๋ฉด์„œ, ๋ง‰๋ง‰ํ•จ์„ ๋Š๋ผ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋˜ ์ค‘, ๋‹ˆ๊ผฌ๋‹˜์˜ ์œ ํŠœ๋ธŒ๋ฅผ ์ฑ™๊ฒจ๋ณด๋‹ค๊ฐ€ ์ธ์Šคํƒ€ ํŒ”๋กœ์šฐ๊นŒ์ง€ ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ๊ฑฐ๊ธฐ์„œ Twitter ํด๋ก  ์ฝ”๋”ฉ์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ํ•˜๋‚˜ํ•˜๋‚˜ ๋”ฐ๋ผํ•ด๋ณด๋ฉด์„œ ์ด ์ปจํ…Œ์ŠคํŠธ์— ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜ƒ

2. ์„œ๋น„์Šค ์†Œ๊ฐœ

๋ฐฐ์šด ๊ฑธ ํ† ๋Œ€๋กœ Twitter์™€ ์ „ํ˜€ ๋‹ค๋ฅด๊ฒŒ ๊ตฌํ˜„์„ ํ•ด๋ณผ๊นŒ ์‹ถ๋‹ค๊ฐ€๋„, 'Twitter๋‚˜ ์ œ๋Œ€๋กœ ํด๋ก ํ•ด๋ณด์ž๋Š” ๋งˆ์Œ'์œผ๋กœ ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

(Twitter์™€ ์ œ ์ด๋ฆ„์„ ํ•ฉ์ณ Jwitter๋ผ๊ณ  ์ด๋ฆ„ ์ง€์—ˆ๊ณ , Tweet -> Jweet ์œผ๋กœ ๋ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.)

ํ•œ ๊ฒƒ์— ๋น„ํ•ด ์„ค๋ช…์ด ๊ฝค ๊ธธ์ง€๋งŒ, ์–ด์ฐจํ”ผ ๊ฒฐ๊ณผ๋ฌผ ์ •๋ฆฌ๋„ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฒธ์‚ฌ๊ฒธ์‚ฌ ํ•œ๋ฒˆ ์ž‘์„ฑํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

โœ… ๊ฒฐ๊ณผ๋ฌผ URL : https://jeeseongmin.github.io/jwitter
โœ… ๊ฒฐ๊ณผ๋ฌผ ์บก์ณ ๋ฐ ๊ธฐ๋Šฅ ์†Œ๊ฐœ :

(1) ๋กœ๊ทธ์ธ ํ™”๋ฉด

undefined

๋กœ๊ทธ์ธ์€ ํŠธ์œ„ํ„ฐ ํ™”๋ฉด๊ณผ ์ตœ๋Œ€ํ•œ ๋น„์Šทํ•˜๊ฒŒ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ๊ฐ€์ž…ํ•˜๊ธฐ๋ฅผ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด, ํšŒ์›๊ฐ€์ž…์„ ์ง์ ‘ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋กœ๊ทธ์ธ ํ™”๋ฉด๊ณผ ํšŒ์›๊ฐ€์ž… ํ™”๋ฉด์„ ๊ตฌ๋ถ„ํ•ด๋†“์•˜์Šต๋‹ˆ๋‹ค.

(2) ๋ฉ”์ธ ํ™”๋ฉด ๋ฐ Leftbar

๋ฉ”์ธ ํ™”๋ฉด๋„ ์‹ค์ œ ํŠธ์œ„ํ„ฐ ํŽ˜์ด์ง€๋ฅผ ์—ด์‹ฌํžˆ ์ฐธ๊ณ ํ•ด์„œ ๋งŒ๋“ค์–ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.
์ขŒ์ธก์— Leftbar๋Š” Notification๊ณผ more์„ ์ œ์™ธํ•˜๋ฉด ๋ชจ๋‘ ํŽ˜์ด์ง€ ์ด๋™์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

(2-1) Home

Home์—์„œ๋Š” ๋ชจ๋“  ํŠธ์œ„ํ„ฐ ๊ฒŒ์‹œ๋ฌผ์ด ์ž‘์„ฑ๋œ ์‹œ๊ฐ„ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ ฌ์ด ๋˜์–ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

undefined

(2-2) Explore๋Š” ๋ง๊ทธ๋Œ€๋กœ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๋Š” ๋‘ ๊ฐœ์˜ ํƒญ์œผ๋กœ ๋‚˜๋‰˜๊ฒŒ ๋˜๋Š”๋ฐ, Jweets ํƒญ๊ณผ Users ํƒญ์ž…๋‹ˆ๋‹ค.
Jweets ํƒญ์€ ์œ ์ €๋“ค์ด ๊ฒŒ์‹œํ•œ ๊ฒŒ์‹œ๋ฌผ๋“ค์„ ๋žœ๋คํ•˜๊ฒŒ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๊ณ ,

undefined

Users ํƒญ์€ ์–ด๋–ค ์œ ์ €๋“ค์ด ์žˆ๋Š”์ง€ ๋žœ๋คํ•˜๊ฒŒ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

(2-3) ๐Ÿ“—Bookmark ๋Š” ๋ชจ์•„๋ณด๊ณ  ์‹ถ์€ Jweet๋“ค์ด ์žˆ์œผ๋ฉด Bookmark ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋Š”๋ฐ, ๋‚ด๊ฐ€ Bookmark ํ•œ Jweet๋“ค์„ ํ•œ๊บผ๋ฒˆ์— ๋ณผ ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

์•„๋ž˜ Bookmark ํ‘œ์‹œ๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ์‚ฌ๋ผ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

undefined

(2-4) Popular ํŽ˜์ด์ง€๋Š” ์ข‹์•„์š” ๊ฐœ์ˆ˜์— ๋”ฐ๋ผ ์ •๋ ฌ๋œ, ์ธ๊ธฐ ๋งŽ์€ Jweet๐Ÿ˜๋“ค์„ ์ƒ๋‹จ๋ถ€ํ„ฐ ๋ณผ ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ํ˜„์žฌ ๋ฐ˜์‘์ด ์ข‹์€ ๊ฒŒ์‹œ๋ฌผ๋“ค์„ ๋ชจ์•„๋ณผ ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

undefined

(2-5) Profile ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ Profile ํŽ˜์ด์ง€๊ฐ€ ๊ฐ€์žฅ ๋งˆ์Œ์— ๋“œ๋Š”๋ฐ, ๊ทธ ์ด์œ ๋Š” ์•„๊ธฐ์ž๊ธฐํ•œ ๊ธฐ๋Šฅ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๐Ÿ˜

undefined

๋จผ์ € ๋ฐฐ๊ฒฝ์‚ฌ์ง„์€ ๊ณ ์ •์œผ๋กœ ํ•ด๋‘์—ˆ์ง€๋งŒ, ์šฐ์ธก์˜ [Edit Profile] ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด ํ”„๋กœํ•„ ์‚ฌ์ง„์„ ์–ธ์ œ๋“ ์ง€ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€, ์ด๋ฆ„, ์„ค๋ช… ์ด ์„ธ ๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

undefined

๊ทธ๋ฆฌ๊ณ  ์œ ์ €์˜ ํ”„๋กœํ•„์—์„œ๋Š” ์‹ค์ œ Twitter์ฒ˜๋Ÿผ ๊ทธ ์‚ฌ๋žŒ์ด ์–ด๋–ค Jweet์„ ์˜ฌ๋ ธ๊ณ , ์–ด๋–ค Jweet์— like๋ฅผ ํ‘œ์‹œํ–ˆ๋Š”์ง€๋ฅผ ๋ชจ๋‘ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

(2-6) Jweet ์ž‘์„ฑ ๋ฒ„ํŠผ

์™ผ์ชฝ ์ค‘ํ•˜๋‹จ์„ ๋ณด๊ฒŒ ๋˜๋ฉด, Jweet์ด๋ผ๊ณ  ์จ์žˆ๋Š” ๋ณด๋ผ์ƒ‰ ๋ฒ„ํŠผ์ด ๋ณด์ž…๋‹ˆ๋‹ค.

์ด ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด, ํ˜„์žฌ ์žˆ๋Š” ๊ณณ์—์„œ ๋ชจ๋‹ฌ ์ฐฝ์„ ํ†ตํ•ด Jweet์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

์ž‘์„ฑ๋œ Jweet์€ ๋ฐ”๋กœ ์—…๋กœ๋“œ ๋ฉ๋‹ˆ๋‹ค.

๋งŒ์•ฝ ์ž‘์„ฑํ•˜๋‹ค๊ฐ€ ๋ชจ๋‹ฌ์„ ๋„๋ ค๊ณ  ํ•˜๊ฑฐ๋‚˜, ์ขŒ์ธก ์ƒ๋‹จ์˜ X ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €๋‹ค๋ฉด ํ•ด๋‹น Jweet์„ ๋ฒ„๋ฆด ๊ฒƒ์ธ์ง€ ๋ฌผ์–ด๋ณด๋Š” ๋ชจ๋‹ฌ์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

undefined

ํ•ด๋‹น ๋ชจ๋‹ฌ์—์„œ๋„ Discard๋ฅผ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด, ์ž‘์„ฑ์ค‘์ธ Jweet์ด ์˜๊ตฌ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค.

(2-7) Profile ๋ชจ๋‹ฌ

์ขŒ์ธก ํ•˜๋‹จ์„ ๋ณด๊ฒŒ ๋˜๋ฉด, ํ˜„์žฌ ๋กœ๊ทธ์ธ๋˜์–ด์žˆ๋Š” ํ”„๋กœํ•„์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด, Logout ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„ํŠผ์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

undefined

๋กœ๊ทธ์•„์›ƒ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด, ๋กœ๊ทธ์•„์›ƒ์„ ํ•  ๊ฒƒ์ธ์ง€ ๋ฌผ์–ด๋ณด๋Š” ๋ชจ๋‹ฌ์ด ๋‚˜ํƒ€๋‚˜์„œ ์‹ค์ œ๋กœ ๋กœ๊ทธ์•„์›ƒ์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(3) Rightbar

Rightbar๋Š” ์–ด๋–ป๊ฒŒ ๊ตฌ์ƒ์„ ํ• ์ง€ ๊ฝค ๊ณ ๋ฏผ์„ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

๊ณ ๋ฏผ ๋์— ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ, Jweets ์ถ”์ฒœ ๊ธฐ๋Šฅ, Users ์ถ”์ฒœ ๊ธฐ๋Šฅ์„ ์ƒ๊ฐํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

(3-1) Search

๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์€ Jweet๊ณผ User๋ฅผ ๋ชจ๋‘ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

undefined

๋จผ์ €, ์กด์žฌํ•˜๋Š” User name text๋ฅผ ์ž…๋ ฅํ•˜๊ฒŒ ๋˜๋ฉด, ํ•ด๋‹น ์œ ์ €์˜ ์ •๋ณด๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์œ ์ € ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด ํ•ด๋‹น ์œ ์ €์˜ ํ”„๋กœํ•„ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ‘๋‹ˆ๋‹ค.

undefined

๋‹ค์Œ์œผ๋กœ, ์กด์žฌํ•˜๋Š” Jweet text๋ฅผ ์ž…๋ ฅํ•ด๋ณด๋ฉด, ํ˜„์žฌ ํ•ด๋‹น text๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” Jweet๋“ค์„ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” Jweet ์ž‘์„ฑ์ž์˜ ํ”„๋กœํ•„ ์‚ฌ์ง„๋„ ๊ฐ™์ด ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค.

์ด ๋˜ํ•œ Jweet ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น Jweet์˜ Detail ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

undefined

์ด ๋ถ€๋ถ„์€ ์žฌ๋ฏธ์‚ผ์•„ ๋„ฃ์–ด๋ณธ ๊ฑด๋ฐ, all์ด๋ผ๋Š” text๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ํ˜„์žฌ ์กด์žฌํ•˜๋Š” ๋ชจ๋“  User์™€ Jweet๋“ค์„ ๋ชจ๋‘ ๋‚˜ํƒ€๋‚ด์ค๋‹ˆ๋‹ค.

scroll ๋ฐ”์— ์งค๋ ค์„œ ์ค‘๊ฐ„ ๋ถ€๋ถ„์„ ์บก์ณํ•ด๋ดค๋Š”๋ฐ, ์‹ค์ œ๋กœ ๋“ค์–ด๊ฐ€์„œ ๊ฒ€์ƒ‰ํ•ด๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค ใ…Žใ…Ž

undefined

(3-2, 3-3) Jweet ์ถ”์ฒœ, User ์ถ”์ฒœ

์›๋ž˜ Twitter์ฒ˜๋Ÿผ ์–ด๋–ค ๊ธฐ์ค€์„ ๊ฐ€์ง€๊ณ  ์ถ”์ฒœ ๊ธฐ๋Šฅ์„ ๋„ฃ์–ด์•ผ ํ•˜์ง€๋งŒ, ์œ ์ € ์ถ”์ฒœ์„ ํ• ๋งŒํผ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ œ ๋ง˜๋Œ€๋กœ ๊ธฐ์ค€์„ ์ •ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.. ใ…Žใ…Ž

์ผ๋‹จ์€ user ์ถ”์ฒœ๊ณผ Jweet ์ถ”์ฒœ ๋ชจ๋‘ ๋žœ๋คํ•œ ์ˆœ์„œ๋กœ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์ƒ์„ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ [show more...] ์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด, ์œ„์—์„œ ์†Œ๊ฐœํ–ˆ๋˜ Explore ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Jweet ์ถ”์ฒœ์—์„œ๋Š” ์•„๋ž˜์— Popular Jweets์ด๋ผ๋Š” ์›Œ๋”ฉ์ด ๋ณด์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. Like๊ฐ€ ๋งŽ์€ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ ฌ์„ ํ–ˆ์Œ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

undefined

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

undefined

(4) ๊ธฐํƒ€ Component ์†Œ๊ฐœ

์ง€๊ธˆ๊นŒ์ง€๋งŒ ํ•ด๋„ ์ƒ๋‹นํžˆ ๋งŽ์€ ์บก์ณ๋•Œ๋ฌธ์— ์Šคํฌ๋กค์ด ๊ธธ์–ด์กŒ์„ํ…Œ๋‹ˆ, ์ด์™ธ์˜ component๋“ค์€ ๋น ๋ฅด๊ฒŒ ์†Œ๊ฐœํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.undefined

(4-1) Like ๊ธฐ๋Šฅ

Jweet์— ์œ ์ €๋งˆ๋‹ค ํ•œ ๋ฒˆ์˜ ์ข‹์•„์š” ํ‘œ์‹œ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(4-2) Reply ๊ธฐ๋Šฅ

Jweet์— Reply๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Reply๋„ Jweet๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์‚ฌ์ง„๊ณผ ์ด๋ชจ์ง€ ์ž…๋ ฅ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. (์ด๋ชจ์ง€ ๋ถ€๋ถ„์€ ๋ฌด์กฐ๊ฑด ๋์— ์ถ”๊ฐ€๋˜๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ•ด์„œ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ๊ณ ์ณ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค..)

(4-3) Detail ํŽ˜์ด์ง€

Jweet์„ ์ž์„ธํžˆ ๋“ค์—ฌ๋‹ค๋ณผ ์ˆ˜ ์žˆ๋Š” Detail ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

undefined

Reply๋Š” Home ํ™”๋ฉด์—์„œ ๋ชจ๋‹ฌ๋กœ๋„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Jweet ํ•˜๋‹จ ์ขŒ์ธก์— ๋Œ“๊ธ€ ํ‘œ์‹œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

undefined

(๊ธธ์—ˆ์ง€๋งŒ, ๋๊นŒ์ง€ ๋ด์ฃผ์‹  ๋ถ„๋“ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜‚)

3. ๊ฐœ๋ฐœ ๊ณผ์ • (์–ด๋ ค์› ๋˜ ์ ๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•)

์–ด๋ ค์› ๋˜ ๋ถ€๋ถ„์€ firestore๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ˜์‘ํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฒŒ ์ƒ๊ฐ๋ณด๋‹ค ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๋จธ๋ฆฟ์†์—์„œ๋Š” ๋‹น์—ฐํžˆ ๋ฐ˜์‘ํ•  ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๊ฒŒ ์•ˆ๋˜๊ณ , '์ด Component๊ฐ€ ์•ˆ๋˜๋‹ˆ๊นŒ, ์ €๊ฑฐ๋„ ๊ณ ์ณ์•ผ๋˜๋„ค?' ๊ฐ€ ๋Š์ž„์—†์ด ๋จธ๋ฆฟ์†์„ ๊ดด๋กญํ˜”์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜๋„ Firestore ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด์„œ ์ด๋ ‡๊ฒŒ๋„ ํ•ด๋ณด๊ณ , ์ €๋ ‡๊ฒŒ๋„ ํ•ด๋ณด๋ฉด์„œ ์ ์  ์—๋Ÿฌ๊ฐ€ ๊ฑทํ˜€๊ฐ€๋Š” ๊ณผ์ •์ด ๋ณด๋žŒ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์‹ ๊ฒฝ ์ผ๋˜ ๋ถ€๋ถ„์€,
'์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์œ ์ € ์ž…์žฅ์—์„œ ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ?',
'์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ํŠธ์œ„ํ„ฐ์™€ ์ตœ๋Œ€ํ•œ ๋น„์Šทํ•˜๊ฒŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„๊นŒ?' ์˜€์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ์ƒ๊ฐ์„ ๊ณ„์† ํ•˜๋‹ค๋ณด๋‹ˆ ๋งŒ๋“ค์–ด ๋†“์€ ๊ธฐ๋Šฅ์ด ๋ง˜์— ์•ˆ๋“ค๊ณ , ๋•๋ถ„์— ์˜ˆ์ •ํ•ด๋†“์•˜๋˜ ์—ฌ๋Ÿฌ ์ž‘์—…(Follow, ReJweet, ์—๋Ÿฌ ๋ฐ ๋ฒ„๊ทธ ์ˆ˜์ •) ์„ ๋’ท์ „์œผ๋กœ ๋ฏธ๋ฃจ๊ฒŒ ๋˜์—ˆ๊ณ ... ์ œ์ถœํ•˜๊ฒŒ ๋˜์—ˆ๋„ค์š”.

์•„์ง๋„ ์•„์‰ฌ์›€์ด ์žˆ์ง€๋งŒ, ์ด๋ ‡๊ฒŒ ์ •ํ•ด์ง„ ๊ธฐ๊ฐ„์ด ์—†์—ˆ๋‹ค๋ฉด ์•„๋งˆ๋„ ๋์—†๋Š” ์š•์‹ฌ์— ํ”„๋กœ์ ํŠธ๋ฅผ ๋๋งˆ์น˜์ง€ ๋ชปํ–ˆ์„ ์ˆ˜๋„...

์•„๋ฌดํŠผ ์ด๋ฒˆ ํŠธ์œ„ํ„ฐ ํด๋ก  ํ”„๋กœ์ ํŠธ๋Š” ์–ด๋–ค ํด๋ก  ํ”„๋กœ์ ํŠธ๋ณด๋‹ค๋„ ์žฌ๋ฐŒ๊ฒŒ ๋งˆ๋ฌด๋ฆฌ๋˜์—ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์„œ ๋ฟŒ๋“ฏํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ์— ์ฒ˜์Œ ์‚ฌ์ดํŠธ์— ๊ฐ€์ž…ํ•ด์„œ ๋‹ˆ๊ผฌ๋‹˜์˜ ์˜์ƒ ๊ฐ•์˜๋ฅผ ํŠธ์œ„ํ„ฐ ํด๋ก  ์ฝ”๋”ฉ์œผ๋กœ ์ฒ˜์Œ ์ ‘ํ–ˆ๋Š”๋ฐ, ์ƒ๋‹นํ–ˆ์Šต๋‹ˆ๋‹ค... ์ €๋งŒ ์•Œ๊ณ  ์‹ถ์„ ์ •๋„๋กœ์š”..!!

์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๐Ÿ˜

4. ์•ž์œผ๋กœ ๊ณ„ํš

์ผ๋‹จ์€, ๋‹ค๋ฅธ ๋ถ„๋“ค์˜ ์ž‘ํ’ˆ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์‚ดํŽด๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ใ…Žใ…Ž

๊ทธ๋ฆฌ๊ณ  ์ž๊ณ  ์ผ์–ด๋‚˜์„œ ์™„์„ฑ์‹œํ‚ค์ง€ ๋ชปํ–ˆ๋˜ ๊ธฐ๋Šฅ๋“ค์„ ๋งˆ๋ฌด๋ฆฌํ•  ๊ฒƒ์ด๊ตฌ์š”.

์ดํ›„์—๋Š” Javascript๊ฐ€ ํƒ„ํƒ„ํ•˜์ง€ ๋ชปํ•˜๋‹ค๊ณ  ๋Š๋ผ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ˆ๊ผฌ๋‹˜์˜ ๋ฐ”๋‹๋ผ Javascript ๊ฐ•์˜์™€ ํ•จ๊ป˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋“ค๋„ ์Šฌ๋ฉฐ์‹œ ๋“ค์—ฌ๋‹ค๋ณด๋ฉด์„œ ์—ด๊ณตํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

๋ฆฐ๋‹˜๊ณผ ๋‹ˆ๊ผฌ๋‹˜, ์ปจํ…Œ์ŠคํŠธ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•˜๊ณ , ํ•จ๊ป˜ ์ปจํ…Œ์ŠคํŠธํ–ˆ๋˜ ๋ถ„๋“ค๋„ ๊ณ ์ƒํ•˜์…จ๋‹ค๋Š” ๋ง ์ „ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค! ๐Ÿ‘Š

18 comments