merge feature/chat branch

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+**node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+#보안관련
+.package-lock.json
\ No newline at end of file

+const express = require("express");
+const http = require("http");
+const app = express();
+const path = require("path")
+const server = http.createServer(app);
+const socketIO = require("socket.io")
+const moment = require("moment")
+
+
+const io = socketIO(server);
+
+app.use(express.static(path.join(__dirname, "src")))
+const PORT = process.env.PORT || 3000;
+
+io.on('connection', (socket) => {
+    socket.on("chatting", (data)=>{
+        const { name, msg } = data;
+        io.emit("chatting", {
+            name,
+            msg,
+            time: moment(new Date()).format("h:ss A")
+        })
+    })
+});
+
+server.listen(PORT, ()=>console.log(`server is running ${PORT}`))
\ No newline at end of file

+{
+  "name": "chat",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon ./app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "dayjs": "^1.11.2",
+    "express": "^4.18.1",
+    "moment": "^2.29.3",
+    "socket.io": "^4.5.1"
+  }
+}

+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height : 100%;
+}
+
+.wrapper {
+    height : 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.user-container {
+    background: rebeccapurple;
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+.user-container .nickname {
+    font-size : 14px;
+    margin-right : 1.5rem;
+    margin-left : 1rem;
+    color:#fff;
+}
+
+.user-container input {
+    border-radius: 3px;
+    border: none;
+    height: 80%;
+}
+
+.display-container {
+    background: #D2D2FF;
+    flex : 12;
+    overflow-y:scroll;
+}
+
+.input-container {
+    flex:1;
+    display:flex;
+    justify-content: stretch;
+    align-items: stretch;
+}
+
+.input-container span {
+    display: flex;
+    justify-content: flex-start;
+    align-items:center;
+    padding: 0.3rem;
+    width: 100%;
+}
+
+.chatting-input {
+    font-size:12px;
+    height:100%;
+    flex:8;
+    border:none;
+}
+
+.send-button {
+    flex:1;
+    background: rebeccapurple;
+    color:#fff;
+    border:none;
+    height:100%;
+    border-radius:3px;
+}
+
+.chatting-list li {
+    width:50%;
+    padding:0.3rem;
+    display:flex;
+    justify-content: flex-start;
+    align-items:flex-end;
+    margin-top:0.5rem;
+}
+
+.profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+}
+
+.profile .user {
+    font-size: 10px;
+    margin-bottom: 0.3rem;
+}
+
+.profile .image {
+    border-radius: 50%;
+    object-fit: cover;
+    width: 50px;
+    height: 50px;
+}
+
+.message {
+    border-radius: 5px;
+    padding: 0.5rem;
+    font-size: 12px;
+    margin: 0 5px;
+    flex: 10;
+}
+
+.time {
+    font-size: 10px;
+    margin: 0 5px;
+}
+
+.sent {
+    flex-direction: row-reverse;
+    float: right;
+}
+
+.sent .message {
+    background: #9986EE;
+    color: #fff;
+}
+
+.received .message {
+    background: #fff;
+}
\ No newline at end of file

+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="user-container">
+            <lable class="nickname" for="nickname">닉네임설정</lable>
+            <input type="text" id="nickname">
+        </div>
+        <div class="display-container">
+            <ul class="chatting-list">
+                
+            </ul>
+        </div>
+        <div class="input-container">
+            <span>
+                <input type="text" class="chatting-input">
+                <button class="send-button">전송</button>
+            </span>
+        </div>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="js/chat.js"></script>
+</body>
+</html>
\ No newline at end of file

+"use strict"
+//const socket = io.connect("http://localhost:3000/", {transports:['websocket']});
+const socket = io();
+
+const nickname = document.querySelector("#nickname")
+const chatlist = document.querySelector(".chatting-list")
+const chatInput = document.querySelector(".chatting-input")
+const sendButton = document.querySelector(".send-button")
+const displayContainer = document.querySelector(".display-container")
+
+chatInput.addEventListener("keypress", (event)=> {
+    if(event.keyCode === 13) {
+        send()
+    }
+})
+
+function send() {
+    const param = {
+        name: nickname.value,
+        msg: chatInput.value
+    }
+    socket.emit("chatting", param)
+}
+
+sendButton.addEventListener("click", send)
+
+socket.on("chatting", (data)=>{
+    console.log(data)
+    const {name, msg, time} = data;
+    const item = new LiModel(name, msg, time);
+    item.makeLi()
+    displayContainer.scrollTo(0, displayContainer.scrollHeight)
+})
+
+//console.log(socket);
+
+function LiModel(name, msg, time) {
+    this.name = name;
+    this.msg = msg;
+    this.time = time;
+
+    this.makeLi = ()=>{
+        const li = document.createElement("li");
+        li.classList.add(nickname.value === this.name ? "sent":"received")
+        const dom = `<span class="profile">
+            <span class="user">${this.name}</span>
+            <img class="image" src="https://placeimg.com/50/50/any" alt="any">
+        </span>
+        <span class="message">${this.msg}</span>
+        <span class="time">${this.time}</span>`;
+
+        li.innerHTML = dom;
+        chatlist.appendChild(li)
+    }
+}
\ No newline at end of file