Node JS #6
PUG 활용
속성 값 JS로 집어넣기
PUG문법으로 HTML을 작성하다 보면, 속성값을 넣어주어야 할 떄가 있다.
특히, 링크를 연결할 때는 속성에 링크를 JS 코드로 삽입해야 하는 경우가 빈번하다.
- 문자열 + 연산
mixin video(video)
div
h4
a(href="/videos/"+video.id)=video.title
- 문자열 템플릿 이용
mixin video(video)
div
h4
a(href=`/videos/${video.id}`)=video.title
주의) PUG는 속성에서는 #{변수} 를 쓸 수 없다.
a(href=`/videos/#{video.id}`)=video.title // Error !!
삼항 연산자
PUG에서는 HTML에 삼항연산도 사용할 수 있다.
h3 #{item.count===1?"item":"items"} // item의 단복수 여부에 따라 출력
URL parameter 이용하기
아래와 같은 라우터가 있다.
videoRouter.get("/:id(\\d+)", watch);
이 라우터는 숫자 id 값을 파라미트로 받아 watch 컨트롤러로 넘긴다.
그리고 이 라우터는 이 파라미터를 받아 해당 비디오의 정보를 렌더링과 함께 넘긴다.
export const watch = (req, res) => {
const id = req.params.id;
const video = videos[id];
return res.render("Watch", {
pageTitle: `Watching ${video.title}`,
video: video,
});
};
여기서 JS ES6 문법에 의해 코드를 좀 더 깔끔하게 만들 수 있는 부분을 살펴보자.
- 객체 값 바로 할당
1) const id = req.params.id;
2) const { id } = req.params;
// 1)과 2)는 동일한 코드
- 동일한 속성 이름과 속성 값
1) { video : video }
2) video
// 1)과 2)는 동일한 코드
이 두 개념을 적용하면 코드를 더 깔끔하게 만들 수 있다.
export const watch = (req, res) => {
const { id } = req.params; // 객체 값 바로 할당
const video = videos[id];
return res.render("Watch", {
pageTitle: `Watching ${video.title}`,
video, // 동일한 속성 이름과 속성 값
});
};
Absolute URL vs Relative URL
URL의 종류에는 절대 URL과 상대 URL이 있다.
상대 URL : 현재 위치한 디렉토리에서 이동(마지막 URL 부분만 변경) , ex) herf=”link”
절대 URL : 루트 디렉토리에서부터 절대적 위치로 이동, 슬래시 사용 ex) href=”/link”
기준 URL
localhost:4000/A/B/linkA
1) 상대 경로
===> a(herf="XXX")
localhost:4000/A/B/XXX
2) 절대 경로
===> a(herf="/XXX")
localhost:4000/XXX
Form
method, action
Form 태그에는 method 옵션과 action 옵션이 있다.
양식을 제출할 때 사용할 HTTP 메서드.
일반적으로
GET 방식은 페이지를 가져오는 요청을 보낼 때 사용하고,
POST 방식은 클라이언트가 데이터를 요청을 보낼 때 사용한다.
form의 기본 값은 GET 방식이다.
양식 데이터를 처리할 프로그램의 URI.
action은 데이터를 보내는 url이라 생각하면 된다.
h3 This is Form!
form(method="GET",action="hello")
input(placeholder="Fill this",requierd)
input(value="Save",type="submit")
Save 버튼을 누르면
form((method = "GET"), (action = "hello")); // method가 GET방식이므로 action의 URL인 hello로 데이터 전송
POST method로 데이터 전송하기
form의 input 태그에 기재한 정보를 POST method로 서버에 전송할 수 있다.
이때, input 태그의 name 속성은 반드시 있어야 한다는 것을 주의
form(method="POST",action="hello")
input(name="myData",placeholder="Fill this",requierd)
input(value="Save",type="submit")
위 form은 데이터를 (현재url)/hello로 보낸다.
라우터가 이 POST요청을 받게 한다.
globalRouter.post("/hello", postHello);
참고로 아래 두 코드는 동일한다.
globalRouter.post("/hello", postHello);
globalRouter.get("/hello", getHello);
globalRouter.route("/hello").get(getHello).post(postHello); // GET과 POST를 한번에 쓰기
전송 받은 데이터 받기
위에서 form의 POST method로 request는 해당 데이터 값을 가지고 있다.
이때, 이 데이터는 HTTP payload에 들어있는데, 이를 JSON형식으로 변환하여 쉽게 이용할 수 있게 하는 미들웨어가 있다.
express.urlencoded([options])
This middleware is available in Express v4.16.0 onwards.
This is a built-in middleware function in Express. It parses incoming requests with urlencoded payloads and is based on body-parser.
Returns middleware that only parses urlencoded bodies and only looks at requests where the
Content-Typeheader matches thetypeoption. This parser accepts only UTF-8 encoding of the body and supports automatic inflation ofgzipanddeflateencodings.A new
bodyobject containing the parsed data is populated on therequestobject after the middleware (i.e.req.body), or an empty object ({}) if there was no body to parse, theContent-Typewas not matched, or an error occurred. This object will contain key-value pairs, where the value can be a string or array (whenextendedisfalse), or any type (whenextendedistrue).
const app = express();
app.use(express.urlencoded({ extended: true }));
그러면 다음과 같은 코드로 request의 내용을 가져올 수 있다.
console.log(req.body);
정리하면, 다음과 같은 코드 구성이 가능하다.
form(method="POST",action="hello")
input(name="myData",placeholder="Fill this",requierd)
input(value="Save",type="submit")
- form은 입력 데이터를 myData의 키로 저장하여 action의 hello URL에 POST request를 보낸다.
app.use(express.urlencoded({ extended: true }));
- express.urlencoded 미들웨어를 이용하여 request를 JSON 형식으로 바꾼다.
const postHello = (req, res) => res.send(req.body.myData);
globalRouter.route("/hello").get(getHello).post(postHello);
- 라우터와 핸들러에서 이 데이터를 처리한다.
URL parameter를 이용하면 이런 데이터베이스 수정 코드도 가능하다.
req parameter.id에서 id 값을 뽑고, req.body.title에서 전송된 제목을 뽑아서 데이터베이스의 값을 수정한다.
그리고 다시 원래 URL로 redirect시킨다.
Form으로 데이터 주고 받기 정리
flowchart TD
| A[Form에서 데이터 전송] –> | express.urlencoded 미들웨어 등록 | B(req.pody.InputName에 데이터 포함됨) |
B –> C(라우터와 핸들러가 처리)
ETC
Redirect
res.redirect(url)은 해당 url로 이동시킨다.
VS CODE의 단축키
Mermaid
마크다운으로 UML 작성 가능
Leave a comment