- 노드를 설치한다.
- 터미널에서 yarn init | npm init : package.json 파일을 만들어 준다.
작성해야 하는 부분이 나오면 쭉 enter를 치고, entry point : 부분에서 server.js 입력해준다.
- express를 설치한다. yarn add express | npm install express
node로 서버를 작성할 때 쓰는 기본적인 템플릿이 있다.
//server.js
const express = require("express");
const app = express();
app.listen(8080, () => {
console.log("server open in 8080");
});첫 두줄은 express 라이브러리를 가져오는 것과 사용하는 것.
listen은 서버를 오픈하는 문법이다. 8080은 포트 번호 이다.
node server.js위와 같이 터미널에서 실행해주면 서버가 실행된다.
서버를 열었으니 요청들을 처리해 보도록 하자.
1) 간단한 get 요청이다.
const express = require("express");
const app = express();
app.listen(8080, () => {
console.log("server open in 8080");
});
app.get(("/pet", (req, res) => {
res.send("Hi nice to meet you")
})
);
위와 같이 작성을 하면 클라이언트가 get요청을 통해 http://localhost:8080/pet 이라는 주소로 들어왔을 때
hi nice to meet you라는 글자가 아래처럼 띄워진다.
2) 단순히 string 파일이 아닌 작성된 html 파일을 보내주고 싶다면 'res.' 뒷부분을 아래처럼 수정해 주면 된다.
const express = require("express");
const app = express();
app.listen(8080, () => {
console.log("server open in 8080");
});
app.get(("/pet", (req, res) => {
res.sendFile(__dirname + "/index.html") //이 부분
})
);
3) 사용자가 입력한 값들을 데이터베이스로 넘겨주는 과정을 구현해 보려한다.
우선 대략적으로 html 파일을 만들어 보았다.
//...생략
<title>Document</title>
<link rel="stylesheet" href="./style/style.css" />
</head>
<body>
<div class="nav">Things To Do</div>
<form>
<div>오늘의 할 일</div>
<input />
<div>세부내용</div>
<input />
</form>
</body>
</html>
이제 input창에 입력된 값을 데이터베이스로 전달해야한다.
두가지 과정이 필요하다.
첫번째로 form 태그 안에 속성 값으로 주소와 메소드를 지정해준다.
*input 태그의 name속성을 기입해주어야 한다.
//index.html
<form action="/add" method="POST">
<div>오늘의 할 일</div>
<input name="title"/>
<div>세부내용</div>
<input name="detail"/>
</form>
그리고 아래 코드를 js코드에 추가해준다.
보내는 데이터를 쉽게 처리할 수 있게 해주는 body parser의 기능을 한다.
//server.js
app.use(express.urlencoded({extended: true}))
콜백함수 파라미터로 오는 값 중,
첫번째 파라미터값(req)에 '/add'로 post요청한 데이터값들이 포함되어 된다.
const express = require("express");
const app = express();
app.listen(8080, () => {
console.log("server open in 8080");
});
app.get(("/beauty", (req, res) => {
res.sendFile(__dirname + "/index.html")
})
);
app.post(("/add", (req, res) => { // <--- 여기 req
console.log(req.body);
res.send("전송완료")
}
정리해보면 get요청을 통해 /beauty 로 들어가서 index.html 화면을 보고,
index.html 안의 form을 작성한 뒤 submit하면 '/add' 로 post 요청을 보내게 된다.
form에서 입력했던 값들은 req.body에 담겨있다.
서버 콘솔창에 req.body가 출력되고, (form에서 입력했던 데이터)
브라우저에는 "전송완료" 텍스트가 화면에 띄워진다.
데이터를 서버로 잘 보낸 것을 확인하였으니 이제 post 받은 값을 데이터 베이스에 전달하는 방법을 알아야 한다.
* 실수 사례.
잘 작성했다고 생가했는데 req.body 데이터가 안보였다. input태그에 name속성을 꼭 썼어야 했다.
폼 전송할 때 input에 이름이 없으면 서버에서 이게 어떤 input에 적혔던 데이터인지 알 수 없기 때문이다.
참고사이트
코딩애플 타입스크립트 강의 : https://codingapple.com/
'Frontend Study - 2 > Node.js' 카테고리의 다른 글
| Node.js : 데이터베이스에서 자료 가져와서 보내주기, 삭제, 상세페이지 제작 - 동적인 파라미터 id값 생성 (0) | 2022.10.04 |
|---|---|
| Node.js : Database에 연결하기, 자료 저장하기 feat. MongoDB (0) | 2022.09.28 |
| Node.js : node js란? node js의 특징. (0) | 2022.09.21 |
