전체 글
[WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기
Socket IO 설정을 마쳤으니 이제 사용자들이 채팅을 나눌 수 있는 채팅방을 구현해보도록 하겠습니다. 구현 목표는 동일한 방에 접속한 사용자들끼리 대화를 나눌 수 있게 하는 것입니다. 가장 먼저 home.pug에서 방 이름과 채팅 메시지를 보낼 수 있는 form 태그를 구성해줍니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.c..
[WebSocket/Socket IO] 채팅 서비스 구현 4. Socket IO 설치 및 연결하기
지금까지는 웹소켓을 사용하여 채팅 서비스를 개발했습니다. 그러나 생각보다 코드 구현이 까다롭다고 느끼셨을 수 있는데요. Socket IO를 사용하면 보다 간편하게 채팅 서비스를 구현할 수 있습니다. Socket IO 설치하기 Socket IO는 양방향 실시간 통신을 지원하는 프레임워크입니다. Socket IO 또한 웹소켓 프로토콜을 사용하지만, 웹소켓을 사용할 수 없을 때 다른 방식으로 이를 지원하는 기능을 포함하고 있습니다. Socket IO의 가장 큰 장점은 이제까지 웹소켓을 사용해 구현했던 코드를 훨씬 간결하게 구현할 수 있다는 것입니다. 이제 Socket IO를 설치하고 사용해보도록 하겠습니다. npm i socket.io Socket IO 서버 구현 기존의 웹소켓 코드를 아래와 같이 업데이트합니..
[WebSocket/Socket IO] 채팅 서비스 구현 3. 닉네임 설정하기
채팅 서비스에서는 접속한 사용자를 닉네임을 통해 구분할 수 있어야겠죠. 이번에는 웹소켓을 사용하여 닉네임을 설정하는 방법에 대해 알아보겠습니다. 먼저, home.pug에서 닉네임을 입력받을 필드를 추가해주겠습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.com/mvp.css") title Zoom body header h1 Ch..
[WebSocket/Socket IO] 채팅 서비스 구현 2. 메시지 수신하기
지난 글에서는 웹소켓으로 채팅 서비스를 구현하기 위한 프로젝트 설정을 마쳤었는데요. 이번에는 웹소켓을 사용하여 메시지를 수신해보도록 하겠습니다. 먼저, 웹소켓 패키지를 설치해줍니다. npm i ws 웹소켓 서버 설정하기 패키지를 설치했다면 이제 server.js에서 웹소켓을 사용할 수 있도록 서버를 설정해줍니다. // server.js import http from "http"; import WebSocket from "ws"; import express from "express"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.stat..
[WebSocket/Socket IO] 채팅 서비스 구현 1. 프로젝트 설정
안녕하세요. 휘입니다. 이번 시리즈에서는 WebSocket과 Socket IO를 사용한 실시간 채팅 서비스를 구현하는 방법에 대해 살펴보려고 합니다. 1. 백엔드 설정하기 먼저, 프로젝트를 진행할 새로운 디렉토리를 생성하고 이동한 다음 터미널을 엽니다. (1) NodeJS 설치와 package.json 생성 Node.js를 설치합니다. 설치 완료 후 node -v를 통해 설치가 잘 됐는지 확인할 수 있습니다. 다음으로 package.json 파일을 생성해줍니다. npm init -y express를 설치해줍니다. npm i express (2) Babel 설치와 설정 자바스크립트 컴파일러 Babel을 설치해줍니다. npm i @babel/core @babel/cli @babel/node @babel/pr..
아니 에르노 ‹진정한 장소›
소위 실용서라 하는 책들을 많이 읽고 있는 요즘, 아니 에르노의 인터뷰를 읽는 경험은 과연 쓸모란 무엇인지에 대해 다시 생각해 보게 한다. 안타깝게도 문학은 많은 것들을 외면한다. 문학은 한 개인의 주관성을 사회적 보편성으로 확장해 시대에 정치적 목소리를 형성해내지만(최소한 이를 인식하는 독자에게는), 많은 목소리가 그러하듯 그것은 발설되는 순간 응집되지 못하면 금세 흩어지고 많은 하나의 메시지일 뿐이기도 하다. 그럼에도 이러한 목소리를 계속해서 읽고 또 기억하려 하는 것은 흩어졌다고 해서 그 목소리가 영원히 사라진 것은 아니기 때문이다. 문학은 결코 밥벌이와 사랑하며 살아가는 크고 작은 문제들을 당장에 해결해 주지는 못하지만, 우리가 중대한 선택을 해야 할 때 그러니까 나 또는 누군가를 위한 인생의 선..
서머싯 몸 ‹달과 6펜스›
나는 이런 생각이 든다. 어떤 사람들은 자기가 태어날 곳이 아닌 곳에서 태어나기도 한다고. 그런 사람들은 비록 우연에 의해 엉뚱한 환경에 던져지긴 하였지만 늘 어딘지 모를 고향에 대한 그리움을 가지고 산다. 태어난 곳에서도 마냥 낯선 곳에 온 사람처럼 살고, 어린 시절부터 늘 다녔던 나무 우거진 샛길도, 어린 시절 뛰어 놀았던 바글대는 길거리도 한갓 지나가는 장소에 지나지 않는다. 어쩌면 가족들 사이에서도 평생을 이방인처럼 살고, 살아오면서 유일하게 보아온 주변 풍경에도 늘 서먹서먹한 기분을 느끼며 지낼지 모른다. 낯선 곳에 있다는 느낌, 바로 그러한 느낌 때문에 그들은 사랑을 느낄 수 있는 뭔가 영원한 것을 찾아 멀리 사방을 헤매는 것이 아닐까. 또는 격세유전으로 내려온 어떤 뿌리 깊은 본능이 이 방랑..
구체적인 일상의 모습들 ⏐ 60 ⏐ 일상 에세이
어제는 교회에 갔다가 소모임에 출석했다. 처음 만나는 구성원에 집에 초대를 받았고, 그곳에서 진저 브레드 하우스를 만들며 함께 시간을 보냈다. 사실 생각보다 길어지는 모임에 조금 힘들기도 했다. 무엇보다도 처음 만나는 사람들이라 어색함도 없잖아 있었고, 영어로 이야기를 했던 터라 몇 시간 지나니 머리가 좀 아팠다. 그럼에도 새로운 자극을 받았다. 라이프 셰어링이라는 이름 하에 우리는 모였었는데, 삶을 나누는 방법은 각자의 생각을 나누는 관념적인 일 뿐만 아니라 함께 같은 공간에 모여 구체적으로 시간을 보낼 수도 있는 것이었다. 집에 돌아오는 길에 괜시리 생각이 많아졌고, 그대로 집에 들어가려다 근처의 바에 갔다. 이미 몇 번 방문 했던 곳이라 사장님과 안면이 있었고, 위스키를 마시며 이런저런 근황 얘기를..
