[포스코x코딩온] 웹 풀스택 과정 5주차 | Form & 동적 Form & 파일업로드

K1mhappy·2023년 11월 30일
0

포스코x코딩온

목록 보기
11/13

body-parser

우선 알아야할 것 !
데이터를 쉽게 처리할 수 있도록 도와주는 미들웨어이다.
요청의 body를 해석해서 req.body로 받을 수 있게 도와줌

app.use(express.urlencoded({extended: true}));
app.use(express.json());

Form

form 태그는 입력된 데이터를 한번에 서버로 전송하기 위해 사용한다.
클라이언트가 서버에게 정보를 전달할때 사용
속성에는 action, name, target, method가 있다.

속성

action : 폼을 전송할 서버 주소 지정

name : 폼을 식별하긱 위한 이름

method : 폼을 서버에 전송할 http 메소드 지정

target : _blank , _self 가 있으며
action속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열수 있음

form 메서드

get 과 post 방식이 있다.

get

폼에 입력한 정보들이 url에 보이기 때문에 정보를 가져오거나 검색할 때 쓰임
get요청 시 백엔드로 보내야하는 데이터가 있으면 url쿼리 문자열에 데이터를 실어서 전송한다.
주소창에 ?key=value&... 같이 키와 밸류값으로 나옴.

post

무언가를 생성하거나 어떤 정보를 보낼 때 쓰임
보내야하는 데이터는 요청의 본문(body)에 실어서 전송하며
길이가 제한딘 url보다 많은 데이터를 바디에 실어서 전송가능하다.

form 정보받기


이렇게 get을 쓰면 req.query에 데이터를 전송하고
post를 쓰면 req.body에 데이터를 전송한다.

form validation (유효성 검사)

form 요소에 정보가 올바르게 입력되었는지 검사할 때 사용한다

input 태그에 지정 가능하며
• required : 필수 값
• minlength / maxlength : 최소/최대 문자수
• min / max : 최소/최대 값
• type : 입력받는 정보 타입
• pattern : 정규식으로 검
위에는 pattern속성에서 정규식 사용법이다.

동적 form

form을 전송할 때
<input type=“submit”> 이나 <button type=“submit”> 을 이용해 전송하며 전송 시 페이지 이동이 일어난다~

profile
킴코린의 개발일지😗

0개의 댓글