Socket.io-client: ๋ธŒ๋ผ์šฐ์ € ์ธก js์—์„œ ES6 ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 04์›” 04์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: socketio/socket.io-client

์ฐธ๊ณ  : ์ง€์› ์งˆ๋ฌธ์˜ ๊ฒฝ์šฐ ๋‹ค์Œ ์ฑ„๋„ ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค: stackoverflow ๋˜๋Š” slack

์›ํ•˜๋Š” ์ž‘์—…:

  • [ ] ๋ฒ„๊ทธ ๋ณด๊ณ 
  • [x] ๊ธฐ๋Šฅ ์š”์ฒญ

ํ˜„์žฌ ํ–‰๋™

์žฌํ˜„ ๋‹จ๊ณ„(ํ˜„์žฌ ๋™์ž‘์ด ๋ฒ„๊ทธ์ธ ๊ฒฝ์šฐ)

์ฐธ๊ณ  : ๋น ๋ฅธ ๋‹ต๋ณ€์„ ์–ป๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€ ์˜ˆ๋ฅผ ๋“ค์–ด ๋‹ค์Œ ๋ฐ”์ด์˜ฌ๋ฆฐ ์„ ๋ถ„๊ธฐํ•˜์—ฌ ์‹คํŒจํ•œ ํ…Œ์ŠคํŠธ ์‚ฌ๋ก€๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

์„ค์ •

  • ์šด์˜ ์ฒด์ œ:
  • ๋ธŒ๋ผ์šฐ์ €:
  • socket.io ๋ฒ„์ „:

๊ธฐํƒ€ ์ •๋ณด(์˜ˆ: ์Šคํƒ ์ถ”์ , ๊ด€๋ จ ๋ฌธ์ œ, ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ์ œ์•ˆ)

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋„ ์†์•˜๋‹ค. ๋‚˜๋Š” ํ•ญ์ƒ webpack ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ES6 ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ๋” ์ด์ƒ ์ƒˆ๋กœ์šด ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ž‘๋™ํ•˜๊ฒŒ ํ•ด์ฃผ์„ธ์š”!

๋งŽ์€ ํ”„๋กœ์ ํŠธ์—๋Š” ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ์ „์šฉ *.module.js๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค!

๋ชจ๋“  3 ๋Œ“๊ธ€

README.md ์— ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost');
  socket.on('connect', function(){});
  socket.on('event', function(data){});
  socket.on('disconnect', function(){});
</script>
// with ES6 import
import io from 'socket.io-client';

const socket = io('http://localhost');

ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ES6 ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ์˜คํ•ด์˜ ์†Œ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์ด ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋‚˜๋„ ์†์•˜๋‹ค. ๋‚˜๋Š” ํ•ญ์ƒ webpack ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ES6 ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ๋” ์ด์ƒ ์ƒˆ๋กœ์šด ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ž‘๋™ํ•˜๊ฒŒ ํ•ด์ฃผ์„ธ์š”!

๋งŽ์€ ํ”„๋กœ์ ํŠธ์—๋Š” ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ์ „์šฉ *.module.js๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค!

.mjs๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ES6 ๋ชจ๋“ˆ์— ์„ ํ˜ธ๋˜๋Š” ํŒŒ์ผ ์œ ํ˜•์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰