이전에 처음으로 서버를 만드는 것을 실행해보았습니다.
https://blue-dot.tistory.com/166
노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express
노드 기반의 서버 노드를 이용하면 다양한 자바스크립트 어플리케이션을 개발할 수 있습니다. 그 중에서도 노드는 서버를 개발하는 데 가장 많이 사용됩니다. 서버는 네트워크를 통해 클라이언
blue-dot.tistory.com
이제 두 번째 서버를 만들어 볼 거예요.
첫 번째 서버를 만들었던 과정 그대로 진행하여 아래의 네 개의 파일들이 생성이 되었습니다.
저는 두 번째 서버라고 이름 지었어요.
처음 서버를 만들었을 때와 같이 app.js 에 다음과 같이 태그를 입력합니다.
const express = require("express")
const app = expres()
app.listen(4003, () => {
console.log("4003번 포트에서 구동 중...")
})
nodemon
이번에는 새로운 기능을 추가해보겠습니다.
nodemon 이라고 하는 기능입니다.
https://www.npmjs.com/package/nodemon
nodemon
Simple monitor script for use during development of a Node.js app.. Latest version: 2.0.20, last published: 2 months ago. Start using nodemon in your project by running `npm i nodemon`. There are 4059 other projects in the npm registry using nodemon.
www.npmjs.com
nodemon 은 코드가 수정될 때마다 라이브 코딩을 할 수 있도록 실시간으로 변경 사항을 반영해줍니다.
자동 재시작을 실행해주는 nodemon은 개발 단계에서만 주로 사용하는 모듈이에요.
해당 모듈을 인스톨할 때에는 다음과 같이 작성합니다.
npm install nodemon --save-dev
위 명령어에서 추가한 옵션은 ‘개발용 모듈’임을 나타내는 옵션입니다.
인스톨을 한 후에는 package.json 에서 한 가지 더 추가할 것이 있습니다.
package.json 에서
스크립트의 내용을 수정해주어야 합니다.
스크립트는 명령어입니다. dev라는 명령어를 사용했을 때 nodemon app이 실행되도록 할 수 있습니다.
node 에 라이브 코딩이 포함된 실행환경을 사용하고 싶기 때문에 nodemon을 설치한 후,
설치는 프로젝트 안에 설치하였기 때문에 윈도우 명 령프롬프트에서 실행했을 때 실행이 안 될 수 있습니다.
이를 위해 package.json 에 nodemon 을 실행하겠다는 명령어를 입력을 해야 실행이 됩니다.
이제 본격적으로 터미널에서 실행을 해보겠습니다.
npm run dev 를 입력해줍니다.
실행화면이 다음과 같이 나온다면 무탈하게 실행이 된 것입니다.
get & post
이번에는 서버와 클라이언트로써 요청과 응답을 주고 받는 것을 해볼게요.
GET : 서버에 요청을 보내어 응답을 받아냅니다. 서버로부터 정보를 ‘가져오겠다’는 성격의 요청입니다.
url에 매개변수를 추가하여 요청합니다.
POST : 서버에 요청을 보내어 작업을 수행합니다. 서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아냅니다.
서버의 정보를 ‘조작하겠다’는 성격의 요청입니다. url에 매개변수를 추가하지 않습니다.
웹 페이지를 볼 때 주소창에 이런 식으로 기재된 페이지를 본 적 있으실 거예요.
index?
? 뒤에 있는 값은 url의 매개변수로 이 값이 바뀌면 다른 값으로 넘어갑니다.
이 페이지를 요청할 때 요청에 대한 추가 정보를 get 으로 받은 페이지입니다.
즉 페이지에 url이 매개변수로 처리되는 것은 모두 get 요청에 의한 페이지라는 공통점이 있습니다.
get 요청 시 데이터 처리하는 것을 직접 해볼게요.
우선 index.html 을 만들어줍니다.
지금까지 html 의 form에서 action 을 공란으로 두고 빈 양식만을 제출처 없이 submit 했다면,
이번에는 지금 갓 만든 서버로 제출된 양식을 보내볼게요.
<body>
<form action="http://localhost:4003/" method = "get">
<input type="text" placeholder="ID" name="userid"/> <br/>
<input type="password" placeholder="PW" name="userpw"/> <br/>
<input type="submit" value="로그인"/><br/>
</form>
</body>
form의 action 에 적힌 값은 로컬 호스트의 값입니다.
get 메소드를 이용해서 submit 으로 제출이 되면 4003 호스트는 폼 양식에 기재된 값을 가져갑니다.
이제 자바스크립트의 값을 작성하겠습니다.
const { response } = require("express")
const express = require("express")
const app = express()
//app.use() : 서버에 추가 동작을 정의하는 메소드
// 추가 동작 = 함수
// req 요청 res 응답
app.use( (req, res) => { // 추가 동작을 미리 정의해놓는 메소드
console.log(req.query) // 추가 동작에 해당하는 함수를 등록. query 요청 매개변수
res.send("요청 잘 받았어요!") // 응답을 보낸다
} )
요청을 받았을 때 추가동작을 할 수 있도록 자바스크립트를 작성합니다.
express가 가지고 있는 기능 중 get 메소드로 요청을 받았을 때 추가 동작을 정의합니다.
직접 실행을 해보겠습니다.
각 메소드와 문법 기능들에 익숙해져야겠습니다. ^^;
이렇게 구동을 확인하고 나서는 터미널에서 ctrl + c 로 동작을 종료해주고,
Go Live 또한 동작을 중지해주는 것이 좋습니다!
'자바스크립트 JS > 리액트 React 노드 Node JS 공부일지' 카테고리의 다른 글
| 노드 js 입문 공부 일지 6. 라우팅(routing) (0) | 2022.11.24 |
|---|---|
| 노드 js 입문 공부 일지 5. post 요청하기 (nodemon 실행하기) (0) | 2022.11.24 |
| 노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express (0) | 2022.11.22 |
| 노드 js 입문 공부 일지 2. 노드 실행하는 방법 (0) | 2022.11.22 |
| 노드 js 입문 공부 일지 1. Node.js 노드 설치하고 예제 실행하기 (0) | 2022.11.22 |