[220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수

목록

1.   라우터와 미들웨어

2.   미들웨어 매개변수 next

3)   라우터 매개변수

 

 

---

 

미들웨어와 라우터의 정의

미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어다.

 

라우터는 클라이언트의 요청경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다.

이러한 역할을 라우팅이라고 하는데, URI(통합 자원 식별자, 인터넷에 있는 자원을 나타내는 주소)의 정의와 URI가 클라이언트 요청에 응답하는 방식을 의미한다.

 

express에선 라우터를 미들웨어로 다음과 같은 기능을 제공하고 있다.

1) 라우터 객체 참조

2) 라우팅 함수 등록

3) 라우터 객체를 app객체에 등록

해당 라우터가 실행되면 첫번째 인자값인 '/'을 충족한 후에, 두번째 인자값인 미들웨어가 실행된다.

장점 : 모든 로직을 서버에서 관리하기 때문에 관리, 유지 보수가 편해지고, 확장성이 좋아진다.

단점 : 모든 라우터, 모든 미들웨어에 똑같은 코드를 실행해주려면 똑같은 코드를 다 적어줘야함.

 

 

---

 

 

미들웨어 매개변수 next

app.use('/',(req,res,next)=>{
    console.log('나는 next야')
    next()
})

미들웨어의 세번째 인자 next : 내 조건에 맞으면 코드 실행할거야!

코드 맨 마지막에 사용하는 next() : 내 코드 아래로 조건에 맞는 코드를 한번 더 찾을게!

 

 

//use의 역할 : 모든 request method를 실행햐게 해줘
//'/' : 모든 메인페이지를 선택함
//실행할 미드웨어 
app.use('/',(req,res,next)=>{
    console.log('나는 next야')
    next()
})

app.get('/',(req,res)=>{
    res.send('hello world')
})

//라우터    (콜백)는 미들웨어
app.get('/profile',(req,res)=>{
    console.log('나 실행되게해줘')
    res.send('hello profile')
})

app.get('/login',(req,res)=>{
    res.send('hello login')
})

app.listen('3000',()=>{
    console.log('server 3000')
})

실행 결과

 

---

 

라우터 매개변수

app.get('/:ingoo',(req,res)=>{
    let a = req.params.ingoo //'/:ingoo'를 뜻함
    res.send(`hello, ${a}`)
})

/ 뒤에 오는 주소를 모두 ingoo라는 변수 안에 저장하겠다는 표시.

보통 전역적으로 사용하지 않고 파일 안에 넣어서 한정된 조건으로 사용한다.

예)  /user/event/login/:ingoo 

 

그래서 순서를 지켜서 사용해야 한다.

만약 / 뒤에 오는 모든 queyr를 받도록 작성했는데, 맨 위에 올라가있다? 다음과 같은 현상이 일어난다.

app.get('/:ingoo',(req,res)=>{
    let a = req.params.ingoo //'/:ingoo'를 뜻함
    res.send(`hello, ${a}`)
})

# 어떤 url을 입력해도 모두 /뒤에 뭔가 오네? -> 오케이, 전부 ingoo에 저장!
# 이 밑으로 아무도 실행되지 못함

app.get('/user/login',(req,res)=>{})
app.get('/user/list',(req,res)=>{})
app.get('/user/write',(req,res)=>{})

얘가 모든 명령어를 받아서 실행하고 밑에 있에 있는 코드로 넘겨주지않기때문에 주구장창 저 코드만 실행된다.

이게 바로, 코드가 책을 읽듯이 내려온다는 속성과, 코드의 속성을 잘 이해하고 작성해야하는 이유다.

 

 

---

 

정적파일을 가져와 주는 미들웨어

app.use('/',express.static('public'))

 

1) use : get이던 post던 몽땅 받아서 미들웨어를 실행시켜 줄게.

2) '/' : 라우트 매개변수명이

3) express.static('public') : 뒤에 오는 파일명이나 파일경로와 같다면 파일을 열어서 실행해줘

4) 모든 정적(static) 파일을 가져와서 보내줄때 사용함.

5) 정적인 파일은 비동기실행이 되지 않는 데이터. css, img같은 파일들

 

예시 )

app.use('/',express.static('public'))

localhost:3000 / index.css

 

1) 라우터의 경로를 우선 확인하고 : '/'을 우선 찾기

2) 미들웨어를 실행한다. : '/' 뒤에 있는 index.css가 public 폴더 안에 있다면 실행해줌

3) 파일을 열었다면 next를 실행하지 않음. 이미 실행했는데 굳이 밑에 있는 코드를 읽을 필요가 없음.

 

예시 )

app.use('/css',express.static('public'))

localhost:3000 / css / index.css

1) 라우터의 경로를 우선 확인하고 : '/css'을 우선 찾기

2) 미들웨어를 실행한다. : '/css' 뒤에 있는 index.css가 public 폴더 안에 있다면 실행해줌