๊ณต๋์ก์๋ฅผ ํจ๊ป ํ ๋ฉค๋ฒ๋ฅผ ๋ชจ์งํ๊ณ ์ก์ํ , ์ฅ์ ๋ฑ ๋ค์ํ ๊ฟ์ ๋ณด๋ฅผ ๊ณต์ ํ๋ ์ปค๋ฎค๋ํฐ
ํ๋ก์ ํธ์ ์ฌ์ฉ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๐
์ด๋ฆ | ์ฌ์ฉ ์ด์ | ๋ฒ์ |
---|---|---|
axios | ์๋ฒ & ํด๋ผ์ด์ธํธ ๋ฐ์ดํฐํต์ | 0.27.2 |
animate.css | ์ ๋๋ฉ์ด์ ํจ๊ณผ | 4.1.1 |
react-daum-postcode | ์ฃผ์ ๊ฒ์ | 3.1.1 |
react-scroll-to-bottom | ์ฑํ ์ฐฝ ์คํฌ๋กค ์๋ํ๋จ | 4.2.0 |
react-redux | ์ ์ญ ์ํ ๊ด๋ฆฌ | 8.0.2 |
redux-thunk | ๋น๋๊ธฐ ํต์ ๋ฏธ๋ค์จ์ด | 2.4.1 |
react-toastify | ํ ์คํธ ์๋ฆผ ๊ธฐ๋ฅ | 8.2.0 |
socket.io-client | ์ค์๊ฐ ์ฑํ ๊ธฐ๋ฅ | 4.5.1 |
sweetalert2 | ๋์์ธ ๋ ์๋ฆผ์ฐฝ | 11.4.23 |
react-modal | ๋ชจ๋ฌ์ฐฝ ๋์ฐ๊ธฐ | 3.15.1 |
react-datepicker | ๋ฌ๋ ฅ ๋์ฐ๊ธฐ | 4.8.0 |
react-infinite-scroll-component | ๋ฌดํ ์คํฌ๋กค ๊ตฌํ | 6.1.0 |
styled-components | ์คํ์ผ css | 5.3.5 |
react-router-dom | ๋ผ์ฐํฐ | 6.3.0 |
react-icons | ๋ฆฌ์กํธ ์์ด์ฝ | 4.4.0 |
react-device-detect | ๋ชจ๋ฐ์ผ ๊ฐ์ง | 2.2.2 |
Socket.io ํน์ ์ฌ์ฉ์์๊ฒ ๋ฐ์ดํฐ๊ฐ ์ค์ง ์๋ ๋ฌธ์
๐ด ๋ฌธ์ ์ํฉ
Client ๊ฐ ํน์ ๊ฒฝ๋ก๋ก ๋ณด๋ธ(emit) ๋ฉ์์ง๋ฅผ Server ์ธก์์ ํน์ ๊ฒฝ๋ก๋ก ๋ฐ๊ณ (on) ๋ค์ ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ ์ก(emit)ํด์ฃผ๋๋ฐ ์ ์ฒด๋ก ๋๋ ค์ฃผ๊ฒ ๋๋ฉด
๋ฐ์ดํฐ๊ฐ ๋ค์ด์ค์ง๋ง ํน์ ์ฌ๋(user_id ๋๋ nickname)์ ์ง์ ํ๋ฉดํน์ ์ฌ๋์๊ฒ ๋ฐ์ดํฐ๊ฐ ์ค์ง ์๋ ๋ฌธ์ ๋ฐ์
๐ ๋ฐ์ ์์ธ ๋ฐ ํด๊ฒฐ ์๋
์ฌ์ง์ io.emit์ผ๋ก ์ฝ๋๋ฅผ ์ง๊ธฐ์ ์๋์ 5๊ฐ์ง์ ํน์ ์กฐ๊ฑด์ ๋ถํ๋ค
- io.to(โuserโ).emit ( X )
- io.in(โuserโ).emit ( X )
- socket.to(โuserโ).emit ( X )
- socket.broadcast.to.emit ( X )
- socket.broadcast.in.emit ( X ) -> ๋ฐ์ ์๋ฅผ ์ ์ธํ ๋ชจ๋ , ํ๋ช ์ ์ฌ์ฉ์๋ง์ด ๊ฐ์ง๊ณ ์๋ ๊ณ ์ ํ ์์ผID ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ๋ ค ํ์ผ๋ ์คํจ
๐ข ๋ฌธ์ ํด๊ฒฐ
์์ผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฒ๊ทธ๋ก ํ๋จํ์ฌ io.emit์ผ๋ก ์ ์ฒด๋ก ๋ฐ์ดํฐ ๊ฐ์ ๋ฐ์ ๋ค ํ๋ก ํธ์์ ํํฐ๋ง ํ๊ธฐ๋ก ๊ฒฐ์
- ํ๋์ ๋ฉ์์ง์๋ ์ด๋ฌํ ๋ฐ์ดํฐ๊ฐ ํฌํจ ๋์ด ์๋ค ์ด ๋ฐ์ดํฐ๋ฅผ ์ด์ฉํ์ฌ ์ ์ฒด๋ก ๋ฐ์๋ค 2๊ฐ์ง ์กฐ๊ฑด์ ๊ฑธ์ด ํํฐ๋ง
1 . ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ธ ์ฌ๋๊ณผ ๋์ ๋๋ค์์ด ๋ค๋ฅผ ๊ฒฝ์ฐ์๋ง ์๋ฆผ ํ ์คํธ๋ฅผ ์์ฑํ์ฌ ์์ ์๊ฒ ์๋ฆผ์ด ์ค๋๊ฒ์ ๋ง์
2 . ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ ์ฌ๋๊ณผ ๋์ ๋๋ค์์ด ๊ฐ์ ๊ฒฝ์ฐ์๋ง ์๋ฆผ ํ ์คํธ๋ฅผ ์์ฑํ์ฌ ํด๋น ์ ์ ์๊ฒ๋ง ์๋ฆผ์ด ๊ฐ๋๋ก ์ค์
socket.io ์ฑํ ์ค๋ณต ๋ฌธ์
์ค์๊ฐ ์ฑํ
์ ํ๊ฒ ๋๋ฉด ํ๋ฒ ์์ฑํ ์ฑํ
์ด 2๋ฒ ๋๋ 4๋ฒ .. 8๋ฒ .. ์ผ๋ก ์ฐํ๋ ๋ฌธ์ ๋ฐ์
๐ ๋ฐ์ ์์ธ ๋ฐ ํด๊ฒฐ ์๋
- ํน์ ์ด๋ฒคํธ ๊ฒฝ๋ก๋ก ์ด๋ฒคํธ๋ฅผ ๋ฐ์ ์ํค๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ณ ๋ณด๋ด๊ฒ ๋๋๋ฐ ๋ฐ์ํ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํด์ฃผ์ง ์์๋ ๊ฒ์ด์๋ค
- ๋ฐ๋ผ์ ์ ์ ๋๋ง๋ค ๊ณ์ ๋๋๋ง์ด ๋๊ณ ๊ทธ ์ด๋ฒคํธ๋ ๊ณ์ ์์ด๊ฒ ๋๋ค
๐ข ๋ฌธ์ ํด๊ฒฐ
socket.off๋ก ์ด๋ฒคํธ์ ๋ํ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํด์ฃผ๋ฉด ์ฑํ
์ค๋ณต ๋ฌธ์ ๊ฐ ํด๊ฒฐ ๋๋ค
์ ์ ํผ๋๋ฐฑ 1๋ฒ ( ์ฑํ ์ฐฝ ๊ฐ์ )
โญ Figma