수업내용 21.07.12. 웹 프로그래밍 기초

우선 VSCode와 Node를 설치해야 한다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

https://nodejs.org/ko/

Node.js

본인은 LTS를 사용중이다.

 

그리고 Postman을 설치해주자. 해당 툴은 웹서버 환경을 조금 더 편하게 테스트하게 해주는 툴이다.

https://www.postman.com/

Postman | The Collaboration Platform for API Development

---

• 그리고 VSCode를 켜서 자신이 작업할 폴더를 생성하고 해당 위치로 간다.
• 터미널을 열어준다. 터미널은 cmd(command prompt)로 열어주자.

cd 자신이 사용할 폴더경로

npm init -y
npm i express nodemon

• 다음으로 cmd에 해당 코드들을 차례대로 써주자.
  
  • nodemon 대신 supervisor를 써주어도 된다.
  • 해당 모듈의 기능은 서버스크립트를 작성 후 저장을 하게되면 원래는 서버를 끄고 다시 구동시켜야 변경된 점이 적용되는데, nodemon과 supervisor는 저장을 하는 순간 실시간으로 서버에 다시 적용시켜준다(자동으로 새로고침 됨)
• 자신이 사용할 폴더에서 npm을 초기실행 시키고 npm에서 express모듈과 nodemon모듈을 사용할 수 있도록 해주는 설정이다.

const express = require("express");
const app = express();
app.use(express.json());

app.get("/", (req, res)=>{
res.send("<h1>Hello Express!</h1>");
});

app.listen(3001, ()=>{
console.log(`Server is waiting on 3001 port`);
});

 

• 그리고 해당 폴더하위에 사용할 파일을 javascript 형식으로 하나 만들어주자.
  • 나는 app.js로 만들었다.
  • 이어서 cmd에서 nodemon '내가 코드를 작성한 파일 이름'(나는 nodemon app)을 써서 서버를 구동시키자.
• 그리고 위 코드를 기입하고 인터넷을 열어 'localhost:포트번호' 를 적어주자.

• 제대로 실행됐다면 해당 화면이 나올 것이다.

다음으로는 Postman을 통해 Json형식의 데이터를 받아와보자.

 

const express = require("express");
const moment = require("moment");
const app = express();
app.use(express.json());

let arrPurchases = [];

app.get("/", (req, res)=>{
res.send("<h1>Hello Express!</h1>");
});

app.post("/purchases", (req,res)=>{
    const{userid, goodsid} = req.body;    
});

app.listen(3001, ()=>{
console.log(`Server is waiting on 3001 port`);
});

해당코드로 작성한 뒤 Postman을 켜서 다음과 같이 설정하자.

 

1. Workspace - My Workspace로 들어가자.
2. 이어서 나오는 화면에서 다음과 같이 설정해주자.

• 라우터를 Post 형식으로 만들었으므로 Post로 설정해주고, 주소는 'localhost:포트번호/라우터의 이름'으로 쳐주자. 그리고 Body의 raw데이터형식의 JSON형식으로 지정해준 뒤, Body의 내용에 다음 사진과 같이 JSON형식을 따라 작성해주자.

• 그리고 서버에 접속을 시도한다면 이런식으로 VSCode에 출력될 것이다.
  • Console.log는 cmd에 출력되는 것이고 res.send, end는 웹페이지에 출력시킨다.

여기까지 됐으면 이제 데이터들과 시간을 결합시켜 웹페이지에 출력해보자.

 

• 먼저 npm i moment를 하여 monent모듈을 import해준다.

const express = require("express");
const moment = require("moment");
const app = express();
app.use(express.json());

let arrPurchases = [];

app.get("/", (req, res) => {
  res.send("<h1>Hello Express!</h1>");
});

app.post("/purchases", (req, res) => {
  const { userid, goodsid } = req.body;
  const date = moment().format("YYYY-MM-DD hh:mm:ss");
  console.log(userid, goodsid, date);
  let purchase = {
    userid,
    goodsid,
    date,
  };

  //구매 실패 (등록된 상품 아이디가 없다면)
  if (goodsid == undefined) {
    res.status(500).send({
      errorcode: 31000,
      errormessage: "존재하지 않는 ID입니다.",
    });
  } else {
    arrPurchases.push(purchase);
    res.status(200).end();
  }
});

app.listen(3001, () => {
  console.log(`Server is waiting on 3001 port`);
});

• 시간값을 구하는 작업 + 에러분기도 나누어보자.
• 만약 goodsid가 존재하지않는다면 상태코드를 500번으로 출력하고 에러코드와 에러메시지를 출력시킨다.
• goodsid가 존재한다면 배열에 상품을 넣고 상태코드를 200번으로 출력하며 끝낸다. 
• 그리고 Postman을 실행해보자.

• 정상적으로 실행되었다면 위와 같이 ID값과 시간이 들어오며 Postman에서는 정상일때는 아무런 메시지도 출력되지 않지만 잘못입력했을경우에는 왼쪽과 같이 에러미시지가 출력된다.

자 이 다음으로는 VSCode쪽으로 입력된 데이터들을 Query형식으로 받아오자.

const express = require("express");
const moment = require("moment");
const app = express();
app.use(express.json());

let arrPurchases = [];

app.get("/", (req, res) => {
  res.send("<h1>Hello Express!</h1>");
});

app.get("/purchases", (req, res) => {
    if(req.query.userid == undefined){
        res.status(500).send({
            errorcode: 51000,
            errormessage: "잘못된 사용자 고유번호입니다."
        });
    }else{
        //배열에서 사용자 ID를 가지고 있는 객체를 배열로 반환한다.
        //=== 는 값 + 타입 비교
        const results = arrPurchases.filter(p => p.userid === parseInt(p.userid));
        console.log();
        res.status(200).send({
            results,
        });
      }  
});

app.post("/purchases", (req, res) => {
  const { userid, goodsid } = req.body;
  const date = moment().format("YYYY-MM-DD hh:mm:ss");
  console.log(userid, goodsid, date);
  let purchase = {
    userid,
    goodsid,
    date,
  };  
  //구매 실패 (등록된 상품 아이디가 없다면)
  if (goodsid == undefined) {
    res.status(500).send({
      errorcode: 31000,
      errormessage: "존재하지 않는 ID입니다.",
    });
  } else {
    arrPurchases.push(purchase);
    res.status(200).end();
  }
});

app.listen(3001, () => {
  console.log(`Server is waiting on 3001 port`);
});

• 위와 같이 코드를 작성해주자
• filter는 배열에서 원하는 값을 받아오는 js함수이다.
• userid는 int형식이기때문에 string타입으로 받아지는 배열의 userid를 int타입으로 파싱시켜 비교해준다.
• 일치한다면 상태코드 200을 출력하며 결괏값을 배열형식으로 출력한다.
• 받아온 쿼리의 userid가 존재하지 않는다면 상태코드 500과 에러메시지를 출력한다.

• 주소에서 userid를 검색하기때문에 일치하는 id를 검색하면 다음과 같이 배열이 웹페이지에 출력된다.
• 하지만 잘못된 입력값을 준다면 오른쪽 사진과 같이 에러코드와 함께 상태코드 500번을 출력한다.