[웹 풀사이클 데브코스 TIL] 4주차 Day 4 - Express 실습, REST API 구현

본 내용에 들어가기 앞서 Express를 사용하는 이유가 궁금해져서 찾아봤습니다 😺

Express는 Node.js를 위한 웹 프레임워크로 보다 편리하고 구조화된 방식으로 웹을 구성할 수 있도록 돕는 역할을 합니다.

 

미들웨어?

Express는 미들웨어(Middleware)를 지원하기 때문에, 요청과 응답 사이에서 동작하는 기능을 쉽게 추가할 수 있고,
이를 통해 로깅, 인증, 데이터 변환 등을 처리할 수 있습니다 !

app.use(), app.METHOD()

 

함수를 이용해 미들웨어를 호출 할 수 있고

next()

를 호출하여 다음 미들웨어 함수로 넘길 수 있습니다.

 

미들웨어는 다양한 종류가 있는데요, 

https://expressjs.com/ko/guide/using-middleware.html 여기에서 자세히 확인할 수 있습니다

 

라우팅 기능

Express를 사용하지 않으면 라우팅을 구현하기 위해 URL, HTTP 메서드를 수동으로 파싱 해서 개발자가 요청에 대한 처리를 전부 해야하는데요, Express를 사용하면  app.get(), post(), put().. 등의 메서드를 사용해서 라우팅을 쉽게 정의할 수 있습니다

→ 편하니까 사용한다 👾

 

주소를 전달해서 화면에 띄워보자!

// 채널 주소: https://www.youtube.com/@15ya.fullmoon
// 채널 주소: https://www.youtube.com/@ChimChakMan_Official

app.get('/:nickname', function(req,res){

    const param = req.params

    res.json({
        channel : param.nickname
    })
})

이런 식으로 작성하고 localhost:1234/@15ya.fullmoon 을 입력하면

이렇게 출력이 됩니다 ! 

수동으로 값을 전달해주기만 한건데 .. 전 되게 재밌었어요.. ㅎㅎ ^^ 

 

제대로 익히기 위해서 몇 개 더 해봤습니다 ㅎㅎ 유튜브에서 제가 공부할 때 듣는 최애 플리.. 공유합니다.

https://www.youtube.com/watch?v=bHvT0SNITuU 비 내리는 타동숲 마을로 ~ 🚖🌧️

app.get('/:youtubeURL', function(req,res){

    const param = req.params

    res.json({
        channel : param.youtubeURL
    })
})

// 비내리는 어느 타동숲 마을로 : https://www.youtube.com/watch?v=bHvT0SNITuU

 

사실 이건 이번 시간에 안 배운 건데 ,,, watch부터의 주소를 넣었더니 이런 결과가 나오더라고요 🧐

이렇게 나오는 이유는, 위에서 처음에 작성했던 /nickname으로 받은 걸로 인식이 돼서 watch가 닉네임으로 출력이 되는 것입니다.. 

 

?가 들어간 주소는 params 말고 query로 받아주어야 합니다 ㅎㅎ

타동숲 동영상의 타임라인 주소를 복사해서 넣어주었어요

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


    res.json(q)
})

// 비내리는 어느 타동숲 마을로 : https://www.youtube.com/watch?v=bHvT0SNITuU
// 영상 타임라인 주소 : https://www.youtube.com/watch?v=bHvT0SNITuU&t=277s

v는 그렇다 치고,, t까지 자동으로 출력되는 게 신기합니다..

app.get('/watch', function(req, res){
    const q = req.query
    console.log(q.v)
    console.log(q.t)

    res.json({
        video : q.v,
        timeline : q.t
    })
})

^ , ^

 

자바스크립트의 비구조화 ?

(내가) 알기 쉽게 배열로 예를 들어볼게요

const fruits = ['apple', 'banana', 'orange'];

const apple = fruits[0];
const banana = fruits[1];
const orange = fruits[2];

이렇게 각각의 과일을 따로따로 선언하면 상당히 불편합니다

 

비구조화 할당 방식으로 선언한다면?

const [fruit1, fruit2, fruit3] = ['apple', 'banana', 'orange'];

한 줄에 나타낼 수 있어요 => 배열의 비구조화

 

그렇다면 위에서 우리가 작성한 url 중 q, t도 비구조화 할당 방식으로 선언해 볼게요

    const {v, t} = req.query
    console.log(v)
    console.log(t)

    res.json({
        video : v,
        timeline : t
    })
})

앞선 결과와 똑같이 나오는 걸 확인할 수 있습니다  =>  JS객체(JSON)의 비구조화

 

비구조화할당 전                                                                                                 후

 

 

자바스크립트 네이밍 룰

폴더, 파일 

[kebab-case] cf. snake_case

두 개 이상의 단어를 합쳐서 쓸 땐, 첫 번째 단어와 두 번째 단어 사이에 '하이픈' (-) 또는 '언더바'(_)을 넣는다 (통일만 해주세요)

알파벳 소문자를 사용한다

ex ) demo-api, object-api-demo.js

 

변수, 함수

[camelCase]

두 개 이상의 단어를 합쳐서 쓸 땐, 두 번째 단어의 첫글자를 '대문자로' 사용한다

ex ) channelTitle, videoNum

 

클래스

[PascalCase]

 

 

Map() 사용

let db = new Map();
db.set(1, "NoteBook") // 키로 밸류를 찾을 수 있는 한 쌍을 저장
db.set(2, "Cup")
db.set(3, "Chair")

console.log(db)
console.log(db.get(1))
console.log(db.get(2))
console.log(db.get(3))

Map() 은 키-값 쌍을 저장하고 관리하는데요, 삽입 한 대로 순서가 유지되고 다양한 데이터 타입을 사용할 수 있기 때문에
꼭꼭 학습해야합니다 ✨

이제 이 map을 express와 함께 사용 해 보려고 하는데요, 
혼자서 NoteBook, Cup, Chair를 출력 해 보는 연습을 했는데.. 

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

이렇게 하면 주소 뒤에 /1을 입력할 시 NoteBook이 출력되지만! 앞서 배운걸 활용해서 한번에 출력 해보려고 합니다.

 

app.get('/:n', function (req, res){
    const n = parseInt(req.params.n);

    res.json(db.get(n))
})

( ⸝⸝ ᷇࿀ ᷆⸝⸝ƪ) 이렇게 하면 성공이에요 !! .. 맨날 먼저 안해보고 뒤로 넘겨서 강의 보고 했는데.. 
나 자신에게 칭찬을 드립니다 😺

 

객체가 들어있지 않은 id를 주소에 입력 했을 때의 예외처리를 해 봅시다

app.get('/:id', function (req, res){
    const id = parseInt(req.params.id);

    if (db.get(id) == undefined){
       res.json({
        message: "없는 상품입니다."
       })
    } else {
        res.json({
            id : id,
            productName : db.get(id)
        })
    }
})

만약 else문 없이 아래에다가 res.json을 작성한다면 어떨까요? 

 

app.get('/:id', function (req, res){
    const id = parseInt(req.params.id);

    if (db.get(id) == undefined){
       res.json({
        message: "없는 상품입니다."
       })
    } 
    res.json({
        id : id,
        productName : db.get(id)
    })
})

이런식으로 else if문을 삭제하고 if문에서 res.json을 보내도록 코드를 짜면, 서버 자체에서는 작동하지만

이렇게 에러가 뜨기 때문에 else문을 사용하는 편이 좋습니다..