Notice
Recent Posts
Recent Comments
Link
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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
- fetch api
- jsx
- JavaScript
- css animation
- ๊ณ ์ฐจํจ์
- props drilling
- ์๋งจํฑ์์
- Effect Hook
- ํผํฐ ๋ชจ๋น์ ๋ฒ์ง ๋ชจํ
- ์คํ ์ด์ธ ์ฝ๋
- React
- ํ ์คํธ ์์
- ํผํฐ ๋ชจ๋น
- ํ๋ก๊ทธ๋๋จธ์ค
- ์ ์ด์ฝฅ ๋์จ
- State
- ์ปดํจํฐ ๊ณตํ
- git
- Cmarket
- prototype
- WEB
- css
- Lifting state
- wai-aria
- BFS์ DFS
- Study
- html
- ์คํ ์ด์ธ ์ฝ๋42๊ธฐ
- ๋ฒ์ง ๋ชจํ
- ๋ฒ๋ค๋ง
Archives
- Today
- Total
roqkf
[Web Server] Refactor Express ๋ณธ๋ฌธ
โค๏ธ๐ฅ Express
- Node.js ํ๊ฒฝ์์ ์น ์๋ฒ, API ์๋ฒ๋ฅผ ์ ์ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ํ๋ ์์ํฌ
[Express๋ก ๊ตฌํํ ์๋ฒ๊ฐ Node.js HTTP ๋ชจ๋๋ก ์์ฑํ ์๋ฒ์ ๋ค๋ฅธ ์ ]
- ๋ฏธ๋ค์จ์ด๋ฅผ ์ถ๊ฐ ๊ฐ๋ฅ
- ๋ผ์ฐํฐ ์ ๊ณต // https://expressjs.com/ko/guide/routing.html
โค๏ธ๐ฅ ๊ธฐ๋ณธ ๋ผ์ฐํ
โญ ๋ผ์ฐํ
- URI ๋ฐ ํน์ ํ HTTP ์์ฒญ ๋ฉ์๋์ธ ํน์ ์๋ ํฌ์ธํธ์ ๋ํ ํด๋ผ์ด์ธํธ ์์ฒญ์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ตํ๋ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ ๊ฒ/ ์๋ ํฌ์ธํธ์ ์ ์, ํด๋น ์๋ํฌ์ธํธ์ ๋ํด์ ํด๋ผ์ด์ธํธ ์์ฒญ์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ตํ๋ ๋ฐฉ์
- ๋ฉ์๋์ url๋ก ๋ถ๊ธฐ์ ์ ๋ง๋๋ ๊ฒ
- ํด๋ผ์ด์ธํธ๋ ํน์ ํ HTTP ์์ฒญ ๋ฉ์๋์ ํจ๊ป ์๋ฒ์ ํน์ URL๋ก HTTP ์์ฒญ์ ๋ณด๋ด๋๋ฐ, ๋ผ์ฐํ ์ ํด๋ผ์ด์ธํธ์ ํด๋นํ๋ ์๋ํฌ์ธํธ์ ๋ฐ๋ผ ์๋ฒ๊ฐ ์๋ตํ๋ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ค.
โญ ๋ผ์ฐํฐ
- ํจํท์ ์์น๋ฅผ ์ถ์ถํ์ฌ, ๊ทธ ์์น์ ๋ํ ์ต์ ์ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ์ฌ, ์ด ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ๋ฐ์ดํฐ ํจํท์ ๋ค์ ์ฅ์น๋ก ์ ํฅ์ํค๋ ์ฅ์น, ํ ๊ฐ์ ์ธํฐ๋ท ํ์ ์ ์ฌ๋ฌ ๊ฐ์ ๋คํธ์ํฌ๊ฐ ์ฌ์ฉํ ์ ์๋๋ก ์ชผ๊ฐ์ด ์ค๊ณ ์ญํ ์ ํด ์ฃผ๋ ์ฅ์น ex) ์ธํฐ๋ท ๊ณต์ ๊ธฐ
โญ ๋ผ์ฐํธ
- ๊ฒฝ๋ก, ์๋ก ๋ค๋ฅธ ๋คํธ์ํฌ ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ณ ์ ์กํ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ ๊ฒฝ๋ก
app.METHOD(PATH, HANDLER)
ex)
app.get('/', (req, res)=> {
res.send('Hello World!')
})
์์ ๊ฐ์ด ๊ฐ ๋ผ์ฐํธ๋ ํ๋ ์ด์์ ํธ๋ค๋ฌ ํจ์๋ฅผ ๊ฐ์ง ์ ์์ผ๋ฉฐ, ํจ์๋ ๋ผ์ฐํธ(๊ฒฝ๋ก)๊ฐ ์ผ์นํ ๋ ์คํ๋๋ค.
- app: express์ ์ธ์คํด์ค
- METHOD: HTTP ์์ฒญ ๋ฉ์๋
- PATH: ์๋ฒ์์์ ๊ฒฝ๋ก
- HANDLER: ๋ผ์ฐํธ(๊ฒฝ๋ก)๊ฐ ์ผ์นํ ๋ ์คํ๋๋ ํจ์
๐ ex) /user ๋ผ๋ ๋ผ์ฐํธ์ ๋ํ PUT ์์ฒญ์ ์๋ต
app.put('/user', (req, res) => {
res.send('Got a PUT request at /user')
})
โค๏ธ๐ฅ ๋ผ์ฐํ : ๋ฉ์๋์ url์ ๋ฐ๋ผ ๋ถ๊ธฐํ๊ธฐ!
Node.js๋ก ๋ผ์ฐํ
์ ๊ตฌํ
const http - require('http');
const PORT = 4999;
const ip = 'localhost'
const requestHandler = (req, res) => {
// ์์ฒญ ๊ฒฝ๋ก๊ฐ lower์ผ ๋
if(req.url === '/lower') {
if(req.method === 'GET'){
res.end(data)
} else if(res.method === 'POST'){
req.on('data', (req, res) => {
// do something
})
}
}
}
Express๋ก ๋ผ์ฐํ
์ ๊ตฌํ
const express - require('express');
const router = express.Router()
router.get('/lower', (req, res) => {
res.send(data);
})
router.post('/lower', (req, res) => {
// do something
})
โค๏ธ๐ฅ Middleware
- ๋ฏธ๋ค์จ์ด ํจ์๋ req ๊ฐ์ฒด, res ๊ฐ์ฒด ๊ทธ๋ฆฌ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฒญ-์๋ต ์ฃผ๊ธฐ ์ค์์ ๊ทธ ๋ค์์ ๋ฏธ๋ค์จ์ด ํจ์์ ๋ํ ์ก์ธ์ค ๊ถํ์ ๊ฐ๋ ํจ์์ด๋ค.
- ์์ฒญ๊ณผ ์๋ต์ ํ๋ ๊ณผ์ ์์ req, res ๊ฐ์ฒด์ ๋ํด ์ ๊ทผ ๊ถํ์ ๊ฐ์ง๊ณ ๋ณํ์ํฌ ์ ์์ผ๋ฉฐ ๋ฏธ๋ค์จ์ด ์คํ ๋ด ๋ค์ ๋ฏธ๋ค์จ์ด ํจ์์ ๋ํ ์ ๊ทผ ๊ถํ์ next๋ผ๋ ์ธ์๋ก ๊ฐ๋ ํจ์์ด๋ค.
- next ํจ์๋ฅผ ์ด์ฉํ์ฌ ๋ค์ ๋ฏธ๋ค์จ์ด๋ก ํ์ฌ ์์ฒญ์ ๋๊ธธ ์ ์์ผ๋ฉฐ ์ด ํจ์๋ฅผ ํตํด ๋ฏธ๋ค์จ์ด๊ฐ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌ๋๋ค.
๐ค ์ฃผ๋ก ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ๋ ์ํฉ
1. POST ์์ฒญ ๋ฑ์ ํฌํจ๋ body(payload)๋ฅผ ๊ตฌ์กฐํํ ๋(์ฝ๊ฒ ์ป์ด๋ด๊ณ ์ ํ ๋)
2. ๋ชจ๋ ์์ฒญ/์๋ต์ CORS ํค๋๋ฅผ ๋ถ์ฌ์ผ ํ ๋
3. ๋ชจ๋ ์์ฒญ์ ๋ํด url์ด๋ ๋ฉ์๋๋ฅผ ํ์ธํ ๋
4. ์์ฒญ ํค๋์ ์ฌ์ฉ์ ์ธ์ฆ ์ ๋ณด๊ฐ ๋ด๊ฒจ์๋์ง ํ์ธํ ๋
'๐ป Development > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
UI & UX (0) | 2022.12.18 |
---|---|
JSON (0) | 2022.12.16 |
[Web Server] CORS (0) | 2022.12.11 |
REST API (0) | 2022.12.11 |
[Web] HTTP (0) | 2022.12.11 |