Java Script(11)-미들웨어 요청방식 실습: tweets

JavaScript/Node JS

Java Script(11)-미들웨어 요청방식 실습: tweets

두설날 2024. 4. 26. 18:07

*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*

package.json과 nodemon, express, morgan 웹 프레임워크를 사용하기 위해서, npm init으로 package.json프로젝트를 만든 후 npm install -g nodemon, npm install express, npm install morgan으로 사용할 프레임워크나 라이브러리를 설치합니다.

// package.json 프로젝트 시작
npm init
// nodemon 라이브러리 설치
npm install -g nodemon
// express 프레임워크 설치
npm install express
// morgan 라이브러리 설치
npm install morgan

// package.json 파일
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^3.1.0"
  },
  "dependencies": {
    "express": "^4.19.2",
    "morgan": "^1.10.0"
  }
}

.gitignore 파일을 생성해서 git에 사용하지 않는 파일을 지정해줍니다.

// .gitignore 파일
node_modules/
.gitignore
pack-lock.json

클라이언트 요청을 수신하고 응답하는 역할을 할 파일로 app.js 파일을 만듭니다. import로 express, morgan을 연결하고, tweets.js파일에서 router를 가져옵니다. 미들웨어 요청에 대한 설정은 다음 파일에서 설정합니다. 해당 파일은 메인 application파일이므로, 엔드포인트를 설정해서 호출되도록 설정합니다.

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

const app = express(); //express appplication생성

app.use(express.json()); //json파일을 pathing해주는 미들웨어 함수 추가
app.use(morgan("dev")); // dev포맷으로 로그 활성화

app.use('/tweets', tweetsRouter); // 서버 엔드포인트를 /tweets로 설정, tweetsRouter로 미들웨어 전달

app.use((req,res,next)=>{
    res.sendStatus(404);
}); // 미들웨어 요청 처리되지 않을시 404코드 반환

app.listen(8080); // 웹서버 포트 8080설정

app.js파일에서 express applicaiton안에서 사용되는 라우터를 정의할 파일로 tweets.js 파일을 생성합니다. express.Router()로 router객체를 생성하고, 미들웨어 요청방식이 get, post, put, delete 4가지 방식으로 처리하도록 정의합니다. 미들웨어 요청방식은 CRUD같이 쿼리를 가져오거나, 추가하거나, 수정, 삭제를 설정합니다.

import express from "express";
const router = express.Router();
let tweets = [
    {
        id: '1',
        text: '안녕하세요!',
        createdAt: 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: '반갑습니다!',
        createdAt: Date.now().toString(),
        name: '반하나',
        username: 'banana',
        url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJSRyel4MCk8BAbI6gT_j4DBTEIcY0WW4WWfoklymsWA&s'
    }
];


// 해당 아이디에 대한 트윗 가져오기
// GET
// http://localhost:8080/tweets?username=:username
router.get('/', (req,res,next) =>{
    const username = req.query.username;
    const data = username 
        ? tweets.filter((tweet) => tweet.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((tweet) => tweet.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/logoyog'
    };
    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;  // 외부에서 불러와 사용할 수 있도록 설정