form 전송이란?
가장 간단한, 클라이언트가 서버 쪽으로 정보를 넘겨주는 방법
그 중에서 사용할
body-parser
• 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
• Post로 정보를 전송할 때 요청의 body(req.body)로 받을수 있게 도와준다.
• express 4.x 부터body-parser가 내장되어있어 설치 필요 없음
(이전에는 모듈로 따로 설치했으나, 이제는 설치 하지 않아도 된다!)
// js에서 작성중
app.use(express.urlencoded({extended: true})); //x-www-urlencoded 데이터 해석
app.use(express.json()); //클라이언트가 보낸 데이터가 json형태로 받아와질 것이다. json : 딕셔너리 형태와 비슷
// form 태그 사용하는 서버 만들기
app.get("/form", (req,res)=>{
res.render("form");
})
<form> 태그
- 입력된 데이터를 한 번에 서버로 전송하기 위해 사용
- 즉, 클라이언트가 서버에게 정보를 전달할때 사용
- 속성 : action, name, target, method
- 폼 요소 : <input>, <select>, <textarea>, <button> 등등
<form> 속성
//설명부분
action="" // 내가 보낼 주소 적기 (url) 폼을 전송할 라우터를 적는다.
action="/getform" // 이라고 적으면, 서버측에서는 저 주소에 대한 처리가 가능한 코드가 있어야
js에
app.get("/getform", (req,res)=>{
res.render("");
})
method="" //get과 post 중 하나를 넣는다. 이때 get은 폼에 입력한 정보가 url에 추가되어 보인다. post는 그 정보가 안나오므로, 보안상 좋다.
name="" //name을 작성하면 js 내에서
document.forms["getform"]를 찍어서 불러올 수 있다.
<script>
console.log(document.forms["getform"])
</script>
<form> 속성 - method
method의 2가지 종류 (GET, POST)
//app.js에서 사용하고 있는 코드
// form 태그 사용하는 서버 만들기
app.get("/form", (req,res)=>{
res.render("form");
})
app.get("/getform", (req,res)=>{ // 원래 라우터였던 form에서 getform라우터로 이동한 다음 send안에 문자열이 보이게 된다.
console.log(req.query); // 클라이언트가 서버에 보내는 요청 중 'query'를 찍는다. 이는 ?뒤에 있는 것들로 터미널에 출력이 된다.
res.send("get 요청성공!");
})
<!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>
<!-- 서버로 정보를 전송하는 form태그 -->
<form action="/getform" method="get" name="getform">
<input type="text" name="id">
<input type="password" name="pw">
<button type="submit">제출하기</button>
</form>
<script>
console.log(document.forms["getform"])
</script>
</body>
</html>
GET 요청은 쿼리에, POST 요청은 바디에 담긴다.
//js
//post 요청 받기 == post 메소드 사용
app.post("/postform", (req,res)=>{ // 원래 라우터였던 form에서 postform라우터로 이동한 다음 send안에 문자열이 보이게 된다.
console.log(req.body); // 클라이언트가 서버에 보내는 요청을 body에 받아온다. (get과 차이)
res.send("post 요청성공!");
})
//html
<h3>post 요청</h3>
<form action="/postform" method="post">
<input type="text" name="id">
<input type="password" name="pw">
<button type="submit">제출하기</button>
</form>
get과 post 의 차이
get
- url에 직접치고 들어갈수도 있고 심지어 거기서 아이디 비번도 입력 가능하다.
- localhost:8080/getform?id=lll&pw=3434
그러나 post는 url을 통해 들어갈 수 조차 없다. (보안상 안전)
app.js에서 코드 작성하는 순서
app use 먼저 상단에, 그다음 여는 listen이 마지막 하단에
app.use(express.urlencoded({extended: true})); //x-www-urlencoded 데이터 해석
app.use(express.json());
app.listen( port, ()=> { //listen이라는 메소드를 통해 웹서버를 연다. 이때 인저는 두개 (포트번호, 함수)
console.log("server open :", port);
});
<form action="/getform" method="get">
<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자
// 묶임의 기준 == name을 이용하기!
<input type="radio"> 음악 감상
<input type="radio"> 영화 보기
<button type="submit">제출하기</button>
</form>
name 속성을 이용해 묶어서 묶음 중 하나만 선택하게 만들 수 있다. (하나는 체크 해제)
여러 개 선택하고 싶다면? checkbox 사용
<input type="checkbox" name="interest"/> 음악 감상
<input type="checkbox" name="interest"/> 영화 보기
<input type="checkbox" name="interest"/> 운동 하기
이때 클라이언트는 구분이 되지만, 서버에서는 다 구분이 되지 않으므로 value를 주어야 한다.
(서버에서는 무슨 값을 보낼지 모르므로 )
<h3>get 요청</h3>
<form action="/getform" method="get">
<input type="text" name="id">
<input type="password" name="pw">
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
<input type="checkbox" name="interest" value="음악감상"/> 음악감상
<input type="checkbox" name="interest"value="영화보기"/> 영화보기
<input type="checkbox" name="interest"value="운동하기"/> 운동하기
<button type="submit">제출하기</button>
</form>
<select>
• 선택창
• 서버가 지정한 특정값만을 선택할 수 있는 요소
• input이 주관식이라면 select는 객관식
<h3>post 요청</h3>
<form action="/postform" method="post">
<input type="text" name="id">
<input type="password" name="pw">
<select name="birthMonth">
<% for(var i=1 ; i<=12 ; i ++ ) { %>
<option value="<%=i%>"><%=i%></option>
<%}%>
</select>
<button type="submit">제출하기</button>
</form>
name은 select 태그에, value는 option태그에 들어간다.
<textarea> 태그
내용 쓰는 칸을 만들어준다.
속성 rows와 cols를 통해 행과 열을 미리 설정할 수 있다.
<h3>post 요청</h3>
<form action="/postform" method="post">
<input type="text" name="id">
<input type="password" name="pw">
<select name="birthMonth">
<% for(var i=1 ; i<=12 ; i ++ ) { %>
<option value="<%=i%>"><%=i%></option>
<%}%>
</select>
<textarea name="content" rows="30" cols="50"></textarea>
<button type="submit">제출하기</button>
</form>
<input>
• 사용자가 다양하게 폼 태그 를 입력 할 수 있게 하는 것
• 입력창
• 가장 기본적인 form 요소
• type : 인풋타입
• name : 이름지정. backend에서name으로key가설정된다.
• readonly : 읽기전용(수정불가)
• autofocus : 자동focus
• placeholder : 짧은도움말
<input type="text" name="id" placeholder="아이디">
<input type="password" name="pw" placeholder="비밀번호">
<label>
• 폼 양식에 이름을 붙일 수 있다.
• for 속성
• for 속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 만들 수 있다.
(for와 id는 같아야 한다.)
<input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
<input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>
묶음을 만드는 태그들
<fieldset> <legend>
• <fieldset> : 폼 태그안에 있는 요소들을 그룹화 할때 사용한다.
• <legend> : <fieldset> 안에 들어가는 태그로, 목적에 맞게 이름을 지정할 수 있다.
<fieldset>
<legend>성별</legend>
<input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
<input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>
</fieldset>
<fieldset>
<legend>성별</legend>
<input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
<input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>
</fieldset>
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="interest" value="음악감상"/> 음악감상
<input type="checkbox" name="interest"value="영화보기"/> 영화보기
<input type="checkbox" name="interest"value="운동하기"/> 운동하기
</fieldset>
form validation (유효성검사)
• form 요소들에 정보가 올바르게 입력되었는지 검사 하는 것
- 개발자가 원하는 방식으로 클라이언트가 입력했는지를 검사
- 클라이언트에서 미리 검사하면 서버에서 튕기지 않게 할 수 있음
- 서버에서 유효성 검사를 해야하는 이유는 이러한 클라이언트 검사를 뚫고 들어갈 확률이 있기 때문에
둘 다 하는게 가장 좋다
ex. 비밀번호 : 8자리 이상, 특수문자 및 대문자 1개 이상 포함
ex. 이메일: @ 기호반드시포함
(클라이언트 측에서 유효성 검사)
- input 태그에 지정 가능한 유효성 검사 기능
• required : 필수값
• minlength / maxlength : 최소/최대문자수
• min / max : 최소/최대값
• type : 입력받는정보타입
• pattern : 정규식으로검사
required : 필수값
(값을 입력하지 않으면 넘어갈 수 없음)
<input type="text" name="id" placeholder="아이디" required>
<input type="password" name="pw" placeholder="비밀번호"required>
pattern 속성에서 정규식 사용
정규식(정규표현식): regex (regular expression)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
<form action="/getforms" method="get">
<input type="text" name="이름" pattern="^\({a-zA-Z가-힣}){2,5}\$" required/> 이름
<fieldset>
<legend>성별</legend>
<input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
<input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>
</fieldset>
// 왜 패턴안에서 적은게 동작하지 않는지 나중에 처리하자
역슬래시 사용법 (\ = 이스케이프 문자)
<form action="/getforms" method="get">
<input type="text" name="이름" required/> 이름 <br>
<input type="text" name="id" pattern="/^[a-zA-Z]\w{2,7}$/u" required> ID <br>
<input type="text" name="mail" pattern= "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/"required> Email <br>
<!-- 시작과 끝에 //로 감싸고, ^$로 시작하고 닫는다. 그 안에 대괄호로 내용을 넣어준다. 역슬래시\를 넣으면 특수기호를 일반문자로 취급한다. +를 통해 이어질 내용을 추가한다.-->
<fieldset>
자바스크립트 응용한 유효성 검사
정규표현식.test(“검사할문자열”)
- 검사를 통과하면 true
- 검사를 통과하지 못하면 false
개발자를 편하게 하는 패키지
nodemon 패키지
• 서버측 코드(app.js 등) 가 변경 될 때마다 ctrl + c 단축키로 node 명령어를 종료하고, node app.js 명령을 다시 입력하기 귀찮음!
• 파일들을 모니터링하다가 소스코드 변경 시 자동으로 node 재실행하는 패키지
(서버측 코드 수정시 바로 반영)
참고) 지역설치vs. 전역설치
• 지역 설치 : 해당 프로젝트의 node_modules/ 폴더 안에 패키지 설치
= 해당 프로젝트 내에서만 사용 가능
• 전역 설치: -g 옵션(global)으로 전역 node_modules/ 폴더 안에 패키지 설치
= 모든 프로젝트가 공통으로 사용 가능
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL🚴♀️] CodingON' 카테고리의 다른 글
[파일업로드] 미들웨어(Middleware) 사용하기 (0) | 2022.11.27 |
---|---|
[동적 form 전송] Axios 중심으로 form 전송하기 (ajax, fetch 맛보기) (0) | 2022.11.25 |
[Express, ejs 모듈] 노드 모듈을 이용한 웹 서버 구축 (0) | 2022.11.22 |
[Node.js] promise 문법, FS모듈 다루기, 서버에 연결(HTTP) (0) | 2022.11.19 |
[Node.js] 노드 내장 객체와 모듈 알기 (+ 객체 구조 분해, 콜백 함수) (2) | 2022.11.19 |