Section2 Unit10 [Web Server] 기초 - Refactor Express

 

Section2 Unit10 [Web Server] 기초 - Refactor Express

 

📌 Chapter2. Refactor Express

⭐️ 과제. Mini-Node Server를 Express로 리팩토링

 

구현과정

💡 TIP. 포스트맨을 활용해서 간편하게 요청을 보내고 응답을 확인할 수 있다.

 

1. express 모듈 학습 

 어제 node.js 맛 좀 보고, 하루만에 express로 넘어왔다… 여전히 모르는거 투성이에 감도 안잡혀서 express도 node.js 찍먹한 것처럼 간단한 구현만 먼저 해보기로 했다.

 express를 공부하다 보니 node.js로 코드를 작성할 때 어려웠던 부분들이 훨씬 편하게 해결되는 것들이 보였다. express가 편하다더니, 왜 그런지 알 것 같은 느낌에 기분이 약간 좋아지기는 했었다 😂

 그래도 여전히 헷갈렸던 부분들이나, 이해가 잘 되지 않았던 부분들을 이번에는 페어 활동을 하며 도움을 많이 받았었다. 어제는 내가 미리 과제를 해서 네비게이터 역할을 했었는데, 오늘은 페어분이 먼저 과제를 하셔서 네이게이터 역할을 자연스럽게 번갈아가며 하게 되었다.

 

👩🏻‍💻 express 모듈로 서버 만들기

// express 모듈 사용
const express = require('express');
const app = express();
const port = 3000;

/*
  body-parser: 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어
  모든 요청에 대한 코드마다 json parser가 실행된다.
  strict: false primitive data type도 parsing 하도록 설정
*/
app.use(express.json({ strict: false }));

// 모든 요청에서 미들웨어 실행
app.use((req, res, next) => {
  console.log("-------------------------------------------");
  console.log(`HTTP METHOD: ${req.method}, URL: ${req.url}`);
  console.log("-------------------------------------------");
  next(); // next: 다음 미들웨어로 넘어가는 함수로 next를 실행하지 않으면 다음 미들웨어가 실행되지 않는다. 
})

// GET '/' 요청에 'Hello World'로 응답
// (다른 모든 경로에 대해서는 404 Not Found로 응답)
app.get('/', (req, res) => {
  res.send('Hello World');
});

// users로 POST 요청이 오면 jsonParser를 하고, 내용을 실행하라.
app.post('/users', (req, res) => {
  console.log(req.body)
  res.send(req.body)
})

// 서버 연결
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

2. express-server로 리팩토링

const express = require('express');
const app = express();
const port = 4999;
const cors = require('cors');

app.use(cors()); // 모든 요청에 대해 CORS 허용
app.use(express.json({ strict: false }));

// GET
app.get('/', (req, res) => {
  console.log("GET");
  res.send("GET 요청을 보냈습니다.");
})

// POST
app.post('/upper', (req, res) => {
  console.log("REQUEST", req )
  res.status(201).json(req.body.toUpperCase()); // res.json : send할 때 json형태의 데이터를 보낸다. 
  console.log("UPPER REQUEST BODY: ", req.body)
})

app.post('/lower', (req, res) => {
  res.status(201).json(req.body.toLowerCase());
  console.log("LOWER REQUEST BODY: ", req.body)
})

// ERROR
app.use((err, req, res, next) => {
  console.error(err)
  res.status(400).send(err.message);
})

app.listen(port, () => {
  console.log(`PORT ${port}`)
})

 

3. Postman 활용해서 GET, POST 메서드 확인

 

✨ 모든 요청에서 미들웨어 실행 예제 & Error 출력

 → express의 미들웨어 학습 : 모든 요청에서 미들웨어를 실행하는 예제를 구현했다.

 미들웨어는 app.use와 함께 사용되고, 주소를 첫번째 인수로 넣지 않는다면 모든 요청에서 허용된다.

 → GET 요청이 아닌 다른 경로에 대해서는 404 Error가 출력되도록 구현했다. 에러를 표시하는 걸 보고 싶어서 그 예시도 실행시켜 보았다.

 

✨ postman으로 POST 

 → postman으로 POST요청을 보내보고 싶었다. JSON 형태로 넣는 건줄 알았는데, 작동이 되지 않아서 실제 동작하는 요청의 request를 받아보니 body가 “text”형태로 출력이 되어 있었다.

 → 결론은 postman으로 POST 요청시 body에 JSON 형태로 넣는 것이 아니라, text로 넣어줘야 POST가 가능했다. 내부 로직에서 그렇게 처리한 것 같기는 한데, 아직 정확한 이유는 잘 모르겠고 추측할 뿐…

 

---

🌙  오늘의 회고

 어제 node.js로 만들었던 웹서버를 express로 바꾸는 실습을 했다. express가 사용하기 훨씬 편리해서 node로 개발하는 것보다 express를 많이 사용한다고 했다. 아주 일부분이었지만, 실제로 경험을 해보니 express의 코드가 훨씬 간결하고 가독성이 좋은것이 보여서 신기했다.

 위에서 언급했던 것처럼 오늘 페어시간에 페어분과 같이 과제를 진행하고, 과제 내 App.js 파일의 로직도 살펴보았다. 함께 토론(?)을 하고, 공부를 하면서 내가 헷갈렸던 부분들이 무엇인지 잘 알게 되었고, 모르는 부분을 같이 찾아보고, 알려주는 설명을 듣다보니 확실히 기억에 오래 남고 이해도 잘 되는 것 같았다. 이번 페어 활동은 긍정적인 영향을 많이 받은 것 같아 의미있는 시간이었다.

 그래도 여전히 어렵고, 헷갈려서 고민을 하다가 node.js + express 를 훑어보는 강의를 보기로 했다. 프론트를 해도 간단한 웹서버 구현정도는 할줄 알아야 한다고 하니 이 기회에 배워두는 것도 좋을 것 같다는 생각이 들었다. 시간이 없으니 전체적인 틀과 주요 기능을 보는 것 위주로 학습하기로 했다.

 이번 주말도 공부로 바쁘겠다… 🫠