스레드 페이지 제작

+const app = require('../server');
+const db = require('../db');
+
+app.get('/thread/:tid', async(req, res) => {
+    let thread = await db.get('thread').findOne(req.params.tid);
+    if(!thread) {
+        res.status(404).send('그런 스레드는 없습니다.');
+    }
+    res.render('thread', {thread});
+});
\ No newline at end of file

+<style>
+	.card {
+		padding: 10px;
+		margin-bottom: 10px;
+	}
+</style>
+<section id="app" style="max-width: 600px;margin: 10px auto 0;">
+	<div class="card">
+		<h3 class="card-title">
+			{{thread.title}}
+		</h3>
+		<h6 class="card-subtitle text-muted">#1 {{thread.writer}} {{dateFromObjectId thread._id}}</h6>
+		<p class="card-text">{{thread.content}}</p>
+	</div>
+	<div class="card" v-for="thread in threads">
+		<h6 class="card-subtitle text-muted">\{{thread.writer}} \{{dateFromObjectId(thread._id)}}</h6>
+		<p class="card-text">\{{thread.content}}</p>
+	</div>
+	<textarea class="form-control" id="input-content" v-model="content" rows="5" required></textarea>
+	<button class="btn btn-primary" @click="write()">작성</button>
+</section>
+<script src="https://unpkg.com/vue@next"></script>
+<script src="/socket.io/socket.io.js"></script>
+<script>
+let socket;
+let app = {
+    data() {
+        return {
+            threads: [],
+			content: ''
+		}
+	},
+	methods: {
+		dateFromObjectId(o) {
+			o = new Date(parseInt(o.toString().substring(0, 8), 16) * 1000);
+			return `${o.getFullYear()}-${o.getMonth()}-${o.getDate()} ${o.getHours()}:${o.getMinutes()}`;
+		},
+		write() {
+		    socket.emit('write', this.content);
+		    this.content = '';
+		}
+	},
+	created() {
+        socket = io();
+        socket.emit('init', '{{thread._id}}');
+        socket.on('thread', (thread) => {
+            this.threads.push(thread);
+		});
+	}
+};
+Vue.createApp(app).mount('#app');
+</script>
\ No newline at end of file