EJS4 NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 4 NestJS와 Socket.io를 사용한 채팅 서버 구현 이번에는 채팅 페이지의 기능을 고도화하고, 간단한 css를 입혀보겠습니다. index.ejs 수정 Send 필요한 파일과 스크립트 불러오기: 이 코드는 채팅 애플리케이션에 필요한 스타일시트, Socket.IO 라이브러리, jQuery 라이브러리, 그리고 자체적으로 작성한 socket.js 파일을 불러옵니다. 채팅 메시지를 표시할 영역 생성: 태그는 채팅 메시지를 보여주는 영역을 생성하며, 태그를 사용해 메시지 목록을 표시합니다. 메시지 입력 및 전송을 위한 폼 생성: 태그는 메시지를 입력하고 전송할 수 있는 폼을 생성합니다. 태그는 사용자가 메시지를 작성할 수 있는 입력 필드를 생성하며, 태그는 메시지를 전송할 수 있는 버튼을 생성합니다. 소켓 이.. 2023. 4. 28. NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 3 NestJS와 Socket.io를 사용한 채팅 서버 구현 이번 페이지에서는 NestJS와 Socket.io를 사용하여 간단한 채팅 서버를 구현하는 방법을 알아봅니다. 필요한 패키지 설치 먼저, Socket.io와 관련된 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요. npm install --save @nestjs/websockets @nestjs/platform-socket.io socket.io-client 채팅 게이트웨이 생성 NestJS의 게이트웨이를 사용하여 소켓 서버를 생성합니다. 터미널에서 다음 명령을 실행하여 채팅 게이트웨이를 생성하세요. nest generate gateway chat 생성된 src/chat.gateway.ts 파일을 열고 다음과 같이 수정합니다. impor.. 2023. 4. 19. NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 2 NestJS와 EJS를 사용한 뷰 구성 이번 페이지에서는 EJS를 사용하여 NestJS 애플리케이션에서 뷰를 구성하는 방법을 알아봅니다. 필요한 패키지 설치 먼저 EJS와 관련된 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요. npm install --save ejs @nestjs/serve-static 뷰 엔진 설정 src/app.module.ts 파일을 열고 다음과 같이 수정하여 EJS 뷰 엔진을 설정합니다. import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ServeStaticMo.. 2023. 4. 17. NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 1 이번 시리즈에서는 NestJS, EJS, 및 Socket.io를 사용하여 실시간 채팅 서버를 구축하는 방법을 소개합니다. NestJS는 효율적인 백엔드 애플리케이션을 구축할 수 있는 강력한 Node.js 프레임워크입니다. EJS는 쉽게 HTML 템플릿을 생성할 수 있는 서버 사이드 템플릿 엔진이며, Socket.io는 실시간 어플리케이션을 만들기 위한 라이브러리입니다. 이 글에서는 프로젝트 설정과 NestJS에 대한 간단한 소개를 진행합니다. 완성모습 더 많은 기능들과 더 이쁜 디자인이 추가되면 좋겠지만 이번 토이프로젝트의 목적은 간단한 채팅기능페이지 구현이기 때문에 더 많은 기능 을 구현하진 않았습니다. 추후에 기능확장과 디자인 수정은 고려해보겠습니다. NestJS 개요 NestJS는 TypeScrip.. 2023. 4. 17. 이전 1 다음
