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

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 ..

gulp 이해를 돕는데 가장 많이 도움을 받은 블로그입니다. 단계씩 작성해주신 글만 따라가도 잘 할 수 있습니다. 다만, 예제를 따라하면서 자세하지 않았거나 몰랐던 부분 같은 것을 기억하기 위해 글을 씁니다. (도움을 받은 블로그에서는 약간의 지식이 깔려있어야한 듯 싶습니다.) https://valuefactory.tistory.com/314 = https://programmingsummaries.tistory.com/393 gulp란? gulp시작하기 gulp 시작하기 gulp.js을 시작하기 위해 필요한 가장 기본적인 사용 방법들을 정리했습니다. gulp 개념 gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들.. valuefac..