Node.js Twitter 만들기

준비

- 프로젝트를 위한 폴더를 하나 만들어준다.

- 내부 세팅을 해 준다.

package.json 파일을 만들어준다. >> npm init -y nodemon을 설치해준다. >> npm i nodemon express를 설치해준다. >> npm i express morgan을 설치해준다. >> npm i morgan 모두 설치한 후 package.json파일에서 "type": "module"을 설정해 줘야 한다.

 

서버를 실행시킬 기준 파일

import express from "express";
import morgan from "morgan";
import tweetsRouter from "./router/tweets.js";

const app = express();

app.use(express.json());
app.use(morgan("dev"));

app.use("/tweets", tweetsRouter);

app.use((req, res, next) => {
  res.sendStatus(404);
});

app.listen(8080);

 

express와 morgan을 import 해서 사용할 수 있게 준비를 하고, app 객체에 express를 적용시킨다.

그리고 json형식으로 사용할 수 있게 app.use(express.json())을 적용시킨다.

morgan("dev")를 사용하여 로깅을 설정한다.

 

router폴더를 만들어 tweets.js파일을 넣어둔다. 여기서 app.use("/tweets", tweetsRouter)를 사용하여 해당 url에서 응답을 받을 수 있게 해준다.

 

app.listen(8080)은 localhost:8080 서버를 사용하겠다는 것이다.

 

정보를 처리하는 파일

import express from "express";

const router = express.Router();

let tweets = [
  {
    id: "1",
    text: "안녕하세요",
    createAt: Date.now().toString(),
    name: "김사과",
    username: "apple",
    url: "https://www.logoyogo.com/web/wp-content/uploads/edd/2021/02/logoyogo-1-45.jpg",
  },
  {
    id: "2",
    text: "하이",
    createAt: Date.now().toString(),
    name: "반하나",
    username: "banana",
    url: "https://img.freepik.com/premium-vector/banana-cute-kawaii-style-fruit-character-vector-illustration_787461-1772.jpg",
  },
];

// 해당 아이디에 대한 트윗 가져오기
// GET
// http://localhost:8080/tweets?username=:username

router.get("/", (req, res, next) => {
  const username = req.query.username;
  const data = username
    ? tweets.filter((UserNM) => UserNM.username == username)
    : tweets;
  res.status(200).json(data);
});

// 글 번호에 대한 트윗 가져오기
// GET
// http://localhost:8080/tweets/:id

router.get("/:id", (req, res, next) => {
  const id = req.params.id;
  const tweet = tweets.find((ID) => ID.id === id);
  if (tweet) {
    res.status(200).json(tweet);
  } else {
    res.status(404).json({ message: `${id}의 트윗이 없습니다.` });
  }
});

// 트윗하기
// POST
// http://localhost:8080/tweets
// name, username, text
// json 형태로 입력 후 추가된 데이터까지 모두 json으로 출력

router.post("/", (req, res, next) => {
  const { text, name, username } = req.body;
  const tweet = {
    id: "10",
    text: text,
    createAt: Date.now().toString(),
    name: name,
    username: username,
    url: "https://www.logoyogo.com/web/wp-content/uploads/edd/2021/02/logoyogo-1-45.jpg",
  };
  tweets = [tweet, ...tweets];
  res.status(201).json(tweets);
});

// 트윗 수정하기
// PUT
// http://localhost:8080/tweets/:id
// id, username, text
// json 형태로 입력 후 변경된 데이터까지 모두 json으로 출력

router.put("/:id", (req, res, next) => {
  const id = req.params.id;
  const text = req.body.text;
  const tweet = tweets.find((tweet) => tweet.id === id);
  if (tweet) {
    tweet.text = text;
    res.status(201).json(tweet);
  } else {
    res.status(404).json({ message: `${id}의 트윗이 없습니다.` });
  }
});

// 트윗 삭제하기
// DELETE
// http://localhost:8080/tweets/:id

router.delete("/:id", (req, res, next) => {
  const id = req.params.id;
  tweets = tweets.filter((tweet) => tweet.id !== id);
  res.sendStatus(204);
});

export default router;

 

이제 get, post를 사용하여 응답하고 요청을 한다.

우리는 따로 데이터베이스가 없기에 let tweets라는 객체를 만들어 일부 정보를 넣어 두고 시작할 것이다.

 

 

get으로 이름에 대한 트윗을 가져오면 

이름에 대한 트윗 가져오기

 

위를 보면 url 요청을 할 때 tweets ? username=banana(쿼리)로 요청을 한 것을 볼 수 있다.

그래서 username 객체에 req.query.username을 할당하면  쿼리 파라미터로 전달된 username(key)의 값인 banana(value)를 가져오게 된다.

query는 url 에서 username=username&id=id ...이런 방식으로 나타낸 값을 가져올 수 있다.

그것을 바탕으로 username에 값이 있으면 tweets에서 filter 메서드를 사용하여 내부를 순회하면서 username과 일치하는 배열을 data 객체에 할당하게 된다.

 

 

get으로 id(글번호)에 대한 트윗을 가져오면

아이디에 대한 트윗 가져오기

 

여기서는 요청이 파라미터로 전달된 것을 볼 수 있다.

그래서 id 객체에 req.params.id를 할당하면 id(key)의 값인 2(value)를 가져오게 된다.

그것을 바탕으로 tweets에 find 메서드를 사용하여 내부를 순회하며 id값이 같은 배열을 tweet 객체에 할당하게 된다.

 

 

post로 트윗을 추가한다면

트윗 추가하기

 

트윗을 추가할 때 post 방식으로 바꾸고 전달할 내용들을 빠짐없이 전달해 줘야 한다.

우리는 body에서 text, name, username을 받아서 tweet 객체에 넣어 줄 것이다.

그리고 id는 값을 미리 설정했기 때문에 postman에서 11이라는 값을 줘도 10으로 나오게 된다.

body에 요청한 값들을 tweet에 넣어준 후 전개구문의 (...)연산자를 사용하여 기존 tweets에 새로운 tweet을 추가한다.

 

 

put으로 트윗을 수정한다면

트윗 수정하기

 

위와 같이 수정할 때는 방식을 put으로 바꾸고 전달한다.

변경할 text의 id를 파라미터를 받아서 id객체에 할당하고, 변경할 text값을 전달하고, 새로운 text객체에 할당한다. 

tweets에서 find 메서드를 사용하여 내부를 순회하고 id값을 찾아 tweet 객체에 할당한다.

tweet객체의 변수가 존재한다면, tweet.text를 새롭게 할당한 text로 바꿔준다.

 

 

delete로 트윗을 삭제한다면

트윗 삭제

결과 확인

 

위와 같이 삭제할 때는 delet 방식으로 바꾸고 전달한다.

삭제할 트윗의 id(글번호)를 받아 파라미터로 받아서 id객체에 할당한다.

그것을 바탕으로 tweets에 filter 메서드를 사용하여 id가 같지 않은 것들을 찾아서 tweets에 새롭게 할당한다. 

그러면 기존에 있던 tweets는 없고, 새로운 tweets가 생성된 것이라 볼 수 있다.