티스토리 뷰
form 폴더에 프로젝트 생성
1. npm init -y
2. npm install express ejs (express와 ejs 동시에 설치)
3. gitignore 폴더 생성 후 git 버전 관리시 제외할 파일 넣기 ex)/node_modules, package-lock.json
form 기본 폴더 구조
index.js 기본 코드(서버)
const express = require('express');
const app = express;
const PORT = 8000;
app.set('view engine', 'ejs') //ejs를 뷰엔진으로 등록
app.use('/views', express.static(__dirname,'/views')); //views폴더에 있는 파일들을 사용함
//body-parser : post 전송할때 필요!
app.use(express.erlencoded({extended:true
app.use(express.json());
//로컬호스트 8000일때
app.get('/',function(req,res){
res.render('index') //views 폴더에 있는 index.ejs을 렌더링 해줌
})
app.listen(PORT,function(){
console.log(`http://localhost:${PORT}`);
});
body-parser
데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
post 로 정보를 전송할때 요청의 body(=req.body)로 받을 수 있게 도와준다.
내장되어 있어서 설치 따로 필요 없음
form *우리가 실무에서 가장 많이 쓸 것
입력된 데이터를 한번에 서버로 전송하기 위해 사용
즉, 클라이언트가 서버에 정보를 전달할때 사용
● action - 폼을 전송할 경로
● name - 폼을 식별하기 위한 이름 *꼭 써야 서버가 구별할 수 있음, 백엔드에서 name으로 key 이름이 지정됨
● method - 폼을 서버에 전송할 http 메소드 get, post 두가지 가능
form method
● GET - 폼에 입력한 정보가 url에 추가됨(보통 검색할때만 사용, 보안에 취약하므로 로그인할땐 사용하면 안됨)
● POST - url에 추가 안됨
<input> - 입력창
속성
● type : 종류
● name : 백엔드로 넘어갈 데이터의 고유 이름, name으로 서버의 key가 설정됨
● placeholder : 도움말
<select> - 선택창
input이 주관식이면 select는 객관식
서버가 지정한 특정 값만을 선택할 수 있고 <option>태그와 함께 사용됨
value값이 url에 저장
<label>
포커스 맞출때
lable의 for에 input의 id 값을 적어
label을 클릭하면 해당요소로 가게 만들어줌
form에 입력한 데이터 받기
<순서>
1. 폼 페이지 만들기
2. 서버 만들기
3. 데이터 출력할 결과페이지 만들기
form에 get 요청
1. 폼페이지 작성
form 태그의 action, name, method 중요!
<h2>GET 요청</h2>
<form action="/getForm" name="login" method="get">
<input
type="text"
name="id"
placeholder="ID"
required
minlength="3"
maxlength="6"
/>
<input type="password" name="password" placeholder="PASSWORD" />
<button type="submit">get제출</button>
</form>
2. 서버 만들기
//get 요청
app.get("/getForm", function (req, res) {
console.log(req.query); //req.query : GET요청 폼에서 가져온 데이터
// res.send("get 요청 성공");
res.render("result", { //결과페이지 렌더링
title: "GET 폼 요청 결과 확인하기",
userInfo: {
id: req.query.id, //결과페이지에 넘길 데이터
pw: req.query.password,
},
});
});
3. 결과 페이지
<%= 서버에서 보낼 데이터 이름%>
ejs 문법에 맞게 데이터 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2><%= title%></h2> //서버의 title 데이터
<div>
<span><%= userInfo.id%>님 환영합니다</span> //서버의 userInfo 데이터
</div>
<div>비밀번호는 <span><%= userInfo.pw%>입니디.</span></div>
<br />
<br />
<a href="/">홈으로</a>
</body>
</html>
** input에 입력한 값이 url에 저장 됨 (post와의 차이점)
form에 post 요청
위의 get 요청 코드와 비교했을때 바꿔야할 부분은
폼 페이지 - form태그의 action, method
서버 - req.query → req.body
1. 폼 페이지
2. 서버
** url에 저장 안됨
✔ input 태그에 지정 가능한 유효성 검사 기능
* pattern 사용하여 사용자가 입력할 수 있는 값의 패턴을 지정할 수 있음, 정규 표현식을 사용하여 입력형식 제한
ex) 휴대폰번호, 이메일 주소
✔ postman 사용해서 post 요청시 전달된 데이터 볼 수 있음(실무에서 많이 사용!)
+ 설치하면 좋은 패키지
설치 후 설정에서
dafault form - default formatter를 prettier로 바꿔주고
format On Save - 체크
'Coding > 포스코x코딩온' 카테고리의 다른 글
| [포스코x코딩온] 웹 풀스택 과정 4주차 파일업로드 multer (0) | 2023.05.18 |
|---|---|
| [포스코x코딩온] 웹 풀스택 과정 4주차 비동기 HTTP 통신 axios (0) | 2023.05.17 |
| [포스코x코딩온] 웹 풀스택 과정 4주차 (백엔드 시작) 노드, express, ejs (0) | 2023.05.16 |
| [포스코x코딩온] 웹 풀스택 과정 3주차 무한스크롤 / github 배포 (0) | 2023.05.08 |
| [포스코x코딩온] 웹 풀스택 과정 2주차 부트스트랩 / css 변수, 미디어 쿼리(반응형) (0) | 2023.05.03 |