지금까지 express 가 가지고 있는 기능 중 get 메소드로 요청을 받았을 때를 정의해보았으니,
이번에는 응답에 대한 동작을 알아보겠습니다.
pakage.json 생성
우선 동일한 방법으로 pakage.json 을 만들기 위해 app01 폴더를 만듭니다.
npm init 으로 노드 프로젝트 폴더 안에 pakage.json 을 생성해주세요.
pakage.json 을 생성하는 방법에 대해서는 이전 포스팅을 참고해주세요.
https://blue-dot.tistory.com/166
노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express
노드 기반의 서버 노드를 이용하면 다양한 자바스크립트 어플리케이션을 개발할 수 있습니다. 그 중에서도 노드는 서버를 개발하는 데 가장 많이 사용됩니다. 서버는 네트워크를 통해 클라이언
blue-dot.tistory.com
이번에는 pakage.json 에서 몇가지를 수정해보겠습니다.
pakage.json 파일의 내용 중에서 우리가 알아두어야 할 부분들을 체크해볼게요.
{
"name": "app01",
"version": "1.0.0",
"description": "Today's first node app",
"main": "index.js",
"scripts": { // 명령어를 만들어서 사용할 수 있는 곳
// 키(사용하고 싶은 명령어) value (명령어가 실행하고 싶은 동작 )
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "bee",
"license": "MIT" // 아무나 볼 수 있는 라이센스라는 뜻
}
우리는 지난 번에 실시간으로 서버의 상태를 보여주던 nodemon 을 이번에도 사용해줄 것이기 때문에
scripe 에는 nodemon 으로 사용할 명령어를 입력해주어야 합니다.
nodemon의 사용방법에 대해서는 아래 포스팅을 참고해주세요.
https://blue-dot.tistory.com/167
노드 js 입문 공부 일지 4. nodemon 사용하기, get 메소드로 요청 받기
이전에 처음으로 서버를 만드는 것을 실행해보았습니다. https://blue-dot.tistory.com/166 노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express 노드 기반의 서버 노드를 이용하면 다양한 자바스크
blue-dot.tistory.com
그럼 우리가 이제 새롭게 만든 폴더에 명령 프롬프트로 인스톨할 것은 두 가지입니다.
express : npm install express
nodemon : npm install nodemon --save-dev
이제 기본적인 세팅이 되었습니다.
post 요청하기
post 요청 시에 데이터를 처리하는 것
post는 서버에 요청을 보내어 작업을 수행합니다. 서버에 있는 데이터를 추가하거나 삭제하거나 수정한 후에 응답을 받아냅니다. 서버의 정보를 '조작' 하겠다는 성격의 요청으로, url에 매개변수를 추가하지 않습니다.
post 요청을 처리할 때에는 body-parser 모듈을 이용해서 입력받은 요청을 읽어들입니다.
body-parser는 추가 설치 없이 사용 가능한 기본 모듈입니다.
그럼 get 과 마찬가지로 post도 html 에서 응답을 받을 수 있는 form 을 작성한 뒤에 응답을 보내볼게요.
<html>
<body>
<form action = "http://localhost:4000" method = "post">
<input placeholder="이름" name="name">
<input placeholder="주소" name="town">
<input type="submit" value = "전송">
</form>
</body>
action 에 기재된 호스팅 주소는 우리가 구동한 4000번 서버에 대한 주소를 기재하고,
method 메소드를 post 로 기재해주면 됩니다. (get 메소드를 실행할 때에는 "get" 이라고 적었습니다.)
이제 자바 스크립트에서 post에 대해 작성해볼게요.
<java script>
const express = require ("express")
const app = express()
const bodyParser = require('body-parser') //post 로 요청받은 내용은 body에 있는데 이를 파싱한다.
//post 방식으로 받은 요청 데이터는 parsing 작업을 거쳐야 한다. (파싱 = 해석 작업)
// extended 데이터 중첩 시 중첩된 데이터까지 해석할지 여부
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
//요청이 오면 처리해보자 (미들웨어 라고 함)
app.use((request, response) => { //요청 받은 것과 응답할 것
//console.log(request.query) // query는 get요청을 보냈을 때 get 요청에 따른 매개변수를 query에 넣는다.
const {name, town} = request.body
response.send(`${town}에 사는 ${name} 씨 반갑습니다.`)
})
app.listen(4000, ()=>{
console.log("4000번 포트에서 서버 구동 중 입니다.")
})
nodemon의 명령어를 입력해주고, num run dev 키워드로 실행합니다.
nodemon은 코드가 수정될 때마다 실시간으로 변경 사항을 반영해 서버를 재시작해주는 기능을 추가해주는 모듈입니다.
결과창에 post 요청 값이 정확하게 표시가 된다면 문제없이 코드가 작성된 것이에요.
여기까지 정리를 하자면
get 요청을 받았을 때 query 속성을 이용해 값을 읽어들일 수 있는 것이고,
post 요청을 받았을 때 body-parser를 이용해 값을 읽어들일 수 있는 것입니다.
이 다음으로는 라우팅에 대해서 정리하겠습니다.
'자바스크립트 JS > 리액트 React 노드 Node JS 공부일지' 카테고리의 다른 글
| 노드 js 입문 공부 일지 7. express 뷰 엔진, PUG 설치하기 (0) | 2022.11.24 |
|---|---|
| 노드 js 입문 공부 일지 6. 라우팅(routing) (0) | 2022.11.24 |
| 노드 js 입문 공부 일지 4. get 메소드로 요청 받기 (nodemon 사용하기) (1) | 2022.11.22 |
| 노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express (0) | 2022.11.22 |
| 노드 js 입문 공부 일지 2. 노드 실행하는 방법 (0) | 2022.11.22 |