주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

채팅 기능 구현 기본 동작은 이해했으니 진도를 쭉 나가겠습니다. 구현해야하는 기본 기능을 먼저 확인해보겠습니다. > 추가할 기능 TODO - 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. - 메세지를 전송하고 받아야한다. - 스타일을 입힌다. > 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. 입장할 때 작성했던 connection이 기억나는가요? 퇴장할 때 이벤트도 같은 곳에 추가합니다. 사용자가 입장 시(소켓연결) 발생하는 이벤트 호출에 대한 바인딩 작업은 app.js의 connect 콜백함수 내부에서 작성되었습니다. // app.js io.sockets.on('connection', function(socket){ socket.on('newUser..

socket.io 모듈을 사용해 통신 기본 설정하기 > 클라이언트 스크립트 파일 생성 후 로드시키기 src 하위에 js 폴더를 생성하고 그 안에 index.js 파일을 생성합니다. 폴더구조는 아래와 같습니다. 통신 스크립트를 추가하기 전에 앞서서 index.html에 관련 js 파일을 로드합니다. // index.html welcome index.js는 생성했는데, socket.io.js도 생성해야하나요? 라고 질문하신다면 아니라고 답하겠습니다. socket.io.js는 서버 실행 시 자동으로 생성되기때문에 welcome 문구를 지우고 동적인 값을 넣기 위해 div 태그에 id값을 넣었습니다. // app.js io.sockets.on('connection', function(socket){ socket..

서버 기본 세팅 > 서버 스크립트 파일 생성 및 스크립트 작성 root에 서버를 세팅할 app.js 파일을 생성합니다. 생성 후 폴더구조는 아래와 같습니다. // app.js const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); server.listen(8080, function(){ console.log('서버 실행중...'); }); 코드 설명 > 세팅에 필요한 모듈들은 require로 가져와 변수에 담습니다. http 모듈은 node.js의 기본내장 모듈이기 때문에 따로 다운로드하지않아도 사용할 수 있습니다. const exp..

이전 포스팅 바로가기 이전에 포스팅에서 minify, merge를 진행해봤었는데요, 이번엔 자동화를 시켜보겠습니다. gulp 실행후 minify, merge가 끝나고나서, 다시 원본파일을 수정하면 cmd에 gulp를 입력해서 실행해야하기때문에, 이 번거로움을 없애고자 자동화를 시켜보도록하겠습니다. 자동화는 gulp의 메소드 watch를 이용해서 실행합니다. watch는 gulp의 메서드로 제공되고 있으며 내가 지정한 파일을 지켜보고 있다가 그 파일에 변화가 생기면 자동으로 설정된 행동을 진행해줍니다. 지난 코드에서 이어서 진행하겠습니다. gulpfile.js const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify ..