React, MySQL 풀스택 2일차(Tabl 데이터 웹 화면에 출력하기)

PedroTech님의 풀스택 강의 2일차를 참고하였습니다.

 

📌 테이블에 데이터 추가하기

저는 Table에 데이터를 추가하기 위해 HeidiSQL를 사용했습니다.
강의에서는 insomnia를 활용해서 데이터를 추가했습니다.

 

 

📌 Table 데이터 가져오기

// ./server/routes/Posts.js
const express = require("express");
const router = express.Router();
const { Posts } = require("../models");

router.get("/", async (req, res) => {
  // Table에 있는 데이터 전체 다 가져오고 json 형태로 결과를 출력합니다.
  const listOfPosts = await Posts.findAll();
  res.json(listOfPosts);
});

router.post("/", async (req, res) => {
  const post = req.body;
  await Posts.create(post);
  res.json(post);
});

module.exports = router;

GET과 POST일 때 두 가지 경우를 만들어놓고 상황에 알맞게 결과를 출력합니다.

Posts라는 변수에는 models라는 Table과 관련된 내용이 담긴 폴더입니다.
Table에 있는 데이터를 가져오기 위해선 해당 정보가 필요하기 때문에 변수로 생성한 것입니다.

post 함수에서 req.body는 { 칼럼명1: "데이터", 칼럼명2: "데이터" } 의 형태를 의미합니다.

모든 결과를 json 형태로 출력하기 위해 함수 마지막에 json()을 사용했습니다.

 

 

📌 화면에 내용 출력하기

// ./server/index.js
const express = require("express");
const app = express();
app.use(express.json());

const db = require("./models");

// Routers
const postRouter = require("./routes/Posts");
app.use("/posts", postRouter);

db.sequelize.sync().then(() => {
  // (portNum, function)
  app.listen(3001, () => {
    console.log("Server running on port 3001");
  });
});

url이 /posts일 때 postRouter의 내용을 보여주기 위해서 app.use('/posts', postRouter)을 사용했습니다.

전체적인 기능은 여기서 적용해줘야 다 정상적이게 작동이 됩니다.

 

 

📌 결과

/posts 일 때 출력되는 화면

DB에 대한 정보를 설정할 때 host: localhost, port: 3001로 설정했기 때문에 루트 url은 localhost:3001이 됩니다.
따라서 /posts는 localhost:3001/posts로 해줘야 합니다.

이렇게 Table에 있는 데이터를 웹으로 출력이 가능해졌습니다.

 

 

📌 느낀 점

HeidiSQL는 학교에서 배워서 알게 되었는데 이렇게 다른 곳에 활용한 적은 처음이라서 굉장히 뿌듯하고 성장한 느낌이 듭니다.

앞으로 더 자세히 배워서 언젠가 SQL을 만들어야 할 때 머뭇거리지 않고 만들 수 있도록 노력할 것입니다.