Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ddodoi 님의 블로그

3주차-파트06: EXPRESS, 객체, JSON 본문

웹풀스택 일일정리

3주차-파트06: EXPRESS, 객체, JSON

ddodoi 2024. 9. 1. 23:27

CHAPTER 1. HTTP vs EXPRESS

✔️HTTP: 웹 서버 역할을 하게 만드는 모듈


 

✔️EXPRESS: 웹서버 생성을 담당하는 프레임워크로 HTTP에 비해 서버를 생성할 때 쉽게 생성할 수 있다.

 

NPM 에서 Express 설치 관련 페이지

https://www.npmjs.com/package/express

 

express

Fast, unopinionated, minimalist web framework. Latest version: 4.19.2, last published: 5 months ago. Start using express in your project by running `npm i express`. There are 85407 other projects in the npm registry using express.

www.npmjs.com

 

 

다음 명령어로 express모듈을 터미널에 설치해준다.

npm i express

 

설치 후 explorer-demo.js파일을 만들고 다음과 같이 입력한다.

 

 

 

저번 강의에 이 부분을 참고하여 get을 이해해보자.

 

 

코드 실행 후 url 창에 localhost:1234를 치면 잘 돌아가는 걸 확인할 수 있다.

 

다음 코드를 추가해보자. url창에 localhost:1234/test를 입력하면 다음 코드의 결과를 볼 수 있다.

app.get('/test',function(req,res){
  res.send("TEST SUCCESS")
})

이는 GET 메서드로 '/test'가 날라오면 매개변수로 전달받은 콜백 함수를 호출하겠다고 서버에 셋팅해 놓는 것이다.

 

 

 

 

 

 

 

 

 

CHAPTER 2. 객체

위에서는 서버에 요청에 대한 응답으로 문자열을 보냈었다. 그러나 node js에서는 두줄 이상의 문자열부터는 보내지지 않는다. 따라서 자바스크립트 객체를 요청에 대한 응답으로 보낼 경우 훨씬 편할 것이다.

 

객체

존재하는 사물 혹은 개념이다. 우리 세상은 객체로 이루어져 있다. 주어 자리에 왔을 때 문장이 만들어지면 객체이다.

데이터를 보낼때 하나씩이 아닌 모아모아 덩어리로 보냈다 => "객체"

ex)

"개미"라는 책

   상품명 : 개미

   저자: 베르나르베르베르

   상품가격: 15000

다음 속성들은 개미라는 책 객체의 데이터 속성들이다.

 

 

Json

javascript object notation의 약자.

자바스크립트 객체가 어떻게 생겼나 (= 어떤 형태인가)에서 출발한 키-밸류의 형태의 자료구조이다.

 

위의 책을 자바스크립트 객체로 표현해보자.

let book = {

title: "Ant",

writer: " Bernard Werber",

price: 15000

}

 

새로운 파일 object-demo.js를 만들어 객체를 그대로 표현하고 출력해보자.

 

 

 

그럼 위에 res.sed코드를 res.json으로 바꿔주자.

app.get('/test',function(req,res){
  res.json({
    say: "TEST SUCCESS"}
  )
})

 

 

잘 작동한다.

 

 

 

객체 예시의 책도 다음처럼 전달해줄 수 있다. 

app.get('/product/1',function(req,res){
  res.json({  title: "Ant",    
    writer: "Bernard Werber",   
    price: 15000 })
})

 

실행시

 

 

 

 

 

 

이번에는 객체 예시의 책 객체를 통째로 전달해주도록 explorer-demo.js파일 에 다음 코드를 추가 해보자. 이 경우 프론트엔드에서 객체의 정보를 받아 다루기 굉장히 쉬워진다.

let book = {
  title: "Ant",    
  writer: "Bernard Werber",   
  price: 15000 
  }

app.get('/product/1',function(req,res){
  res.json(book)
})

 

 

 

실행시

 

 


 

이번에는 입력받는 url값을 json으로 출력하도록 해보자.

 

✔️req.params

url로 전달받은 매개변수를 전부 req.params에 담는다.

const express = require('express')
const app = express()

app.listen(1234)   //port번호 1234으로 설정


app.get('/product/:n',function(req,res){
    // : => express에서는 url로 전달받은 매개변수를 전부 req.params에 담는다.
    //product/__ 빈칸에 오는 값을 n이라는 변수에 담아줘

    //console.log(req.params)
    //console.log(req.params.n)

    res.json({
        num: req.params.n
    })

})

 

 

 

/product 뒤에 999를 입력하니 999가 출력된다.