JavaScript

[JS] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด...? (Node.js)

newkr 2022. 6. 6. 17:35
728x90

๐Ÿ‘€ ๋‚ด๊ฐ€ ๋“ค์€ ๊ฐ•์˜

 ์ตœ๊ทผ ์‹ค์‹œ๊ฐ„ ๋ฌธ์„œ ํ˜‘์—… ํˆด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด๋ ค๊ณ  ํ•œ ์ ์ด ์žˆ์—ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ๋“ค์„ ์ฒ˜์Œ ์ ‘ํ•ด๋ณผ ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ, Websocket ์ด๋‚˜ WebRTC, CRDT ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋“ฑ์ด๋‹ค. ๊ทธ์ค‘ ์œ ํŠœ๋ฒ„ ๋…ธ๋งˆ๋“œ์ฝ”๋”์˜ ๋ฌด๋ฃŒ ๊ฐ•์˜ ์ค‘ Websocket๊ณผ WebRTC๋ฅผ ํด๋ก ์ฝ”๋”ฉ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์ด ์žˆ์–ด์„œ ๋“ค์–ด๋ณด๋Š” ์ค‘์ด๋‹ค.

 ๐Ÿ™„ ์ฒ˜์Œ ์ ‘ํ•œ Node.js

 ์•„์‰ฝ๊ฒŒ๋„ ๋‚ด๊ฐ€ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด์ธ Java๋‚˜ Python์ด ์•„๋‹Œ JS๋กœ ๋‚ด์šฉ์ด ์ด๋ฃจ์–ด์ ธ ์žˆ์—ˆ๋‹ค. ํŠนํžˆ, JS๋กœ ๋ฐฑ์—”๋“œ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” Node.js๋ฅผ ์ด์šฉํ–ˆ๋Š”๋ฐ, ํ”„๋ก ํŠธ์—”๋“œ์™€์˜ ์—ฐ๊ณ„ ์„ฑ๋Šฅ์ด ์ข‹์•„์„œ ์‹ค์‹œ๊ฐ„ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ํฐ ์žฅ์ ์ด ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค. node.js์˜ ์ž์„ธํ•œ ํŠน์ง•์€ https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/ ํ•ด๋‹น ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

 ์—ฌํ•˜ํŠผ ๋‚ด๊ฐ€ ๋ณธ node.js๋Š” Spring์— ๋น„ํ•˜๋ฉด ์‚ฌ์šฉ๋ฒ•์ด ํฌ๊ฒŒ ์–ด๋ ต์ง€๋Š” ์•Š์•˜๋‹ค. ์•ฝ๊ฐ„ Python์˜ Flask ๊ฐ™์€ ๋А๋‚Œ์ด๋ž„๊นŒ..? ํŒจํ‚ค์ง€๋ฅผ ํ†ตํ•ด์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์˜ ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•˜๊ณ , nodemon์„ ํ†ตํ•ด์„œ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค. ๋˜, babel์„ ํ†ตํ•ด์„œ es6 ์ดํ›„์˜ ๋ฌธ๋ฒ•์„ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ด€๋ฆฌํ•œ๋‹ค. ๊ทธ ์™ธ์—๋Š” ํŒŒ์ผ ๊ตฌ์กฐ๋Š” ๋Œ€๋ถ€๋ถ„ ๋น„์Šทํ•˜๋‹ฌ๊นŒ ํฐ ์ฐจ์ด๋Š” ์—†๋‹ค.

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


๐Ÿ‘ Websocket

 websocket ์ž์ฒด๋Š” Spring์œผ๋กœ๋„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์—ฐ๊ฒฐ์‹œ์ผœ๋ณธ ๊ฒฝํ—˜์€ ์žˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜์—์„œ๋Š” Websocket์„ ํ†ตํ•œ ์ฑ„ํŒ… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ๋Š”๋ฐ, ํ™•์‹คํžˆ Spring ๋ณด๋‹ค ์ง๊ด€์ ์ด๋ผ์„œ ๊ตฌํ˜„์ด ์–ด๋ ต์ง€ ์•Š์•˜๋‹ค. ๋ฌผ๋ก , ํ•ต์‹ฌ ๊ธฐ๋Šฅ๋งŒ ๊ตฌํ˜„ํ–ˆ์„ ๋•Œ์˜ ์–˜๊ธฐ๋‹ค. ์ดํ›„ ๋‹‰๋„ค์ž„์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์„œ๋กœ ์ฑ„ํŒ…ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋งŒ๋“ค๊ธฐ๊นŒ์ง€๋Š” socket.io ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋„์›€์„ ๋ฐ›์•˜๋‹ค. socket.io๊ฐ€ ์—„์ฒญ ํŽธํ•œ ๊ธฐ๋Šฅ์„ ๋งŽ์ด ์ œ๊ณตํ•˜๊ธฐ๋Š” ํ•˜๋”๋ผ.. JS ๊ธฐ๋ฐ˜์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ง€๋งŒ, ์˜คํ”ˆ ์†Œ์Šค๋กœ ์—ฌ๋Ÿฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ์œผ๋‹ˆ, ๊ฐœ๋ฐœ์— ํ™œ์šฉํ•˜๋ฉด ํฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

 Spring๋„ ๋” ๊ณต๋ถ€ํ•ด์•ผํ•˜๊ณ , Python์„ ํ†ตํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜๋„ ๋” ํ•„์š”ํ•˜์ง€๋งŒ, ํ”„๋ก ํŠธ์™€ ๋ฐฑ์„ ๋ชจ๋‘ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•œ ๊ณต๋ถ€๋„ ๋งŽ์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. ๊ทธ๋ฆฌ๊ณ  WebRTC ๋ถ€๋ถ„์€ ์•„์ง ์•ˆ๋“ค์–ด๋ด์„œ ๋” ๋“ฃ๊ณ  ์ž‘์„ฑํ•ด์•ผ๊ฒ ๋‹ค.

728x90