ChangHoon's IT Blog

안녕하세요! 이번 강좌에서는 지난 포스팅에 이어서 Socket.io를 이용한 실시간 데이터 송/수신을 구현해보도록 하겠습니다! [목차] 1. 서버 코드 작성 2. HTML 수정 3. 클라이언트 자바스크립트 생성 4. 클라이언트 코드 작성 5. 테스트 먼저 코드의 소스코드를 작성해줍니다. io.sockets.on('connection', function(socket) { console.log('유저 접속 됨') socket.on('send', function(data) { console.log('전달된 메시지:', data.msg) }) socket.on('disconnect', function() { console.log('접속 종료') }) }) /* 서버를 8080 포트로 listen */ serve..

안녕하세요 이번 강좌에서는 서버 응답에 관련된 부분을 진행하도록 하겠습니다. [목차] 1. 디렉토리 구조 잡기 2. HTML, CSS 예제 파일 생성 3. 서버 코드 수정 기존 파일에서 static 폴더를 생성합니다. static 폴더 안에는 index.html 파일을 생성합니다. 그 후 css 폴더와 js 폴더도 함께 생성합니다. css 폴더 안에는 index.css 파일도 하나 생성해 주시면 됩니다. Node.js 테스트!~안녕하세요!!! 생성한 index.html 파일에는 위와 같이 작성해 줍니다. #main { margin: auto; margin-top: 100px; background-color: gray; text-align: center; width: 200px; } 그리고 index.cs..

안녕하세요 이번 강좌에서는 지난번에 설치한 Express 모듈을 사용하여 서버를 실행해보도록 하겠습니다. [목차] 1. 모듈 불러오기 2. Express 객체 생성 3. 서버 실행 지난 시간에 express 와 socket.io 모듈을 설치하였습니다. 폴더에 app.js 파일을 하나 생성해 주세요! app.js 파일에 아래 코드를 입력해 주세요! (초록색부분은 주석이므로 작성하지 않아도 됩니다.) /* 설치한 express 모듈 불러오기 */ const express = require('express') /* 설치한 socket.io 모듈 불러오기 */ const socket = require('socket.io') /* Node.js 기본 내장 모듈 불러오기 */ const http = require(..

Node.js 를 사용하여 실시간 채팅 서비스를 구현해보려고 합니다. Node.js 는 서버로 클라이언트는 웹으로 진행하겠습니다. 개발 환경 준비 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. ..

안녕하세요! 이번 포스트는 Node.js 를 설치하고 개발을 편리하게 도와주는 에디터를 설치해보도록 하겠습니다. 이번 포스트의 목차로는 [목차] 1. Node.js 란? 2. Node.js 특징 3. Node.js 설치 4. Brackets 설치 5. Brackets 플러그인 설치 6. VSCode(Visual Studio Code) 설치 7. Node.js 실습 (4+5 대신 6번 한개의 프로그램을 설치하여 사용하시는 것을 더 추천합니다.) [Node.js란?] Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장..