Prerequisite

  • Node.js
  • socket.io v2
  • socket.io client v2
  • Express
  • Pug

๋‹จ๊ณ„

Step 1. ๊ธฐ๋Šฅ ์ •๋ฆฌ
Step 2. ๊ธฐ์ดˆ ์„ธํŒ…
Step 3. Router ์„ค์ •, Page ์ด๋™
Step 4. Controller ์ถ”๊ฐ€
Step 5. View ๋งŒ๋“ค๊ธฐ | Pug ๋ ˆ์ด์•„์›ƒ ์ ์šฉ
Step 6. Model ์ ์šฉํ•˜๊ธฐ | MongoDB, Mongoose ์—ฐ๊ฒฐ, Schema ๋งŒ๋“ค๊ธฐ
Step 7. Chat CURD
Step 8. User Model ์ถ”๊ฐ€ํ•˜๊ธฐ | Passport ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ

Step 1. ๊ธฐ๋Šฅ ์ •๋ฆฌ

Home ํ™”๋ฉด

- ์ฑ„ํŒ…์„ ๋ณด๋‚ด๊ฑฐ๋‚˜ ๋ฐ›๋Š”๋‹ค. 
- ์ฑ„ํŒ…์„ ์ˆ˜์ •, ์‚ญ์ œ ํ•  ์ˆ˜ ์žˆ๋‹ค. 
- ์ƒ๋Œ€๋ฐฉ์˜ ์ฑ„ํŒ…์— '์ข‹์•„์š”' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ์ˆ˜ ์žˆ๋‹ค. 
- ์ƒ๋Œ€๋ฐฉ์˜ ํ”„๋กœํ•„์„ ํด๋ฆญํ•˜๋ฉด ์‚ฌ์ง„๊ณผ username์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค. 

User

- ์ž์‹ ์˜ ํ”„๋กœํ•„ ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. 

๐Ÿ˜‚

ํ•˜์ง€๋งŒ ์ ์  ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ค‘์š”ํ•œ ์ด์Šˆ๋ฅผ ๋งž๋‹ฅ๋œจ๋ฆฌ๊ฒŒ ๋๋‹ค. ๊ทธ๊ฑด ๋ฐ”๋กœ Server Side Rendering or Client Side Rendering ๊ฐœ๋…์ด์˜€๋‹ค..Socket.io๋Š” real-time, bidirectional and event-based communication between the browser and the server์ด๋‹ค. ์ฆ‰ ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ด์— ์ฃผ๊ณ ๋ฐ›๋Š” connect, disconnect ๋“ฑ์˜ ์š”์ฒญ, ์‘๋‹ต๋“ค์ด ํ•˜๋‚˜์˜ event์ธ ๊ฒƒ์ด๋‹ค.

์œ„์˜ ๊ณ„ํš ์ฒ˜๋Ÿผ pug template๋ฅผ ์“ฐ๋Š”๊ฑด ์„œ๋ฒ„๊ฐ€ ํ•ด๋‹น ์š”์ฒญ์— ๋งž๋Š” ๋ฐ์ดํ„ฐ๋“ค์„ html ์•ˆ์— ๋ฏธ๋ฆฌ ๋„ฃ์–ด์„œ (rendered) ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์ „๋‹ฌํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ๋‹ค์‹œ๋งํ•ด ์ „์ฒด HTML์ด server์—์„œ ๋งŒ๋“ค์–ด์ง„ ์ฑ„๋กœ client์—๊ฒŒ ์ „๋‹ฌ๋œ๋‹ค. ์ฆ‰ Server Side Rendering.

ํ•˜์ง€๋งŒ socket.io๋ฅผ ์ด์šฉํ•˜๋ฉด chat์€ ํ™”๋ฉด์ด ๋งค๋ฒˆ ํ™”๋ฉด์ด reload ๋˜์ง€ ์•Š๋”๋ผ๋„ event ๊ธฐ๋ฐ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐ๊ฐ€ browser์— ๋„๋‹ฌํ•ด์„œ์•ผ ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๊ฒŒ ๋œ๋‹ค. ์ฆ‰ Client Side Rendering์ธ ๊ฒƒ์ด๋‹ค.
Chat๊ฐ™์ด ํด๋ผ์ด์–ธํŠธ์˜ HTTP Request๋ฅผ ํ•˜์ง€ ์•Š์•„๋„ ์ƒˆ๋กœ์šด data๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์ด๋‚˜ ajax ์ฒ˜๋Ÿผ ํ™”๋ฉด์„ ๋กœ๋“œ ํ›„ ๊ณ„์† ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์•ผํ•˜๋Š” ๋ถ€๋ถ„์ด ๋งŽ์€ ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ™”๋ฉด์„ Renderingํ•˜๋Š” Client Side Rendering์ด ๋งž๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๋ฌผ๋ก  Chat ์ˆ˜์ •, ์‚ญ์ œ๋ฅผ socket์œผ๋กœ ์š”์ฒญ ํ•  ์ˆ˜ ๋„ ์žˆ๊ธด ajax๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ..

pug ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๊ธฐ๋ณธ HTML static file ์‚ฌ์šฉํ•˜๊ณ  ์ˆ˜์ • ์‚ญ์ œ๋Š” ajax๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์‹œ ๋งŒ๋“ค์–ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

  • ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด socket์œผ๋กœ chat์„ ๋ณด๋‚ด๊ณ  ์ˆ˜์ •, ์‚ญ์ œ ์š”์ฒญ๋„ socket์œผ๋กœ ํ–ˆ์„ ๋•Œ Server์— ์–ผ๋งˆ๋‚˜ ๋ถ€๋‹ด์ด ๋ ๊นŒ.. ํ  ๋ชจ๋ฅด๊ฒ ๋‹ค.