패스트캠퍼스 챌린지 7일차 - 리팩토링 및 Express

 

0. 공부 기록

공부 시작 16 : 38

중간 저녁 + 대학 과제 (약 4시간)

공부 끝 23 : 25

총 패캠 공부 시간 : 약 3시간

 

 

백엔드 Part1이 끝났다.

사실 백엔드 강의를 그리고 이어서 Part1 부분만 작성하는 블로그 글을 작성하는 것이 목표였는데,

ch08 은 리팩토링 과정에 대한 강의라서 블로그에 작성할만한 내용이 많이 없었다.

 

그래서 본래 내일 공부할 부분을 미리 작성했다.

 

백엔드 Part 1

1. 리팩토링을 왜 하는지

코드를 작성도 하지만 코드를 읽고 해석해야하는 경우도 많음.

그럴 때 최소한의 시간을 투자하려면 처음부터 코드를 깨끗하게 만들어두면 좋음.

-> 콜백함수를 사용하여 깊게 들어가는 것은 절대 좋은 코드가 아님.

-> Promise 나 async await 기능을 활용하는 것이 훨씬 간결하고 해석하기 좋음

 

백엔드 Part 2

1. Express + NodeJS

기본 사용방법 및 express가 적용된 node 서버

//@ts-check

const express = require("express")

const app = express()
const { log } = console
const PORT = 5000


app.use('/', (req, res) => {
    res.send("hello")
})

app.listen(PORT, () => {
    log("start at", PORT)
})

 

                                       

2. Middleware !!

노드 JS + Express 는 Http 만 사용했을 때보다 훨씬 빠른 성능을 보여줌 

미들웨어를 사용하면 훨씬 더 빠르게 원하는 요청을 처리할 수 있음

미들웨어를 크게 보면 요청이 들어와서 거쳐나가는 모든 함수라고 생각하면 편함.

 

Middleware 는 인자가 3개라고 생각하자 :: req, res, next

next -> 왜냐면 노드 JS는 비동기 처리를 진행하기 때문에 언제 작업이 정확하게 끝나는지 명시를 해주어야 함.

app.use('/', (req, res, next) => {
    log("middle 1")

    setTimeout(() => {
        next()
    }, 1000)
})

app.use((req, res) => {
    log("middle 2")
    res.send("hello, middle 2")
})

Node 자체의 req, res와 Express 의 req, res는 분명 차이가 있음.

하지만, Express의 토대 또한 Node 의 기반이기에 사용하는데에는 오히려 좋아~

 

여러 미들웨어를 붙일 수 있음 :: 순서대로 거쳐감.

app.use(
    '/', 
    (req, res, next) => {
        log("middle 1-1")

        setTimeout(() => {
            next()
        }, 1000)
    },
    (req, res, next) => {
        log("middle 1-2")

        setTimeout(() => {
            next()
        }, 1000)
    }
)

app.use((req, res) => {
    log("middle 2")
    res.send("hello, middle 2")
})

                                                                                                                                                                                                              아니 그래서 미들웨어를 언제 왜 사용한느디!!
->미들웨어 자체는 혼자 실행되고 끝나는 것보다는 뒤의 함수에 영향을 주는 경우가 많음

그래서 보통 값을 다음 함수에 값을 넘겨줌.

-> 보통 req에 뮤테이션을 줘서 값을 넘겨줌  :: req.something = isSomeThing

app.use(
    '/', 
    (req, res, next) => {
        const reqAt = new Date()
        log("middle 1-1")

        // @ts-ignore
        req.reqAt = reqAt

        setTimeout(() => {
            next()
        }, 1000)
    }
)

app.use((req, res) => {
    log("middle 2")
    // @ts-ignore
    res.send(req.reqAt)
})

                                                                                                                                                                                                              비동기 처리의 미들웨어!           

app.use('/', async (req, res, next) => {
        log("middle 1-1")

        const filec = await fs.promises.readFile('.gitignore', {encoding : 'utf-8'})

        // @ts-ignore
        req.filec = filec

        next()
    }
)

app.use((req, res) => {
    log("middle 2")

    // @ts-ignore
    res.json(req.filec)
})

                                                                                                                                                                                                              요청 PATH 예시

https://expressjs.com/en/4x/api.html#path-examples

Express 4.x - API Reference

 

여러가지 Prefix 를 사용하는 예시

app.get('/users', (req, res) => {
	req.send("user List")
})

app.get('/users/:id', (req, res) => {
	req.send("user info with ID")
})

app.post('/users', (req, res) => {
	req.send("user Reg")
})

근데 이건 너무 같은 Prefix인  '/user/' 의 반복임..

 

그래서 따로 라우터를 만들어 관리하는 것이 편리함

const userRouter = express.Router()

userRouter.get('/', (req, res) => {...})
userRouter.get('/:id', (req, res) => {...})

userRouter.use('/users', userRouter)

:id 의 값을 핸들링하는 법

const USER = {
	15 : {
     nick : "foo"
    }
}

// 이런식으로 파라미터 값을 받아올 수도 있음
userRouter.param('id', (req, res, next, value) => {
	console.log(value)
    req.user = USER[value]
    next()
}

userRouter.get('/:id', (req, res) => {
	req.send(req.user)
}

 

 

bodyParser 활용법

const bodyParser = require('body-parser')

// 미들웨어에 등록하여 
app.use(bodyParser.json())

// 최신버전에서는 
 app.use(express.json())

                                                                                                                                                                                                                                                                                                                                                                                                                           

 

 

환급 챌린지 (7/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지