req.params연습(쿼리스트링, 객체, Map객체)

저번포스팅에서는 req.params을 이용해 / 뒤의 값을 받아서 출력해줬습니다. 

const express = require('express')
const app = express()
app.listen(3000)

app.get('/products/:id',function(req,res){
   
    res.json({
        num:req.params.id
    });
})

 

쿼리스트링

유튜브 링크와 같은 다른 링크들을 살펴 보면 아래처럼 ? 뒤에 어떠한 값들이 있는데 이걸 쿼리라고 부릅니다. 

https://www.youtube.com/watch?v=ChaOUGzpQqo 

 

req.query를 사용하면 ? 뒤에 값을 받아올 수 있습니다. 

app.get('/watch',function(req,res){
    const q = req.query;
    console.log(q);
    res.json({
        
    });
})

 

아래의 링크로 접속을 해보면  콘솔창에 물음표 뒤의 값을 가져옵니다. 

 

콘솔에 찍힌값을 화면에 출력해주겠습니다. 콘솔의 출력 형태를 보면 중괄호안에 값들이 있기 때문에 이미 json형식입니다. 따라서 코드는 아래와 같습니다. 

app.get('/watch',function(req,res){
    const q = req.query;
    console.log(q);
    res.json(q);
})

 

 

출력하는 객체의 형태를 수정해보겠습니다. 영샹코드 : hi , 시작지점 : 251s 처럼 표현하려면 아래처럼 수정하면됩니다.

q.v와 q.t를 통해 값에 접근합니다. 

//영상코드 :, 시작지점 : 
app.get('/watch',function(req,res){
    const q = req.query;
    console.log(typeof(q));
 
    res.json({
        '영상코드':q.v,
        '시작지점':q.t
    });
})

 

추가적으로 & (AND)연산자를 통해 URL로 접근해줍니다. 

 

구조분해할당(비구조화할당)

객체의 구조분해할당을 이용할 수 도 있습니다. 객체의 키값은 v와 t이기 때문에 아래처럼 가능합니다. 

app.get('/watch',function(req,res){
    const q = req.query;
    
    const{v,t} =req.query;
    console.log(q);
 
    res.json({
        '영상코드':v,
        '시작지점':t
    });
})

 

 

 

객체반환

' http://localhost:3000/choims1 '로 접속했을때는 choims1객체의 데이터를

' http://localhost:3000/choims2 '로 접속했을때는 choims2객체의 데이터를 출력하고 싶습니다. 

객체는 아래와 같습니다. 

let youtuber1 = {
    channelTitle : "choims",
    sub :"593만명",
    videoNum : "993개"
}
let youtuber2 = {
    channelTitle:"choims2",
    sub:"10명",
    videoNum:"10개"
}

 

if문과 else if 문을 이용하여 해결할 수 있습니다.

app.get('/:nickname',function(req,res){
    console.log(req.params);
    const {nickname} = req.params;
    if(nickname=="choims1")
    {
        res.json(youtuber1);
    }
    else if(nickname=="choims2")
    {
        res.json(youtuber2);
    }
})

 

추가적으로 정의하지 않은 주소로 접근했을때 예외처리도 가능합니다. 

if ..
else if ..
else{
        res.json({
            error:"잘못된 주소입니다"
        })
    }

 

 

---

MAP

맵객체는 기존 객체와는 다르게 메소드만을 이용해 값을 넣고 뺍니다. 기본적으로 삽입, 조회, 삭제를 할 수 있습니다.

다른 메소드도 가능합니다. 

let max = new Map();

// set으로 맵 객체에 삽입
max.set('id', 0);
max.set('이름', '최명수');
max.set('전공', '컴퓨터공학');
max.set('나이', 25);

// 이차원 배열로 넘겨주는 것도 가능합니다
let michael = new Map([
  ['id', 0],
  ['이름', '최명수'],
  ['전공', '컴퓨터공학'],
  ['나이', 25],
]);

// get으로 맵 객체 조회
max.get('이름'); // "최명수"

// delete로 삭제
max.delete('나이'); // 삭제가 성공하면 true를 반환

// clear로 맵 안의 프로퍼티 전부삭제
max.clear();

 

그럼 왜 맵객체를 사용할까요?

• 문자열이 아닌 값도 키로 사용 가능 : 일반적인 객체의 경우 문자열을 통해서만 조회가 가능하지만(.뒤에 숫자입력하면 에러) 맵 객체에서는 get메소드의 인자로 숫자를 넘겨줘도 제대로 값을 찾아올 수 있습니다. 
• 메소드 사용의 명확성 : .이나 []로 접근할 필요 없이 메소드로만 접근하여 수정 조회가 가능하다. 따라서 동작과 의도를 더 정확하게 보여줄 수 있습니다. 
• 깔끔한 순회 : 기존에는 객체에서는 키를 이용해 그 값을 얻었는데 entries()를 이용하면 키-값을 쌍으로 묶은 데이터를 반환.

 

 

언제 써야 좋을까요?

객체의 프로퍼티를 자주 변경해야 할때 좋습니다. 메소드 이름들이 예측 가능하여 동작이 명확하고, 기존 객체와 달리 순회도 쉽게 이루어져 데이터를 조작하기 적합합니다. 

 

 

map을 활용해 각각의 url로 접속했을때 그에 맞는 데이터를 보여주겠습니다.

• localhost:3000/1 로 접속하면 NoteBook 데이터를
• localhost:3000/2 로 접속하면 Cup 데이터를
• localhost:3000/3 로 접속하면 Chair 데이터를

따라서 get 메소드를 활용해서 res.json에 담아서 보내주면 되겠다 라는 생각을 했습니다.

const express = require('express')
const app = express()
app.listen(3000)

let db = new Map();
db.set(1,"NoteBook");
db.set(2,"Cup");
db.set(3,"Chair");


app.get('/:id', function (req, res) {
    res.json(db.get(1))
  })

 

따라서 get(숫자) , 숫자 자리에 url의 값을 받아서 넣어주면 되겠다라고 생각 한 후 아래처럼  작성했는데 접속해보면 아무런 데이터가 출력되지 않았습니다. 

const express = require('express')
const app = express()
app.listen(3000)

let db = new Map();
db.set(1,"NoteBook");
db.set(2,"Cup");
db.set(3,"Chair");


app.get('/:id', function (req, res) {
    console.log(req.params.id);
    const id = req.params.id;
    res.json(db.get(id))
  })

 

 

그래서 설마 현재 키 값이 정수형이니까 id를 정수형으로 변경해줘야하나?라고 고민 한 후 다시 작성했더니

 

const express = require('express')
const app = express()
app.listen(3000)

let db = new Map();
db.set(1,"NoteBook");
db.set(2,"Cup");
db.set(3,"Chair");


app.get('/:id', function (req, res) {
    const id = req.params.id;
    res.json(db.get(Number(id)));
  })

 

잘 출력됩니다.

 

 

현재 MAP의 구조를 보면 키값과 문자열만 저장하고 있습니다. 

Key(id)	Value(prodcut)
1	"Notebook"
2	"Cup"
3	"Chair

 

그럼 Value값에 상품의 이름뿐만 아니라 가격과 같은다른 정보도 넣어보겠습니다.

Key(id)	Value(prodcut)
1	"Notebook" / 200000
2	"Cup"
3	"Chair

 

set을 하기전에 객체를 만들어서 set할때 키값과 같이 넣어주면 됩니다.

만약 각 상품에 id를 넣고 싶으면 app.get안에서 get으로 받아온후  product.id = id를 하여 추가할 수 있습니다. 

const express = require('express')
const app = express()
app.listen(1017)

let notebook = {
    productName:"Notebook",
    price:200000
}
let cup ={
    productName:"Cup",
    price:3000
}
let chair ={
    productName:"Chair",
    price:10000
}
let poster ={
    productName:"Poster",
    price:20000
}
let db = new Map();
db.set(1, notebook);
db.set(2, cup);
db.set(3, chair);
db.set(4, poster);

app.get('/:id', function (req, res) {
    const id = Number(req.params.id);
    console.log(db.get(id));


    if (db.get(id) == undefined) {
        res.json({
            error: "잘못된 주소 입니다"
        })
    }
    else {
        product = db.get(id)
        product.id = id
        res.json({
            product
        });
    }
})

 

결과입니다.