Node.js 숙련 1주차_1

Node.js 숙련 1주차_1

---

todo-memo 프로젝트

 

📌 package.json 생성

npm init -y

 

📌 express 설치

npm install express

 

📌 mongoose 설치

npm install mongoose

 

 

📄 app.js

const express = require("express");

const app = express();
const router = express.Router();

router.get("/", (req, res) => {
  res.send("Hi!");
});

// post, put 메소드 사용시 body로 들어오는 데이터
// 사용할 수 있도록 하는 미들웨어
app.use("/api", express.json(), router);

app.listen(8080, () => {
  console.log("서버가 켜졌어요!");
});

app.use, express.json()은 미들웨어로 router로 이어짐!

건너건너 접근! 

/api 경로로 접근하면 결국 router로 연결됨.

---

front(React) & mongoose 연결

 

📌 assets파일

assets 파일 생성

 

📄 app.js

// app.js

const express = require("express");

const db = require("./models/index.js");
const todosRouter = require("./routes/todos.router.js");

const app = express();

app.use("/api", express.json(), todosRouter);
app.use(express.static("./assets"));

app.listen(8080, () => {
  console.log("서버가 켜졌어요!");
});

assets 파일을 서빙할 수 있도록 static 미들웨어를 추가!

 

 

📄 models/index.js

// models/index.js

const mongoose = require("mongoose");

// localhost의 27017 포트 번호로 MongoDB와 연결합니다.
// Database Name은 todo-demo 입니다.
mongoose.set('strictQuery', true);
mongoose.connect("mongodb://127.0.0.1:27017/todo-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
  .then(value => console.log("MongoDB 연결에 성공하였습니다."))
  .catch(reason => console.log("MongoDB 연결에 실패하였습니다."))


const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));

module.exports = db;

 

📄 기존 코드

// localhost의 27017 포트 번호로 MongoDB와 연결합니다.
// Database Name은 todo-demo 입니다.
mongoose.connect("mongodb://localhost:27017/todo-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
  .then(value => console.log("MongoDB 연결에 성공하였습니다."))
  .catch(reason => console.log("MongoDB 연결에 실패하였습니다."))

 

📄 에러 발생해 코드 추가!

// localhost의 27017 포트 번호로 MongoDB와 연결합니다.
// Database Name은 todo-demo 입니다.
mongoose.set('strictQuery', true);
mongoose.connect("mongodb://127.0.0.1:27017/todo-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
  .then(value => console.log("MongoDB 연결에 성공하였습니다."))
  .catch(reason => console.log("MongoDB 연결에 실패하였습니다."))

 

📌 mogoDB 연결 성공

mongoose 연결 성공!

---

Todo List 할 일 추가

 

📄 models/todo.js

const mongoose = require("mongoose");

const TodoSchema = new mongoose.Schema({
    value: String, // 할 일이 어떤것인지 확인하는 칼럼
    doneAt: Date, // 할 일이 언제 완료되었는지
    order: Number, // 몇 번째 할 일인지
});

// mongoose의 _id를 가상의 컬럼(todoId)로 만들어서 사용자들에게 보여줌.
TodoSchema.virtual("todoId").get(function (){
    return this._id.toHexString();
});

TodoSchema.set("toJSON", {virtuals: true})

module.exports = mongoose.model("Todo", TodoSchema);

todoId는 studio3T에는 없고 express서버에서만 있는 가상의 칼럼!

 

📄 routers/todo.router.js

const Todo = require("../models/todo.js");

// 할 일 추가
router.post("/todos", async(req, res) => {
    const {value} = req.body;
    const maxOrderByUserId = await Todo.findOne().sort("-order").exec();

    const order = maxOrderByUserId ?
        maxOrderByUserId.order + 1 : // maxOrderByUserId 있을 때
        1; // maxOrderByUserId 없을 때

    const todo = new Todo({value, order});
    await todo.save();

    return res.send({todo}); // 마지막이라 return 필요 없음.
})

 

할일 추가 번개

 

할 일 추가 studio 3T

db에는 todoId는 없는 상태인 걸 확인 할 수 있다.

---

Todo List 할 일 목록 가져오기

 

📄 routes/todos.router.js

// 할 일 목록 조회
router.get("/todos", async(req,res) => {
    const todos = await Todo.find().sort("-order").exec();

    res.send({todos});
})

할 일 목록 내림차순으로 조회

todo List get

---

Todo List 할 일 순서 변경하기

 

📄 routes/todos.router.js

// 할 일 목록 
router.patch("/todos/:todoId", async(req,res) => {
    const {todoId} = req.params;
    const {order} = req.body;

    // todoId에 해당하는 할 일이 있는가?
    // todoId에 해당하는 할 일이 없으면, 에러 출력
    const currentTodo = await Todo.findById(todoId);
    if(!currentTodo) {
        return res.status(400).json({"errorMessage": "존재하지 않는 할 일입니다."});
    }

    // order, value, done
    if(order) {
        const targetTodo = await Todo.findOne({order:order}).exec();
        if(targetTodo) {
            // 2 -> 1
            targetTodo.order = currentTodo.order;
            await targetTodo.save();
        }
        // 1 -> 2
        currentTodo.order = order;
        await currentTodo.save();
    }

    res.send();
});