body-parser 와 Form (Form에서의 get메소드와 post메소드 / form validation 유효성 검사)
0
body-parser
- 데이터를 쉽게 처리할 수 있도록 도와주는 node.js의 미들웨어 모듈이다.
- 즉 요청(request)과 응답(response) 사이에 위치해 있다.
- 요청의 본문을 지정한 형태로 파싱해준다! 요청의 body를 해석해서
req.body객체로 받을 수 있게 도와준다. - 여기서 파싱(parsing)이란? 하나의 프로그램을 런타임환경이 실행할 수 있는 포맷형태로 변환(문법적 의미나 구조를 반영해서) 해주는 것을 의미한다.
- express 4.x 버전부터는 body-parser가 내장되어있어 별도의 설치는 필요 없다.
💡 새로운 프로젝트(폴더)생성 시 아래 내용 설치해주어야 한다. 까먹지 말자!
npm init -y: 물어보는 거 없이 다 yes로 답변해주겠다는 거.package.json파일 생긴다.npm i express ejs: 두 개 한 번에 설치할수있다.jQuery사용할거면 script로 불러와야 한다.index.js에 기본으로 있어야 하는 내용이다.//express모듈을 가져온다. //가져온 express모듈을 app이라는 변수에 담아 express프레임워크를 시작하겠다. //이제 server객체를 만들 수 있다. const express = require("express"); const app = express(); //서버객체 만들고 const PORT = 8000; //포트 번호 지정. //뷰엔진, ejs사용하겠다고 세팅 app.set("view engine", "ejs"); //기본 라우터(localhost:8000)로 들어갔을 때 index.ejs를 보여주겠다. //접속에 대한 응답을 위해 만든 코드. app.get("/", function(req,res){ res.render("index") }) //포트 열어주기. app.listen(PORT, function () { console.log(`server Open! : ${PORT}`); });
▶️ body-parser 사용
//-----기본적으로 rqq.body를 해석하기 위한 코드로 보면 된다.
//그걸 미들웨어로 등록해준 것.
app.use(express.urlencoded({ extended: true }));
//x-www-form-urlencoded 형태의 데이터를 해석
// extended: true 일 경우 qs모듈(외부모듈)을 이용한다.
// extended: false일 경우 기본 내장모듈(노드내장모듈)인 queryString을 사용한다. 이걸 결정하는 것.
app.use(express.json());
//application/json 형태의 데이터를 해석Form
- 입력된 데이터를 한 번에 서버로 전송하기 위해 사용한다.
- 즉 client가 server에 정보를 전달하는 경우!
- 사용하는 메소드로는
get,post가 있다. - 사용하는 속성
//이런식으로 사용한다. <form action="/get" method="get" target="_blank" name="login">action: 폼을 전송할 서버 주소를 지정.name: 폼을 식별하기 위한 이름을 지정.//데이터가 넘겨지면 name에서 작성한 내용이 key 값으로 사용된다. //이러한 input요소가 있고 <input type="text" name="id" /> <input type="password" name="pw" /> <button type="submit">제출</button> //각각 jeong, 1234를 submit 했다면 //넘겨진 값은 아래와 같다. { id: "jeong", pw: "1234"}//그리고 name값을 적어주면 아래와 같이 해당 요소의 선택도 가능하다. document.forms["login"] console.log(document.forms["login"])target: 창을 어떻게 열 것인지에 대한 설정. 값:_blank,_selfmethod: 폼을 서버에 전송 할 http메소드 지정.
- form에서는 보통 제출을 하는 단위별로
form태그로 묶는다.- 요청별로 폼을 묶어준다고 생각!
<body> <h1>로그인</h1> <form> <input type="text" name="id" /> <input type="password" name="pw" /> </form> <h1>회원가입</h1> <form> <input type="text" name="id" /> <input type="password" name="pw" /> <input type="text" name="name" /> <input type="password" name="email" /> </form> </body>
- 요청별로 폼을 묶어준다고 생각!
▶️ Form에서의 get메소드, post메소드
- get
- 정보를 가져오거나 검색할 때 사용한다.
- backend로 보내야 하는 데이터가 url에 보여진다!
- `http://localhost:8000/get?id=jeong&pw=1234`
- url 쿼리 문자열이라고 한다. 길이가 제한적이다.
- 서버의 값이나 상태를 변경하지 않고 그대로 둘 때 사용한다.
- post
- 무언가를 생성하거나 정보를 보낼 때 사용한다.
- 보내는 데이터는 요청(request)의 본문(body)에 담겨져서 보내진다.
- get보다 많은 데이터를 body에 담아 전송이 가능하다.
▶️ get메소드
- method를
get으로 작성해주면 된다. get요청은 url로 접속이 가능하다.- 이 요청에는 데이터가 담겨있는데 사용자가 서버로 보내는(제출하는) 데이터도 있다.
- 이 데이터가
req.query라는 공간에 담겨져서 온다.
- 이 데이터가
- 보통 get요청은 정보를 조회하는 요청에 주로 사용한다. (CRUD중에서 R를 의미하는 요청에 사용)
- 데이터 저장(db에 데이터 삽입), 원래 있던 데이터 변경, 데이터 삭제 등에 사용한다.
- 오늘 날짜 이후꺼를 가져온다든지 등. 조건을 조회하면서 가져올 때 등
//[index.js 파일]
//기본 라우터(localhost:8000)로 들어갔을 때 index.ejs를 보여주겠다.
//접속에 대한 응답을 위해 만든 코드.
app.get("/", function (req, res) {
res.render("index");
});
//get요청을 받는 /get이라는 주소를 만들어준다.
app.get("/get", function (req, res) {
console.log(req.query); //{ id: 'jeong', pw: '1234' }
console.log(req.query.id); //"jeong"
//req.query;
//get요청은 데이터를 query에 담아서 값을 가져온다.정보가 객체로 담겨서 오게 되는 것.
//git요청에 대해 client가 보낸 데이터를 담고 있는 것!
res.send("get 요청 성공");
//send는 특정 값을 응답으로 보내겠다는 것. 객체 배열 등을 보낼 수 있다.
});
<!--[index.ejs 파일]-->
<h1>로그인 get요청</h1>
<!-- form전송은 클라이언트가 서버로 데이터를 보내는 방법 중 하나이다. -->
<!-- action: 요청을 보낼 주소(내 서버에 보낸다는 가정 하에 도메인을 뗀 나머지 주소 입력. 실제 웹 서버에 존재하는 주소여야한다.) -->
<!-- method: 어떤 방식으로 요청을 보낼거냐. (get or post 사용) -->
<!-- 그러면서 form안에 있는 걸 같이 넘기게 되는 것. -->
<form action="/get" method="get" target="_blank" name="login">
<fieldset>
<legend>로그인정보</legend>
<input type="text" name="id" />
<input type="password" name="pw" />
</fieldset>
<input type="radio" name="gender" value="남자" id="men" />
<label for="men">남자</label>
<input type="radio" name="gender" value="여자" id="women" />
<label for="women">여자</label>
<button type="submit">제출</button>
</form>
<h1>회원가입</h1>
<form action="/signIn" method="get">
아이디<input type="text" name="id" />
비밀번호<input type="password" name="pw" />
이름<input type="text" name="name" />
이메일<input type="email" name="email" />
<button type="submit">가입하기</button>
</form>▶️ post메소드
- method를
post으로 작성해주면 된다. post요청은 url로 들어갈 수 없다.url로 입력하는 무조건get이다.- url에 정보가 노출되지 않고 정보가 숨겨진다.
post요청에 대한 데이터는req.body에 담겨서 온다.- 보통은 데이터를 새로 생성하는 요청에 주로 사용한다. (CRUD중에서 C를 의미하는 요청에 사용)
//[index.js 파일]
//--------------------post ver 1--------------------
//-----loclahost:8000/post주소로 post요청을 받기 위한 준비
//여기서 form전송으로 post요청을 보낼 수 있다.
app.post("/post", function (req, res) {
console.log(req.body);
res.send("post 요청 성공");
});
//--------------------post ver 2--------------------
//-----result파일을 랜더링하면서 값을 보내줄 수도 있다.
//데이터를 만들고, 이 데이터는 ejs파일에서 사용 가능.
app.post("/post/ver2", function (req, res) {
console.log(req.body);
res.render("result", {//result.ejs 파일로 보내겠다는거.
name: req.body.name, //req.body에 담긴 name값
email: req.body.email,//req.body에 담긴 email값
});
});<!--------------------post ver 1-------------------->
<!--[index.ejs 파일]-->
<h1>회원가입 post요청</h1>
<form action="/post" method="post">
<input type="text" name="id" />
<input type="password" name="pw" />
<input type="text" name="name" />
<input type="text" name="email" />
<button type="submit">제출</button>
</form>
<!--------------------post ver 2-------------------->
<!--[index.ejs 파일]-->
<!--index.js에서 만든 값을 가져와서 사용한다.-->
<h1>회원가입 post요청 ver2</h1>
<form action="/post/ver2" method="post">
<input type="text" name="id" />
<input type="password" name="pw" />
<input type="text" name="name" />
<input type="text" name="email" />
<button type="submit">제출</button>
</form>
<!--[result.ejs 파일]-->
<body>
<%=name%> (<%=email%>)님 환영합니다.
</body>form validation 유효성 검사하기
- 각 form요소들에 대해 형식에 맞게 제대로 입력되었는지 검사 하는 것!
- 제출 전에 형식에 일치하지 않으면 안내메시지를 보여주거나, 조건을 걸거나 등.
▶️ input 태그에 지정, 검사 가능
- required : 필수 값 (작성하지 않으면 못 넘어감)
- minlength / maxlength : 최소/최대 문자수
- min / max : 최소/최대 값
- type : 입력받는 정보 타입
- pattern : 정규식으로 검사하겠다.
▶️ pattern 속성에서 정규식으로 검사하기
- 정규식(정규표현식): regex(regular expression)
표시 의미(사용법) / 정규식을 사용하겠다. /와/사이에 작성해준다. ^ 시작 표시 $ 끝 표시 [] 범위, 포함여부를 표시 [a-z0-9] : a~z문자, 숫자를 의미 {} 개수를 표시 ( 최소 최대 길이) {8,12} : 8자 이상 12자 이하 () 그룹 검색 및 분류 . 임의의 글자 하나 + 1개 이상의 글자 * 0개 이상의 모든 문자 ? 0~1번 반복되는 문자열 특수문자 사용범위 {}[]\/?.,;: 010-0000-0000형태 지정 [0-9]{2,3}-[0-9]{3,4}-[0-9]{4} - 이런식으로 다양하게 지정할 수 있다.
<form action="/post/ver2" method="post"> <input type="text" name="id" pattern="^([a-zA-Z0-9]){4,10}$" title="소문자, 대문자, 숫자로 조합된4자~10자로 입력" /> <input type="password" name="pw" oninput="validCheckPw(this)" /> <div id="error-pw"></div> <input type="text" name="name" required /> <input type="number" min="5" max="10" placeholder="숫자" /> <input type="text" name="email" /> <button type="submit">제출</button> </form> //title을 입력해주면 지정한 식과 다를 경우 화면에 메세지를 보여줄 수 있다. - 입력하는 동시에 유효성 검사를 실행하고 알려주고 싶다면?
<input type="password" name="pw" oninput="validCheckPw(this)"/> <div id="error-pw"></div> //oninput 은 input태그에 올라왔을 때를 의미한다. //validCheckPw()함수를 실행할건데 //실행 시의 값을 가져와야 하니 this를 넣어준다. 이 자체를 넘겨야 하기 때문. //그리고 error가 났을 때 메시지를 띄우기 위한 공간도 div로 만들어준다.//el은 요소를 의미. //검사를 하고 싶으면 //regexPw.test("검사하고 싶은 값") 이런 형태로 작성해준다. //얘는 true or false를 return한다. function validCheckPw(el) { const value = el.value const error = document.getElementById("error-pw") const regexPw = /^([a-z0-9]){4,10}$/ if (regexPw.test(value)) { console.log("정규식 일치") } else { error.innerHTML = "영어소문자, 숫자를 4자이상 10자이하로 작성하세요." console.log("정규식 불일치") } }
💬
- 헷갈린다… 할 수록 내가 할 수 있는건지 생각이 든다. 알아야 할 건 너무 많고 항상 새롭게 배워야 할 것이 쌓여간다. 이전에 배운것도 깊게 익숙해지지 못했는데 계속 밖에서만 겉도는 것 같다. 어디서부터 어느 깊이로 어느정도까지 파고 들어가야할지 좁혀지지가 않는다. 근데 벌써 한 달이 지나가버렸다!?? 참 막막하다!
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆