server - Express로 upper / lower 구현하기 복기

 

너무나도 생소한 서버 공부 어떻게 구현 했는지 과정을 남겨 보고자 블로깅을 하였습니다!

우선 express 설치와 nodemon 실행 했다는 가정하에 진행하겠습니다!!@#

 

1. express 설치 및 nodemon 실행하고 기본 구조 작성하기!

 

 

처음 위와 같은 구조로 작성 하였습니다!!! get요청이 실행되면서 브라우저에 출력 되었고 터미널 창도 에러없이 잘 출력되었습니다!!!

 

---

2. 정적파일 불러오기를 활용해서 브라우저에 html파일 출력하기!

 

 

Express에서 정적파일 제공을 참고하여 app.use(express.static('client') 코드를 작성해서 브라우저에 출력 되도록 만들었습니다! 여기서 client는 하나의 디렉토리 파일이고 안에 index.html 파일이 있습니다!

 

---

 

3. post 요청 upper / lower구현하기!  (express.json 활용하기)

 

 

18번줄에 post방식으로 진행했고 콘솔에 req.body 출력해서 확인했는데 터밀널 창과 같이 undefined가 뜨는 현상이 발생했습니다. 그래서 이를 다음 아래와 같이 해결했습니다. (DDD출력된거 새로고침안해서.....)

 

 

 

10번 코드를 사용해서 원시데이터 타입도 제이슨형태로 parsing 해주도록 설정하였습니다! 제이슨은 object 니까요!! express가 기본적으로 내장된 함수입니다! 너무 유용합니다!!! 어쨋든 터밀널 창에 joycoding이라는 텍스트가 확인이 되었습니다! 여기서 많이 막혔는데 이제 구현만 하면 됩니다!!!

 

 

 

오우야!! result를 출력해보니 uppercase가 구현이 되었습니다!!! 이제 이것을 json 형태로 보내주면 출력이 됩니다!

 

 

 

 

upper를 구현했으니 lower도 upper와 같은 방식으로 해결하면 끝!!!!!!

 

---

4. 모든 요청 대해 cors를 허용하기!

 

 

 

 

네트워크 헤더에서 Response Headers를 보면 cors작업을 안한것을 알 수 있습니다!

 

 

 

 

여기서 3번줄에서 express에서 제공하는 cors를 불러와서 11번줄을 활용해서 이것을 사용해줍시다! 그러면 모든 요청에 대해 cors를 허용합니다. 그리고 나서 다시 upper을 하면 Response Headers 보면 Access-Control-Allow-Origin * 가 나왔음을 알수 있습니다 여기서 response의 Access-Control-Allow-Origin 의 값을 * 기호를 넣은 것은 모든 접근을 허용하겠다라는 뜻으로 알면 되겠습니다!!

 

 

 

최종 코드

const express = require('express') // 모듈을 불러온다.
const app = express(); // 모듈을 app담아 서버를 만듭니다!
const cors = require('cors') // cors 미들웨어를 불러온다.
 
const port = 5000;
const ip = 'localhost';
 
//우리가 구현해야될 파일 불러 오기!!
app.use(express.static('client'))
app.use(express.json({strict: false})); // primitive data type 도 parsing 해주도록 설정
app.use(cors()); // 모든 요청에 대해 CORS 를 허용한다.
 
//GET
app.get('/', (req, res)=>{
  res.send('시작해봅시다!!');
})
 
//POST 
//upper 구현하기
app.post('/upper', (req, res)=>{
  console.log(req.body);
  let result = req.body
  result = result.toUpperCase()
  console.log(result)
  res.json(result)
})
//loewr 구현하기
app.post('/lower', (req, res)=>{
  console.log(req.body);
  let result = req.body
  result = result.toLowerCase()
  console.log(result)
  res.json(result)
})
 
app.listen(port, ()=>{
  console.log(`http server listen on ${ip}:${port}`);
})

 

 

최종 코드 (코드 정리)

const express = require('express') // 모듈을 불러온다.
const app = express(); // 모듈을 app담아 서버를 만듭니다!
const cors = require('cors') // cors 미들웨어를 불러온다.
const port = 5000;
const ip = 'localhost';
 
//우리가 구현해야될 파일을 불러 오기!!
app.use(express.static('client'))
app.use(express.json({strict: false})); // primitive data type 도 parsing 해주도록 설정
app.use(cors()); // 모든 요청에 대해 CORS 를 허용한다.
 
 
//POST 
//upper 구현하기
app.post('/upper', function(req,res){
    res.json(req.body.toUpperCase())
})
})
//loewr 구현하기
app.post('/lower', function(req,res){
    res.json(req.body.toLowerCase())
})
 
app.listen(port, ()=>{
  console.log(`http server listen on ${ip}:${port}`);
})