๐ ๋๋ง ๋ชจ๋ฅธ ๋ญ
๋ด ๋จธ๋ฆฌ์ ์๋ ๊ฑฐ ๋ญ์ผ? ๋๋ง ๋ชฐ๋ผ?
โ์์ธ์ฐฌ ๊ฒ์โ ํน์ โ์ฝ ๋ง์ด ๋ค์โ์ผ๋ก ๋ถ๋ฆฌ๋ ํค์๋ ๋ง์ถ๊ธฐ ๊ฒ์!
์ค๋ฌด๊ณ ๊ฐ์ฒ๋ผ ์๋ ํ๋ ์ด์ด์๊ฒ ์ง๋ฌธํ๋ฉด์ ๋์ ํค์๋๋ฅผ ๋ง์ถฐ๋ณด์ธ์
์ต๋ํ ํท๊ฐ๋ฆฌ๊ฒ ๋ต๋ณํ๊ณ ์ต๋ํ ๋ ์นด๋กญ๊ฒ ์ง๋ฌธํ์ธ์!
๐ ๋๋ง ๋ชจ๋ฅธ ๋ญ ์๋น์ค ๋ฐ ๋
ธ์
๐ ๋๋ง ๋ชจ๋ฅธ ๋ญ ๋ฐ๋ก๊ฐ๊ธฐ๐
๐ ํ ๋
ธ์
๐
๐ ๋ธ๋ก์์ด๐
๐ข ์ฃผ์ ์๋น์ค ๊ธฐ๋ฅ
- ๋ฐ๋๋งจ์ ๋์จ ์์ธ์ฐฌ ๊ฒ์(aka. call my name game)์ ์จ๋ผ์ธ์์๋ ์ฆ๊ธธ ์ ์๊ฒ ์น์ผ๋ก ๊ตฌํํ์์ต๋๋ญ
๐ - ํ
์คํธ ์ฑํ
๋ฟ๋ง ์๋๋ผ ์์ฑ/ํ์ ์ฑํ
์ผ๋ก๋ ์๋ก ๋ํ๋ฅผ ๋๋๋ฉฐ ๊ฒ์์ ์ฆ๊ธธ ์ ์์ต๋๋ญ
๐ - ๊ฒ์๋ ํ๊ณ ๊ฒ์ํ์ ์ด์ฉํด ๋ค๋ฅธ ์ ์ ๋ค๊ณผ ์ํต๋ ํ ์ ์์ต๋๋ญ
๐ - ์์
๋ก๊ทธ์ธ์ด ์์ด ๋ณ๋์ ํ์๊ฐ์
์ด ํ์ํ์ง ์์ต๋๋ญ
๐
๐ฝ ์์ฐ ์์
โ๏ธ ์๋น์ค ์ํคํ
์ณ
๐ ERD
๐ ํต์ฌ ๊ธฐ์
- ์ค์๊ฐ ์ฑํ
์ ์ํ Web Socket
- ํ์ ๋ฐ ์์ฑ ์ฑํ ์ ์ํ WebRTC
- ๋ค์ํ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์ ์ง์ํ๊ธฐ ์ํ SockJS
- pub/sub ๊ธฐ๋ฐ์ ํธ๋ฆฌํ ์น์์ผ ๊ด๋ฆฌ๋ฅผ ์ํ ๋ฉ์ธ์ง ํ๋กํ ์ฝ STOMP
- Refresh Token์ ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ๋ฅผ ์ํ ์๋ธ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก์ Redis ์ฌ์ฉ
- Github Actions/AWS CodeDeploy๋ฅผ ํตํ ์๋ ๋ฐฐํฌ ํ๊ฒฝ ๊ตฌ์ถ
- Intersection-observer API๋ฅผ ์ฌ์ฉํ ๋๊ธ ๋ฌดํ ์คํฌ๋กค
- OAuth 2.0 ์์ ๋ก๊ทธ์ธ์ ํตํ ํธ๋ฆฌํ ์ ๊ทผ์ฑ
๐ ๊ธฐ์ ์ ์์ฌ ๊ฒฐ์
๊ธฐ์ ์ ์์ฌ ๊ฒฐ์
๊ธฐ์ | ๋์ ์ด์ | ํ๋ณด๊ตฐ | ์๊ฒฌ ์กฐ์จ ๋ฐ ๊ธฐ์ ๊ฒฐ์ |
---|---|---|---|
Web Socket | ์ค์๊ฐ ํต์ ์ ์ํด ๋์ | Polling / Long Polling / Web Socket | - ์ค์๊ฐ์ฑ์ด ์ค์ํ ์๋น์ค์ด๋ฏ๋ก ํ์ชฝ์์ ์ก์ ์ ํ๋ฉด ๋ฐ๋์ชฝ์์๋ ์์ ๋ง ํ ์ ์๋ Polling ๋ฐ Long Polling์ Web Socket์ ๋นํด ์ค์๊ฐ์ฑ์ด ๋จ์ด์ง. - Web Socket์ ์ฌ์ฉํ๋ฉด ์๋ฒ์ ๋ธ๋ผ์ฐ์ ์ฌ์ด์ ์๋ฐฉํฅ ์ํต์ด ๊ฐ๋ฅํจ(= ์ ์ด์ค ํต์ , ์๋ฐฉํฅ ํต์ (Full-Duplex)). ์ฆ, ํด๋ผ์ด์ธํธ๊ฐ ๋จผ์ ์์ฒญํ์ง ์์๋ ์๋ฒ๊ฐ ๋จผ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ ์ ์๊ณ ์๋๋ฐฉ์ ์ก์ ์ํ์ ์๊ด์์ด ๋ฉ์ธ์ง๋ฅผ ๋ณด๋ผ ์ ์์. ๋๋ฌธ์ 30์ด์ ์ ํ ์๊ฐ ๋ด์ ๋ง์ ์ง๋ฌธ์ด ์ค๊ฐ๋ ์ค์๊ฐ ์ฑํ ์ด ์ค์ํ ์ฐ๋ฆฌ ์๋น์ค์ Web Socket์ด ๋ ์ ์ ํ๋ค๊ณ ํ๋จ |
WebRTC (Mesh) | ์ค์๊ฐ ํ์ ๋ฐ ์์ฑ ์ฑํ | Mesh / SFU / MCU | - ์ค์๊ฐ์ฑ์ด ๊ฐ์ฅ ๋ฎ๊ณ ์ค์ ์๋ฒ์์ ๋ฐ์ดํฐ ํผํฉ ๋ฐ ๊ฐ๊ณต์ ๋ง์ ๋น์ฉ์ด ์๊ตฌ๋๋ MCU๋ ์ ์ธํ๊ณ Mesh์ SFU ๋ฐฉ์์ ๋๊ณ ๊ณ ๋ฏผ - ์๋น์ค ํน์ฑ ์, ํ ๊ฒ์๋ฃธ์ ์ต๋ ์ธ์์ด 4๋ช ์ธ ์ ์ ๊ณ ๋ คํ์ ๋ peer๊ฐ์ ์ง์ ์ฐ๊ฒฐ์ด ํด๋ผ์ด์ธํธ์ ๋ถํ๋ฅผ ์ฌํ๊ฒ ์ฃผ์ง ์์ ๊ฒ์ด๋ผ๊ณ ํ๋จํ๊ณ , ์๋ฒ๋ฅผ ๊ฑฐ์น๋ ์ผ ์์ด ๋ฐ๋ก peer๋ผ๋ฆฌ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ฒ์ด ์ค์๊ฐ์ฑ์ด ์ค์ํ ๊ฒ์ ์๋น์ค์ ์ ํฉํ๋ค๊ณ ํ๋จ |
Redis | Refresh Token์ ์ ์ฅํ๊ธฐ ์ํ DB ์ ์ | Redis / MySQL | - ์ผ์ ์๊ฐ ์ดํ ๋ง๋ฃ๋์ด์ผ ํ๋ Refresh Token์ด๋ฏ๋ก ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์ดํฐ์ ์ ํจ๊ธฐ๊ฐ(time to live)์ ์ง์ ํ ์ ์๋ Redis์ ์ ์ฅํ๋ ๊ฒ ์ ํฉํ๋ค๊ณ ํ๋จ - ํ ํฐ ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ์ ์ฉ์ดํ Redis๋ฅผ Refresh Token ์ ์ฉ ์๋ธ DB๋ก ์ ์ |
Github Action & AWS CodeDeploy | ์ง์์ ํตํฉ๊ณผ ์ง์์ ๋ฐฐํฌ๋ฅผ ํตํ ์ ๋ฌด ํจ์จ ์์น์ ์ํด ๋์ | Jenkins / Github Action / Travis CI |
- ํ์ฌ ํ๋ก์ ํธ ๊ด๋ฆฌ๋ฅผ ๊นํ๋ธ๋ฅผ ํตํ์ฌ ์งํํ๊ณ ์๊ณ , ์๊ท๋ชจ ํ๋ก์ ํธ์ด๊ณ ์ถ๊ฐ์ ์ธ ์ค์น ๊ณผ์ ์์ด Github์์ ์ ๊ณตํ๋ ํ๊ฒฝ์์ CI ์์
์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ Github Action์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฉ์ดํ ๊ฑฐ๋ผ ์๊ฐํจ - ํ๋ก์ ํธ ๊ท๋ชจ๋ฅผ ์๊ฐํ์ ๋ ์ด๊ธฐ ์ค์ ์ด ์ ๊ณ ํธ์์ฑ์ด ๋์ ๋ฆฌ์์ค๋ฅผ ์ค์ด๋ ๋ฐฉํฅ์ผ๋ก ์งํ. ๋ฐ๋ผ์ Github Action๊ณผ AWS์์ ์ ๊ณตํ๋ Code Deploy๋ฅผ ์ด์ฉํ์ฌ ์๋ํ ๋ฐฐํฌ๋ฅผ ํ๊ธฐ๋ก ๊ฒฐ์ |
Refresh Token | ์ ์ ์ ๋ณด ๋ณด์ | ํด๋ผ์ด์ธํธ์ ์ ์ฅ(local storage vs cookie) / ์๋ฒ์ ์ ์ฅ | - ๋ฆฌํ๋ ์ ํ ํฐ์ด ํด๋ผ์ด์ธํธ์ ๋
ธ์ถ๋๋ค๋ฉด ๋ฆฌํ๋ ์ ํ ํฐ์ ์ฅ์ ์ธ ๋ณด์์ ์ธ ์ด์ ์ด ์๋ค๊ณ ํ๋จํ์๊ณ , ์ก์ธ์ค ํ ํฐ ๋ง์ผ๋ก๋ ์๋ฒ์ ๋ฆฌํ๋ ์ ๋ฐ๊ธ ์์ฒญ์ด ๊ฐ๋ฅํ ๋ก์ง์ด๊ธฐ ๋๋ฌธ์ ์๋ฒ์๋ง ์ ์ฅํ๋ ๋ฐฉํฅ์ผ๋ก ์๊ฒฌ ์กฐ์จ - ๋ฆฌํ๋ ์ ํ ํฐ์ ์๋ฒ(Redis)์ ์ ์ฅํ๊ณ , ์ก์ธ์ค ํ ํฐ ๋ง๋ฃ 10๋ถ ์ ์ ์ฌ๋ฐ๊ธ ์์ฒญ์ ๋ณด๋ด๋ api๋ฅผ ์ก์ธ์ค ํ ํฐ์ ๋ด์ ์์ฒญํ๋ ๋ฐฉ์์ผ๋ก ๊ตฌํ |
STOMP & SockJS | ํ ์คํธ ์ฑํ ๋ฐ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์์ ์ผ๊ด์ฑ | Only WebSocket / SockJS + STOMP | - ์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์์ ๋์ผํ ๊ธฐ๋ฅ์ ์์ ์ ์ผ๋ก ์ ๊ณตํ ์ ์์ด์ผ ํ๊ธฐ์ SockJS๋ฅผ ์ฌ์ฉํ๊ณ , ์ฌ๋ฌ ๋ฐฉ์ ์์ฑํ์ฌ ๊ทธ ๋ฐฉ๋ง๋ค์ ์ฑํ
์ ๊ด๋ฆฌํด์ผ ํ๊ธฐ ๋๋ฌธ์ Topic์ ๊ตฌ๋
ํจ์ผ๋ก ๋ณ๋์ ์ธ์
๊ด๋ฆฌ๊ฐ ํ์์๋ STOMP๋ฅผ ์ฌ์ฉํด ์ฑํ
์ ๊ตฌํํ๋ ๊ฒ์ผ๋ก ์๊ฒฌ ์กฐ์จ - WebSocket Configuration์์ Endpoint์ SockJS๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ์ค์ ํ๊ณ , ๋ฉ์์ง ๋ธ๋ก์ปค๋ฅผ ํตํด pub/sub ์๋ํฌ์ธํธ๋ฅผ ์ค์ ํ์ฌ url๋ก ๊ฐ๋จํ ๊ณต๊ธ๊ณผ ๊ตฌ๋ ์ ์ ์ฉํ ์ ์๊ฒ ๊ตฌํํจ. ๋ํ ๋์ Topic(๊ฒ์ ๋ฐฉ)์ ๊ตฌ๋ ํ ์ฌ๋๋ค์ ๋์์ผ๋ก ๊ฒ์ ์งํ์ ๊ด๋ จํ ๋ฉ์ธ์ง๋ฅผ ๊ณต๊ธํ๋ ๋ฐฉ์์ผ๋ก ๊ตฌํ |
โฝ ํธ๋ฌ๋ธ ์ํ
์๋ํ ๋ฐฐํฌ ์ jar ํ์ผ ์คํ ์ด์
-
๋ฌธ์ ์ํฉ
- EC2 ์ธ์คํด์ค์ ๋ฐฐํฌ ํ์ผ์ด ๋ค์ด๊ฐ๋ ์คํ๋์ง ์์, ์ฐ๋ถํฌ ์๋ฒ์ ๋ค์ด๊ฐ ๋ฐฐํฌ ํ์ผ์ ์๋ ์คํ์์ผ๋ ์คํ๋์ง ์์
-
์ด์
- EC2 ๋ก๊ทธ์ Github Actions, Code Deploy๋ด์ญ, S3์ ์ ์์ ์ธ ์ ์ฅ์ ๋ชจ๋ ์ ์ ์๋ ํ์ธํ์ผ๋ ์ ์คํฌ๋ฆฝํธ ๋ก๊ทธ์์ ์คํ๋ ํ๋ก์ธ์ค ID๊ฐ ์ ์ฐํ๋ ๊ฒ์ ํ์ธํ์ฌ ์คํ์ ๋ฌธ์ ๊ฐ ์๋ ๊ฒ์ ์ธ์. ํ์ธ์ ์ํด ์๋ ๋ฐฐํฌ๋ ํ์ผ์ ์๋์ผ๋ก ์คํํด๋ณด๋ ์คํ๋์ง ์์์. local์์ buildํ ํ์ผ์ ์๋ฒ์ ์ฌ๋ ค ๋๋ ธ์ ๋ ์ ์ ์๋ ํ๋ ๊ฒ์ผ๋ก ๋ณด์ ๋ฐฐํฌ ๊ณผ์ ์์ ํ์ผ ์ฒ๋ฆฌ์์ ๋ฌธ์ ๊ฐ ์๊ฒผ์ ๊ฑฐ๋ผ ์ถ์ธก
- ๋ฐฐํฌ ๋ก์ง์ ํ๋ํ๋ ํ์ธํด ๋ณด๋ Github secret์ ๋ค์ด๊ฐ properties ํ์ผ์ด ๋น๋ ์ ๋ค์ด๊ฐ์ด์ผ ํ๋๋ฐ ์์๊ฐ ๋น๋ ํ ์ ์ฉ์ผ๋ก ๋ฐ๋ ค ์์ด์ ๋ฐฐํฌํ ํ์ผ์ properties๊ฐ ์ ์ฉ๋์ง ์์๋ค. ๋น์ฐํ properties์ ๋ค์ด๊ฐ ์๋ ํค๋ค์ด ์ ์ฉ์ด ์ ๋์ด ์ฐ๋ถํฌ์ ์๋ ๋ฐฐํฌ ํ์ผ์ ์๋ ์คํ์์ผ๋ ์ค๋ฅ๊ฐ ๋ด์
-
ํด๊ฒฐ ๋ฐฉ๋ฒ
- steps ์์๋ฅผ ๋น๋ ์ github secret์ ์๋ properties๊ฐ ๋จผ์ ์ ์ฉ๋๊ฒ ๋ณ๊ฒฝ
๋์์ฑ ์ ์ด๋ฅผ ์ํ Pessimistic Lock
-
๋ฌธ์ ์ํฉ
- ์ต๋ ์ธ์์ด 4๋ช ์ธ ๊ฒ์ ๋ฐฉ์์ ํ ์๋ฆฌ๊ฐ ๋จ์์ ๋ ๋์์ ์ผ๋ก ์ ์ฅํ๊ธฐ๋ฅผ ํ๋ฉด ์ต๋ ์ธ์์ ๋์ด์ ์ ์ฅํ๋ ์ด์ ๋ฐ์
-
์ด์
- ์ฌ๋ฌ ๊ฐ์ ํธ๋์ญ์ ์ด ๋์์ ์ผ๋ก DB์ ์ ๊ทผ ํ, ์ ๋ฐ์ดํธ ๋๊ธฐ ์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์์ ์คํ๋๊ธฐ ๋๋ฌธ
-
ํด๊ฒฐ ๋ฐฉ๋ฒ
- ํด๋น ์ด์๋ฅผ ์ํด์ select for update ๊ตฌ๋ฌธ์ ์ด์ฉํ์ฌ ํน์ ๋ฐ์ดํฐ ROW์ ๋ํด Pessimistic Lock์ ๊ฑธ์ด ํด๊ฒฐ
- Optimistic Lock๋ ๊ณ ๋ คํ์ง๋ง Optimistic Lock์ ์ถฉ๋์ด ๋ฐ์ํ ๋๋ง๋ค ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ์ถฉ๋์ด ๋ง์ ๊ฒ์ผ๋ก ์์๋๋ ์ด๋ฒ ์ด์์๋ ์ ํฉํ์ง ์๋ค๊ณ ํ๋จ
๋น์ ์์ ์ผ๋ก ์ข ๋ฃ ์ ์๋ก์ด ๋ฐฉ์ฅ์ด ์ ๋ฐ์ดํธ ๋์ง ์๋ ์ด์
-
๋ฌธ์ ์ํฉ
- ๋ฐฉ์ฅ์ด ๋น์ ์์ ์ธ ์์ฒญ์ผ๋ก ๋ฐฉ์ ๋๊ฐ์ ๋ ์ธ์ ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ๋ฐฉ์ฅ ์ ๋ณด๊ฐ ์ ๋ฐ์ดํธ ๋์ง ์๋ ์ด์
-
์ด์
- ๋น์ ์์ ์์ฒญ์ผ๋ก ๋ฐฉ์ ๋๊ฐ์ ๊ฒฝ์ฐ, ๊ฒ์๋ฃธ์ ๋ฐฉ์ฅ ์ ๋ณด๊ฐ ๋ณ๊ฒฝ๋๋ ๋ก์ง๋ณด๋ค ๋ฐฉ์ฅ ์ ๋ณด๋ฅผ ์ ๋ฐ์ดํธ ํ๋ ๋ก์ง์ด ๋จผ์ ์คํ๋์๊ธฐ ๋๋ฌธ์ ๋ฐ์
- ์ ์์ ์ผ๋ก ๋ฐฉ์ ๋๊ฐ ๋์๋ ๋ฐฉ์ฅ ๊ถํ ๋ถ์ฌ๊ฐ ๋จ์์๋ ์ฐธ์ฌ์์๊ฒ ์ ๋ฌ์ด ์๋๋๋ฐ ๋น์ ์์ ์ผ๋ก ๋ฐฉ์ ๋๊ฐ์ ๋ ๊ฐ์ ๋ฉ์๋๋ก ๋ฐฉ์ฅ ๊ถํ์ ๋ถ์ฌํจ์๋ ์ ์์ฒ๋ฆฌ ๋์ง ์์. ์ด์ ์ฐจ์ด๋ฅผ ๋น๊ตํ๋ ์ ์์ฒ๋ฆฌ ๊ฒฝ์ฐ ๋ฐฉ ๋๊ฐ๊ธฐ ๋ก์ง์ด API๋ก ๋ฐ๋ก ์์ฒญ๋์ด ๋ฉ์๋๊ฐ ์คํ๋๋ ๋น์ ์์ฒ๋ฆฌ์ ๊ฒฝ์ฐ ์ธ์ ์ฐ๊ฒฐ์ ์ฐ๊ฒฐ๋๊น์ด ๊ฐ์ง๋๋ฉด ์คํ๋๋ afterConnectionClosed์ ์ฐ๊ณ๋ก ๋ฉ์๋๊ฐ ์คํ๋๋ ์ฐจ์ด๊ฐ ์์์. ํด๋น ๋ฉ์๋๋ DB๋ฅผ ๋ณ๊ฒฝํ๋ ์ฌํญ์ด ์์ด @Transactional์ ๋ถ์ฌ ์ฌ์ฉํ๊ณ ์์๋๋ฐ, ๋น์ ์์ฒ๋ฆฌ๋ก ์คํ์ ๋ฐฉ๋๊ฐ๊ธฐ ๋ฉ์๋์ ์ ํ๋๋ afterConnectionClosed์๋ @Transactional์ด ๋ถ์ง ์์ ๋ฐ์ดํฐ ์ ์ฅ์ด ์ ์์ ์ผ๋ก ์ฒ๋ฆฌ๊ฐ ๋์ง ์์์.
-
ํด๊ฒฐ ๋ฐฉ๋ฒ
- ํ๋ก ํธ์์ ๋ฐฉ์ฅ ์ ๋ณด๋ฅผ ๋ถ๋ฌ์ค๋ ์์ฒญ์ด DB์ ์ ์ฅ๋๋ ๋ก์ง๋ณด๋ค ์ ํ๋๋๋ก ์ฝ๋ ์์ ๋ณ๊ฒฝ
- ์์ ๋ฉ์๋์ @Transactional์ ๋ถ์ฌ์ฃผ์ด ํ์ ๋ฉ์๋์ ๋ฐฉ์ฅ์ ์ ๋ฐ์ดํธ ํ๋ ๋ฐ์ดํฐ๊ฐ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌ๋๋๋ก ๋ณ๊ฒฝ
๐จ๏ธ ์ ์ ํผ๋๋ฐฑ
์ ์ ํผ๋๋ฐฑ
- ๋๋ค์ ๋ณ๊ฒฝ
- ๊ธฐ์กด์ ๋๋ค์์ cookie ์ ๋ด์ ๊ด๋ฆฌํ๊ณ ์์๋๋ฐ ๋๋ค์ ๋ณ๊ฒฝ api๋ฅผ ํธ์ถํ๊ณ ๋ณ๊ฒฝ๋ ๋๋ค์์ ์ฃผ๊ธฐ๋ก ํจ
- ์นด๋ฉ๋ผ ๊ธฐ๋ณธ ์ํ off๋ก ์ค์
- ๊ฐ๊ฐ์ ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ฒด๋ก์ ์ ์ฅํ์ฌ ์์๋ก ๊ฐ์ง๋ ๋ฐฐ์ด์ ์ ์ ๊ฐ์ฒด๋ฅผ ์ฒ์ ํ ๋นํ ๋ ์นด๋ฉ๋ผ On/Off๋ฅผ ์ค์ ํ๋ ํ๋กํผํฐ์ ๊ฐ์ true์์ false๋ก ๋ณ๊ฒฝ
- ๊ฒ์ ์ข
๋ฃ ์ ํค์๋ ์๋ฆผ
- ์ปดํฌ๋ํธ ์ต์๋จ scope์ ํค์๋๋ฅผ ์ ์ฅํ let ๋ณ์ ์ ์ธ ํ ๊ฒ์ ์์ ์ ์๋ฒ๋ก๋ถํฐ ๋ฐ์์จ ํค์๋ ๋ฐ์ดํฐ๋ฅผ ํด๋น ๋ณ์์ ํ ๋นํ์ฌ ๊ฒ์์ข ๋ฃ์ ํด๋น ๋ณ์ ์ฌ์ฉํ์ฌ ํค์๋ ํ๋ฉด์ ์ถ๋ ฅ
- ์ปค๋ฎค๋ํฐ ํ์ด์ง ์นดํ
๊ณ ๋ฆฌ ์ค์ ๋ฐฉ์ ๋ณ๊ฒฝ
- ์นดํ ๊ณ ๋ฆฌ์ ๊ฒฝ์ฐ [์์ ๊ฒ์ํ]๊ณผ [๋ด๊ฐ ์ด ํผ๋๋ฐฑ]์ drop down์ผ๋ก, [๋ด๊ฐ ์ด ๊ฒ์ํ]์ ๊ฒฝ์ฐ์ ๋ฒํผ์ผ๋ก ๋ฐ๋ก ๊ตฌ์ฑ๋์ด์์ด์ ๋ถํธํ๋ค๋ ํผ๋๋ฐฑ์ ๋ฐ์
- ๋ชจ๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ drop down์ผ๋ก ๋ณ๊ฒฝ
- ์นด์นด์คํก ํ์ํํด (์๋น์ค ์ฐ๊ฒฐ ๋๊ธฐ)
- ์นด์นด์ค ๋ก๊ทธ์ธ ์ ๋ฐฑ์๋ ์๋ฒ์์ ์ ๋ฌํ๋ ํ ํฐ์ ์นด์นด์ค access token์ ์ถ๊ฐํ๊ณ , ์นด์นด์คํก ์ฐ๊ฒฐ ๋๊ธฐ api๋ก ํด๋น ํ ํฐ์ ์ ์กํ์ฌ ์๋น์ค ์ฐ๊ฒฐ ๋๊ธฐ ์์ฒญ
- ๋ฒํผ ์ค๋ณต ํด๋ฆญ ๋ฐฉ์ง
- debounce์ ๋์ผํ ๊ธฐ๋ฅ์ ํ๋ ์ปค์คํ ํ ์ ๋ง๋ค์ด์ ๋ฒํผ์ ์ฌ๋ฌ ๋ฒ ๋๋ ์ ๋ ํน์ ์๊ฐ(0.3์ด)๋์ ์ก์ ์ด ์๋ ๊ฒฝ์ฐ ํจ์๊ฐ ํธ์ถ๋๋๋ก ๋ณ๊ฒฝ
- ๊ฒ์ ํ๋ ์ด ์ ํจ๊ณผ์
- howler.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ์ ํ src๊ฐ ํ๋ ์ด๋๋ ์ปค์คํ ํ ์ ๋ง๋ค์ด์ ๊ฒ์ ์ค ํจ๊ณผ์์ด ๋์ค๋๋ก ๋ณ๊ฒฝ
- ์นด์นด์ค ๋ก๊ทธ์ธ ์ด์ฉ์ ๊ฒ์๋ฃธ ์
์ฅ์ด ์๋๊ณ โ๋ง๋ฃ๋ JWT ํ ํฐ์
๋๋ค โ ๋ผ๋ ๋ฉ์ธ์ง์ ํจ๊ป ํ๊ธฐ๋ ์ค๋ฅ
- ์นด์นด์ค ๋ก๊ทธ์ธ์ ์ด๋ฉ์ผ ํ์ฉ์ ํ์ง ์์ ์ ์ ๋ค์๊ฒ ๋ฐ์ํ ๋ฌธ์
- kakao developers ์ ํ๋ฆฌ์ผ์ด์ - ์นด์นด์ค๋ก๊ทธ์ธ - ๋์ํญ๋ชฉ ์์ email ์ค์ ์ ํ์์ ํ์ผ๋ก ์์
โ ์๊ฐ์ด ๋ ์์๋ค๋ฉด ๋์ ํ์ ๊ธฐ์ ๋ค
- ๋์ฉ๋ ํธ๋ํฝ ์ฒ๋ฆฌ
- ์๋ก๊ณ ์นจ ์์ด ์ค์๊ฐ ๋ฐฉ ๋ฆฌ์คํธ ์ ๋ฐ์ดํธ๋ฅผ ์ํ SSE
- ์ถ๊ฐ์ ์ธ ์์ ๋ก๊ทธ์ธ(๋ค์ด๋ฒ, ๊ตฌ๊ธ)
- docker๋ฅผ ํ์ฉํ ์๋ฒ scale-out
- ๋ฌด์ค๋จ ๋ฐฐํฌ
๐ ๊ธฐ์ ์คํ
Backend Tech Stack
Infrastructure
Team Collaboration Tool
๐ง๐ปโ๐ป ๊ฐ๋ฐ ๊ธฐ๊ฐ & ์กฐ์
๊น์์ | ์กฐ์์ | ์ฐจ์ด์ง | ํ์ค์ฌ |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
SPRING | SPRING | SPRING | SPRING |