/chat-desktop-app

๐Ÿ“ฒ nextron๊ณผ firebase๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•œ ๋ฐ์Šคํฌํƒ‘ ์ฑ„ํŒ… ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.

Primary LanguageTypeScript

Chat Desktop App

nextron๊ณผ firebase๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์Šคํฌํƒ‘ ์ฑ„ํŒ… ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.

  • ํšŒ์›๊ฐ€์ž…
  • ๋กœ๊ทธ์ธ
  • ์œ ์ € ๋ชฉ๋ก
  • 1: 1 ์ฑ„ํŒ…
  • ๊ทธ๋ฃน์ฑ„ํŒ…

๋ชฉ์ฐจ

๊ตฌํ˜„ ๋‚ด์šฉ

์ „์ฒด ๊ตฌ์กฐ

  • ํŒŒ์ด์–ด ๋ฒ ์ด์Šค์™€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๊ฐ•ํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋˜์ง€ ์•Š๋„๋ก ํ•˜๋Š”๋ฐ ์ง‘์ค‘ํ•ด์„œ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • Repository ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์—ฌ ์™ธ๋ถ€ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋กœ์ง์„ ์ถ”์ƒํ™”ํ•˜์—ฌ ๋ฐ์ดํ„ฐ ์ ‘๊ทผ ๋กœ์ง๊ณผ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๋ถ„๋ฆฌํ•˜๋Š”๋ฐ ์ง‘์ค‘ํ•ด์„œ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ์กด์— ์ปดํฌ๋„ŒํŠธ์— ๊ฐ•ํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋˜์–ด ์žˆ๋˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ปค์Šคํ…€ ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ฐ ๋กœ์ง์ด ์žฌ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.


๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…

  • Firebase์˜ Authentication์„ ์‚ฌ์šฉํ•ด ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • react-hook-form๊ณผ yup์„ ์‚ฌ์šฉํ•ด ์ž…๋ ฅ๊ฐ’์˜ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  


1:1, 1:n ์ฑ„ํŒ…

  • Firebase store์˜ onSnapshot ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค๋ฅผ ๊ด€์ฐฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • repository์— rxjs์˜ subject๋ฅผ ๋‘์–ด ์ปดํฌ๋„ŒํŠธ์—์„œ ์ง์ ‘์ ์œผ๋กœ onSnapshot ๋ฉ”์†Œ๋“œ์— ์—ฐ๊ฒฐ๋˜์ง€ ์•Š๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

  


๊ทธ๋ฃน ์ฑ„ํŒ…๋ฐฉ ์ƒ์„ฑ

  • ์ œ๋ชฉ๊ณผ ์ดˆ๋Œ€ํ•  ์œ ์ €๋ฅผ ์„ ํƒํ•˜์—ฌ ๊ทธ๋ฃน ์ฑ„ํŒ…๋ฐฉ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  


์œ ์ € ๋ฆฌ์ŠคํŠธ, ๋‚˜์˜ ์ฑ„ํŒ… ๋ฆฌ์ŠคํŠธ. ์˜คํ”ˆ ์ฑ„ํŒ… ๋ฆฌ์ŠคํŠธ

ํšŒ๊ณ 

  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ตฌ์ฒด์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(ํŒŒ์ด์–ด ๋ฒ ์ด์Šค)์— ์˜์กดํ•˜์ง€ ์•Š๋„๋ก ํ•˜๊ธฐ ์œ„ํ•ด ๊ณ ๋ฏผํ•˜๋Š” ๊ณผ์ •์ด ์ฆ๊ฑฐ์› ์Šต๋‹ˆ๋‹ค.
  • ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๊ณผ ๋ฐ์ดํ„ฐ ์ ‘๊ทผ ๋กœ์ง์˜ ๋ถ„๋ฆฌ๊ฐ€ ๋ฏธํกํ•œ ๊ฒƒ ์•„์‰ฝ์Šต๋‹ˆ๋‹ค. repository์— ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ์Šค๋ฉฐ๋“  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ์•ž์œผ๋กœ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด repository๋กœ ์Šค๋ฉฐ๋“  ๋ถ€๋ถ„ ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ๊ฐ€ ์ œ๋Œ€๋กœ ์ ์šฉ๋˜์ง€ ์•Š์€ ๋ถ€๋ถ„์„ ์ฐพ์•„ ๋ฆฌํŒฉํ„ฐ๋ง์„ ์ง„ํ–‰ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.
  • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ์ปดํฌ๋„ŒํŠธ์™€ ์ œ๋Œ€๋กœ ๋ถ„๋ฆฌ๋˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ์ˆ  ์Šคํƒ

์‹คํ–‰๋ฐฉ๋ฒ•

  1. ํ”„๋กœ์ ํŠธ๋ฅผ ํด๋ก ํ•ฉ๋‹ˆ๋‹ค.
git clone https://github.com/hyejineee/maumlab-assignment.git
  1. ํด๋ก ํ•œ ํ”„๋กœ์ ํŠธ ๋‚ด๋ถ€๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
cd maumlab-assignment
  1. ์˜์กด ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.
yarn
  1. ํŒŒ์ด์–ด ๋ฒ ์ด์Šค ์‚ฌ์šฉ์„ ์œ„ํ•ด renderer ํด๋” ํ•˜์œ„์— .env ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. .env ํŒŒ์ผ์˜ ๋‚ด์šฉ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
# firebase 
NEXT_PUBLIC_ENV_FIREBASE_APP_KEY=
NEXT_PUBLIC_ENV_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_ENV_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_ENV_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_ENV_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_ENV_FIREBASE_APP_ID=
  1. ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
yarn dev