node>요약

node

1. server.js 파일을 하나 만들어줍시다. 

거기다가 서버코드짤 것임 


2. 에디터 상단 terminal 눌러서 터미널을 열 수 있는데

거기다가 npm init -y 를 입력합시다. 

package.json 파일 생성해주는 명령어입니다. 
 
3. 터미널에 npm install express를 입력합시다. 

express라는 라이브러리를 설치하는 명령어입니다. 


4.npm install -g nodemon 
npx nodemon server.js 

5. server.js 파일안에 서버코드 작성

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs')

const { MongoClient } = require('mongodb')

let db
const url = 'mongodb+srv://hjw1191:zxc123@hjw1191.zaqklsn.mongodb.net/?retryWrites=true&w=majority&appName=hjw1191'
new MongoClient(url).connect().then((client)=>{
  console.log('DB연결성공')
  db = client.db('forum')
  app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중')
})

}).catch((err)=>{
  console.log(err)
})


app.get('/', (요청, 응답) => {
  응답.sendFile(__dirname + '/index.html')
})

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  console.log('dd')
  응답.send(result[0].title)
})


6.html 파일 넣기

npm install ejs 설치 - app.set('view engine', 'ejs')  -  views 폴더생성 - .ejs 파일 만듬(html파일을 자동 변환)
public 폴더 생성 - css 만들기


7.데이터를 ejs 파일로 보내기.

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  응답.render('list.ejs', { 글목록 : result })
})

<%= JSON.stringify(글목록) %>  // 받은 데이터를  출력하는법 <% , 깨지면 josn

ejs 파일에
<div class="white-bg">
      <div class="list-box">
        <h4><%= 글목록[0].title %></h4>
        <p>글내용임</p>
      </div>
      <div class="list-box">
        <h4>글제목임</h4>
        <p>글내용임</p>
      </div>
    </div> 

.반복 순환 함수
for (var i = 0; i < 글목록.length; i++) 
forEach
map


9.nav.ejs 
views 파일에 새로운 ejs 넣고 
wirte.ejs  에 <%- include('nav.ejs') %> 삽입

10. 유저가 데이터를 보냄 > 서버 > 데이터베이스에 저장.

-1. 새로운 파일 ( views - wirte.ejs) list에서 복붙

 <form class="form-box" action="/add" method="POST">
        <h4>글쓰기</h4>
         <input name="title">
         <input name="content">
         <button type="submit">전송</button>
     </form> 

form 의 형식임.

-2. 서버.js 에서 
app.use(express.json())
app.use(express.urlencoded({extended:true})) 

app.get('/write', (요청, 응답) => {
  응답.render('write.ejs')
})

app.post('/add', (요청, 응답) => {
  console.log(요청.body)
})

-3. db에 저장
await db.collection('post').insertOne(저장할데이터) 

app.post('/add', async (요청, 응답) => {
  await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
  응답.send('작성완료')
})

응답.redirect() 다른페이지로

-4.에러 코드 & 검사 if
app.post('/add', async (요청, 응답) => { 
  try {
    if (요청.body.title.trim() === '') { 
      응답.send('제목을 입력하지 않았습니다.');
    } else {
      await db.collection('post').insertOne({ title: 요청.body.title, content: 요청.body.content });
      응답.redirect('/list'); 
    }
  } catch (e) {
    console.log(e);
    응답.status(500).send('DB 에러 발생');
  }
});


11. 상세페이지 (get('/detail/:aaa')
-0. 서버.js
const { ObjectId } = require('mongodb') 

-1. 새로운 상세페이지 .ejs 만듬 (기존에서 내용만 바꿈)

-2. app.get('/detail/:aaaa', (요청, 응답) => {
  응답.send('detail.ejs')
}) // aaa아무런 문자가 와도 작동함

-3.
#1. 누가 /detail/어쩌구로 접속하면

#2. _id가 어쩌구인 글을 DB에서 찾아와서 

#3. ejs에 글을 박아서 유저에게 보냄

app.get('/detail/:id', async (요청, 응답) => {
  let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
  응답.render('detail.ejs', { result : result })
})

#4. 링크
<h4>
 <a href="/detail/<%= 글목록[i]._id %>">
  <%= 글목록[i].title %>
  </a>
</h4>

#5. 에러잡기

app.get('/detail/:id', async (요청, 응답) => {
  try {
    let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
    if (result == null) {
      응답.status(400).send('그런 글 없음')
    } else {
      응답.render('detail.ejs', { result : result })
    }
    
  } catch (){
    응답.send('이상한거 넣지마라')
  }
  
})

12.수정기능 만들기
-0.삭제, 수정등 하기위한 라이브러리
npm install method-overrid

const methodOverride = require('method-override')
app.use(methodOverride('_method')) 

-1.
#1. 글마다 있는 수정버튼 누르면 글수정할 수 있는 페이지로 이동

-edit.ejs 
-app.get('/edit/:id', (요청, 응답) => {
  응답.render('첫째글 수정페이지')
})
-list.ejs 에서 
<form action="/edit?_method=PUT" method="POST">  
        <h4>수정하기</h4>
        <input type="hidden" name="id" value="<%= result._id %>">
        <div class="mb-3">
            <input type="text" name="title" value="<%= result.title %>" class="form-control" id="edit-title">
        </div>
        <div class="mb-3">
            <input type="text" name="content" value="<%= result.content %>" class="form-control" id="edit-content">
        </div>
        <button type="submit" class="btn btn-primary">전송</button>
    </form> 

#2. 그 페이지엔 글의 제목과 내용이 이미 폼에 채워져있어야함

app.put('/edit/:id', async (요청, 응답) => {
  let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
  응답.render('edit.ejs', {result : result})
})
#3. 전송누르면 그걸로 기존에 있던 document를 수정해줌 

app.post('/edit', async (요청, 응답)=>{
  await db.collection('post').updateOne({ _id : new ObjectId(요청.body.id) },
    {$set : { title : 요청.body.title, content : 요청.body.content }
  })
  응답.redirect('/list')
}) 

13.삭제기능