Community

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

โ† Go back
์ผ๋ฐ˜ ๋ถ€๋ฌธ / ๐Ÿ’ป ์ธ๊ฐ„๊ทน์žฅ ์งค ์ƒ์„ฑ๊ธฐ
โ€ข#twitter_cloneโ€ข
1 year ago

๊ฒฐ๊ณผ๋ฌผ URL :https://qhgus0174.github.io/SeriousMeme/

๋ฏธ๋ฆฌ๋ณด๊ธฐ ๐Ÿ‘‡

undefined

โœจ ์ž๊ธฐ์†Œ๊ฐœ

์•ˆ๋…•ํ•˜์„ธ์š” ์ด์ง์„ ์ค€๋น„์ค‘์ธ ์ฃผ๋‹ˆ์–ด ์›น ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค!

ํ’€ ์Šคํƒ ๊ฐœ๋ฐœ์ž์ด๊ณ  java, c#, JQuery ์œ„์ฃผ๋กœ๋งŒ ๊ฐœ๋ฐœํ•˜๋‹ค ์–ผ๋งˆ ์ „ JQuery ํ”„๋กœ์ ํŠธ๋ฅผ vue.js๋กœ ์ด์ „ํ•˜๋Š” ์ž‘์—…์„ ํ•˜๋ฉด์„œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋งค๋ ฅ์„ ๋Š๊ปด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ „ํ–ฅํ•  ์ค€๋น„๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

โœจ ์„œ๋น„์Šค ์†Œ๊ฐœ

KBS1 ํ”„๋กœ๊ทธ๋žจ "์ธ๊ฐ„๊ทน์žฅ" ์งค ์ƒ์„ฑ๊ธฐ์ž…๋‹ˆ๋‹ค! ์‚ฌ์ง„์„ ์ฒจ๋ถ€ํ•˜๊ณ  ๋Œ€์‚ฌ๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๐ŸŒ  ๋ฉ”์ธํ™”๋ฉด

undefined

์ดˆ๊ธฐ ํ™”๋ฉด์ž…๋‹ˆ๋‹ค. ๋กœ๊ทธ์ธ ์—†์ด๋„ ์ฝ๊ธฐ/์“ฐ๊ธฐ๋Š” ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ ํ™”๋ฉด๊ณผ ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์ด ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค.

ํ™”๋ฉด์„ ๋ฐ˜์œผ๋กœ ๋‚˜๋ˆ„์–ด ์™ผ์ชฝ ํ™”๋ฉด์€ ์งค์„ ์ƒ์„ฑํ•˜๋Š” ๊ตฌ์—ญ์ด๊ณ , ์˜ค๋ฅธ์ชฝ์€ ์‚ฌ์šฉ์ž๋“ค์ด ๊ณต์œ ํ•œ ์งค ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

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

๋งŒ๋“  ์งค์„ ์ž๋ž‘ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ firebase database์™€ storage์— ์Œ“์ž…๋‹ˆ๋‹ค.

๐ŸŒ  ๋กœ๊ทธ์ธ

undefined

์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ์˜ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋กœ๊ทธ์ธํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋‹ฌ์ฐฝ์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. react portal์„ ์ด์šฉํ•ด app ๋ฐ”๊นฅ์—์„œ ๋ Œ๋”๋ง ๋˜๋„๋ก ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

tab ํ˜•ํƒœ๋กœ ๋กœ๊ทธ์ธ, ๊ณ„์ • ์ƒ์„ฑ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SNS ๋กœ๊ทธ์ธ์€ ์–ด๋Š ํƒญ์ด๋“  ๋‹ค ๋ฉ๋‹ˆ๋‹ค! ๋กœ๊ทธ์ธ์„ ํ•˜๋ฉด ์ž์‹  ๊ฒŒ์‹œ๋ฌผ์€ ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๐ŸŒ  ์งค ์ƒ์„ฑ

undefined

์•„๋ž˜ ํ•ญ๋ชฉ๋“ค์— ์ž…๋ ฅ์„ ํ•˜๋ฉด ์ฒจ๋ถ€ํ•œ ์‚ฌ์ง„ ์œ„์— ๊ธ€์ž๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค!

๋‚ ์งœ, ์š”์ผ, ์‹œ๊ฐ„์€ ์˜ค๋Š˜ ๋‚ ์งœ๊ฐ€ ๋””ํดํŠธ ๊ฐ’์œผ๋กœ ์ดˆ๊ธฐํ™” ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.
๋‚ ์งœ์™€ ์ง์—… ์•ž ์ฒดํฌ๋ฐ•์Šค๋Š” ๊ฐ ํ•ญ๋ชฉ์„ ๋ณด์—ฌ์ค„ ์ง€ ๋ง์ง€ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
๋Œ€์‚ฌ1 ์•ž ์ฒดํฌ๋ฐ•์Šค๋Š” ์„ ํƒ ์‹œ ๊ธ€์ž๊ฐ€ ๋…ธ๋ž€์ƒ‰(์งˆ๋ฌธ ํ˜•ํƒœ)๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์ƒˆ๋กœ๊ณ ์นจ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์บ”๋ฒ„์Šค๊ฐ€ ์ดˆ๊ธฐํ™” ๋ฉ๋‹ˆ๋‹ค.
๋‹ค์šด๋กœ๋“œ ์‹œ ์ด๋ฏธ์ง€ ํŒŒ์ผ๋กœ ๋‹ค์šด๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ๊ณ , ์ž๋ž‘ํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋‚ด ์งค์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

input text ์ปดํฌ๋„ŒํŠธ๋ฅผ infield label๋กœ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํฌ์ปค์Šค ์‹œ ํ…Œ๋‘๋ฆฌ๊ฐ€ ๋ฐ๊ฒŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

๐ŸŒ  ๋ฆฌ์ŠคํŠธ

undefined

์ž๋ž‘ํ•˜๊ธฐ ๋ฆฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. ๋‚ด ๊ฒŒ์‹œ๋ฌผ์˜ ๊ฒฝ์šฐ ์ˆ˜์ •,์‚ญ์ œ ๋ฒ„ํŠผ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ˆ˜์ • ๊ธฐ๋Šฅ์€ ํ˜„์žฌ๋Š” ์ œ๋ชฉ๋งŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๊ณ  ์บ”๋ฒ„์Šค ์ˆ˜์ • ๊ธฐ๋Šฅ์€ ์ถ”ํ›„ ๊ตฌํ˜„ ํ•  ๊ฒƒ ์ž…๋‹ˆ๋‹ค!

์ž‘ํ’ˆ๋ช…, ์œ ์ € ํ”„๋กœํ•„ ์‚ฌ์ง„, ์œ ์ € ๋ช…์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค! ํšŒ์›๊ฐ€์ž… ์‹œ ๋ฆฌํ„ด๋˜๋Š” ์ •๋ณด๋ฅผ firebase user collection์— ๋‹ด์•˜์Šต๋‹ˆ๋‹ค. ๊ฐ’์ด ์—†๊ฑฐ๋‚˜, ๋น„๋กœ๊ทธ์ธ ์‚ฌ์šฉ์ž์ธ ๊ฒฝ์šฐ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.ย 

undefined

์ˆ˜์ •์‹œ ํ™”๋ฉด์ž…๋‹ˆ๋‹ค.

undefined

๐ŸŒ  ํ”„๋กœํ•„

undefined

ํ”„๋กœํ•„ ์‚ฌ์ง„๊ณผ ์ด๋ฆ„์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๊ณ  ์ž์‹ ์˜ ๊ฒŒ์‹œ๋ฌผ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

1. canvas๋กœ ์งค ๋งŒ๋“ค๊ธฐ

์งค ์ƒ์„ฑ์€ canvas์— ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์œผ๋กœ ๊ตฌํ˜„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” DOM์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์–ด useRef hook์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
canvas๋ฅผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋”ฐ๋กœ ๊ตฌํ˜„ํ–ˆ๋Š”๋ฐ, ์ž๋ž‘ํ•˜๊ธฐ ๋ฒ„ํŠผ๊ณผ ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ์„ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ๋„ฃ์„์ง€ ๋ฐ”๊นฅ์— ๋„ฃ์„ ์ง€ ๊ณ ๋ฏผํ•˜๋‹ค ๊ฒฐ๊ตญ ๋‚ด๋ถ€์— ๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค. ์ž์‹ state๋ฅผ ๋ถ€๋ชจ์—๊ฒŒ ๋„˜๊ธฐ๋Š” ๊ณผ์ •์„ ์ดํ•ดํ•˜๋Š”๋ฐ ์กฐ๊ธˆ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๊ณ  useState๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค!

2. ์ „์—ญ state ๊ด€๋ฆฌ

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

3. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๋„์ž…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•ด๋„ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋Š” ๋ถˆ์นœ์ ˆํ•˜๊ณ , ์–ด๋””์„œ ์–ด๋–ค ์˜ค๋ฅ˜๊ฐ€ ๋‚  ์ง€ ์˜ˆ์ธกํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉ ํ•ด ๋ณด๋‹ˆ ๋Ÿฐํƒ€์ž„ ์‹œ ์˜ค๋ฅ˜๋ฅผ ์–ด๋Š ์ •๋„ ์žก์•„์ฃผ์–ด ๋ฏธ๋ฆฌ ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ , ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ฝ์„ ๋•Œ ์˜๋ฏธ๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค. ๊ท€์ฐฎ๋‹ค๋Š” ์ ๋งŒ ๋นผ๋ฉด ์ข‹์•˜์–ด์š”ใ…Žใ…Žใ…Ž...

4. ๋น„๋กœ๊ทธ์ธ ์‚ฌ์šฉ์ž ๊ถŒํ•œ ์ œ์–ด

๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š์€ ์ƒํƒœ๋กœ storage์— ์ฒจ๋ถ€ ํŒŒ์ผ์„ ์ฝ๊ณ  ์“ฐ๋ ค๊ณ  ํ•˜์ž ๊ถŒํ•œ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฌ์Šต๋‹ˆ๋‹ค. Rules ์„ค์ •์—์„œ read, write๋Š” ๋ชจ๋‘ ํ—ˆ์šฉ์œผ๋กœ ๋ฐ”๊พธ์–ด ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ช‡ ์ค„ ์ž…๋ ฅ๋งŒ์œผ๋กœ ๊ถŒํ•œ ์„ค์ •์ด ๋๋‚œ๋‹ค๋Š”๊ฒŒ ๋†€๋ผ์› ์Šต๋‹ˆ๋‹ค.

5. CSS

CSS ๋„ˆ๋ฌด ํž˜๋“ค์—ˆ์–ด์š”....๐Ÿ˜ข ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌํ˜„ํ•˜๋Š”๊ฒŒ ๋ชฉํ‘œ์˜€๋Š”๋ฐ ๊ธฐ๋ณธ๊ธฐ๊ฐ€ ๋ถ€์กฑํ•ด์„œ ์ฒœ์ฒœํžˆ ๋งŒ๋“ค์–ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๊ทธ๋ž˜๋„ flex ๋ฐ•์Šค๋กœ ๋ฐฐ์น˜ํ•˜๋Š” ์žฌ๋ฏธ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค!

6. NoSQL(ํŽ˜์ด์ง•)

ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ ์„ ํƒ ์‹œ ํ•ด๋‹น ํŽ˜์ด์ง€ ๋ฒ”์œ„ ๋‚ด(4๊ฐœ)๋งŒ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ, query cursor์˜ startAt, endAt, limit์„ ์‚ฌ์šฉํ•ด ๋ดค๋Š”๋ฐ, ๋ฐ์ดํ„ฐ๋กœ ํ•„ํ„ฐ๋ฅผ ๊ฑธ๊ฑฐ๋‚˜ ์ •๋ ฌํ•˜๋Š” ๋Š๋‚Œ์ด๋ผ ์ƒ๊ฐ๋Œ€๋กœ ์ž˜ ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ๋Š” ์•„๋‹ˆ๋ผ ์ „์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํŽ˜์ด์ง•์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

โœจ ์•ž์œผ๋กœ์˜ ๊ณ„ํš

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

ํฐํŠธ๊ฐ€ ๊ฐ€๋” ์•ˆ๋ถˆ๋Ÿฌ์™€์ง€๋Š” ๋ฒ„๊ทธ๊ฐ€ ์žˆ๋Š”๋ฐ ์ˆ˜์ •ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค!๐Ÿ˜ณ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์œผ๋กœ๋Š” ์ฆ๊ฒจ์ฐพ๊ธฐ, ์ˆ˜์ •, ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง, ๋ฐ˜์‘ํ˜• css์„ ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

10 comments