๋ณธ๋ฌธ์œผ๋กœ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์–ธ์ œ์จ?
1. ์•„์ด๋””์–ด๋ฅผ ๋น ๋ฅด๊ฒŒ ํ…Œ์ŠคํŠธํ•ด์•ผํ•  ๋•Œ 
2. ์„œ๋ฒ„, DB์— ์‹œ๊ฐ„๊ณผ ๋ˆ์„ ๋‚ญ๋น„ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ

 

๋ฐฑ์•ค๋“œ ๊ธฐ๋Šฅ ํฌ๊ด„ ๊ธฐ๋Šฅ ์ œ๊ณตํ•œ๋‹ค.
= AWS amplify


Firebase๋Š” ๋ชจ๋“  ํ”Œ๋ ›ํผ์„ ํ”„๋กœ์ ํŠธ ๊ตฌ์ถ• ์‹œ ์ž๋™์ ์œผ๋กœ ๋งŒ๋“ค์–ด ์ค€๋‹ค. ๋˜ํ•œ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฆฌ๋ˆ…์Šค ๋ช…๋ น์–ด๋ฅผ ์•Œ ํ•„์š”๋„ ์—†์œผ๋ฉฐ ๋„๋ฉ”์ธ์„ ๊ตฌ์ž…ํ•  ํ•„์š”๋„ ์—†๊ณ  ๊ฐœ๋ฐœํ•˜๋Š” ๋™์•ˆ์—๋Š” ์„œ๋ฒ„๋ฅผ ๊ตฌ์ž…ํ•  ํ•„์š” ์—†๋‹ค.  ์ด๋ฅผ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์™€ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์˜ ๊ฒฝ๊ณ„๊ฐ€ ๋ชจํ˜ธํ•ด ์งˆ ๊ฒƒ์ด๋ฉฐ ์ ์€ ๋น„์šฉ์œผ๋กœ ๋งค์šฐ ์ข‹์€ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

 

FireBase์˜ ๋Œ€ํ‘œ์ ์ธ ๊ธฐ๋Šฅ

์ธ์ฆ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค, ์Šคํ† ๋ฆฌ์ง€, ์›๊ฒฉ ๊ตฌ์„ฑ, ํ‘ธ์‹œ ์•Œ๋žŒ์ด ์žˆ๋‹ค

 

FireBase์˜ ์žฅ์ 

1) ์ธ์ฆ ์‹œ์Šคํ…œ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

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

 

2) FireBase๋Š” NoSQl ๊ธฐ๋ฐ˜์˜ 3์„ธ๋Œ€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ž…๋‹ˆ๋‹ค.

Document ํ˜•์‹์˜ ๋น ๋ฅด๊ณ  ๊ฐ„ํŽธํ•œ NoSQL๊ธฐ๋ฐ˜์˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋Š” ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ๋“ค๊ณผ ๋‹ค๋ฅด๊ฒŒ RTSP(Real Time Stream Protocol) ๋ฐฉ์‹์˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.  ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ์†Œ์ผ“ ๊ธฐ๋ฐ˜ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด์„œ ํ†ต์‹ ํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค ๋น„์•ฝ์ ์œผ๋กœ ์ฝ”๋“œ ์–‘์ด ์ค„๊ฒŒ๋˜์–ด ์ฝ”๋“œ ๋ช‡ ์ค„๋กœ๋„ ์›ํ•˜๋Š” ๊ตฌ์„ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

3) ์›๊ฒฉ ๊ตฌ์„ฑ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. 

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

 

4) ์ฝ˜์†”์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ฝ˜์†”์ด๋ผ๋Š” ์šฉ์–ด๋Š” ์‰ฝ๊ฒŒ ๋งํ•ด์„œ ์„œ๋ฒ„ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์•ฑ์˜ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด ๋ฆฌ๋ˆ…์Šค, FTP, MySQL(๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค), Node.JS ์„œ๋ฒ„ ํ˜น์€ Spring ์„œ๋ฒ„, ํ‘ธ์‹œ๋ณด๋‚ด๊ธฐ  API๋งŒ ๊ตฌ์ถ•ํ•  ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ด ๋ชจ๋“  ๊ฒƒ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํšŒ์‚ฌ๋‚˜ ์กฐ์ง์— ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋ฆฌ๋ˆ…์Šค๋‚˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค, ์„œ๋ฒ„๋ฅผ ๋‹ค๋ฃฐ ์ค„ ์•ˆ๋‹ค๋ฉด ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€๊ฐ€ ํ•„์š”์—†์„ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๊ทธ๋ ‡๊ฒฝ์šฐ๊ฐ€ ๋งŽ์ง€์•Š๊ณ  ๋˜ํ•œ ์ ‘๊ทผ ๋ณด์•ˆ์„ ์œ„ํ•ด์„œ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์•ฑ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ์•ฑ๊ฐœ๋ฐœ์ž ๋ฟ์•„๋‹ˆ๋ผ ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž๊นŒ์ง€ ํ•„์š”ํ•ด์ง‘๋‹ˆ๋‹ค. ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค๊ธฐ์œ„ํ•ด ๋ฐฐ๋ณด๋‹ค ๋ฐฐ๊ผฝ์ด ๋” ์ปค์ ธ๋ฒ„๋ฆด์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ FireBase๋Š” ์ด ๋ชจ๋“  ๊ฒƒ์„ ์ง€์›ํ•ด์ค๋‹ˆ๋‹ค.

 

5) Analytics๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

 

FireBase์˜ ๋‹จ์ 

1) Firebase๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ ์œ ์ €๋“ค์ด ํ•˜๋Š” ๋ง์€ ์„œ๋ฒ„์˜ ์‘๋‹ต์†๋„๊ฐ€ ์ข…์ข… ๋А๋ ค์ง„๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

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

 

2) Firebase์˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์ธ FireStore(์‹ ๋ฒ„์ „ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค)๋‚˜ RealTimeDatabase(๊ตฌ๋ฒ„์ „ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค) ๋ชจ๋‘ ์ฟผ๋ฆฌ๊ฐ€ ๊ต‰์žฅํžˆ ๋นˆ์•ฝํ•ฉ๋‹ˆ๋‹ค. SQL์— ์ต์ˆ™ํ•œ ์‚ฌ๋žŒ๋“ค์€ Firebase ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๊ต‰์žฅํžˆ ๋‹นํ™ฉํ•ด ํ•  ๊ฒƒ์ด๋‹ค.  ๊ทธ ํ”ํ•œ  OR ๋ฌธ์œผ๋กœ๋„ ๊ฒ€์ƒ‰๋˜์ง€ ์•Š์œผ๋ฉฐ LIKE ๋ฌธ๋„ ์กด์žฌํ•˜์ง€ ์•Š์•„์„œ ๋น„์Šทํ•œ ๊ธ€์ž๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์—†๋‹ค. ๊ทธ๋ž˜์„œ Firebase๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๋“ค์€ ์ด ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€์„œ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ธฐ๊ธฐ์—์„œ ํ•„ํ„ฐ๋งํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ๋‹ค. 

 

onshapshot

db๋ฐ”๋€Œ๋Š”๊ฑธ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์•Œ๋ ค์ค€๋‹ค. shapshot ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๋ณ€ํ™”๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ์•Œ๋ฆผ์„ ๋ฐ›๋Š” ์—ญํ• . React์—์„œ onSnapshot์„ ์–ด๋–ป๊ฒŒ ๋ถ™์—ฌ์•ผํ•  ์ง€ ๊ณ ๋ฏผ์ด์—ˆ๋Š”๋ฐ... Listener๋ผ๋Š” ๋ง์— ๊นจ๋‹ฌ์Œ์„ ์–ป์—ˆ๋‹ค. useEffect์˜€๋‹ค.

 

๊ฐ„ํŽธํ•œ ๊ธฐ๋Šฅ ์ œ๊ณต

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

 


 

1. firbaseํŽ˜์ด์ง€ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ
2. npm install --save firebase
3. firebase.js ํŒŒ์ผ ์ƒ์„ฑ ํ›„ configuration ๋ณต๋ถ™
4. https://www.npmjs.com/package/firebase

 

firebase

Firebase JavaScript library for web and Node.js

www.npmjs.com

 

 

๋ฐ˜์‘ํ˜•

'๐ŸŒš Back > โœจ Firebase' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Firebase Cloud Function Deploy  (0) 2021.08.20