[포스코x코딩온] 웹개발자 풀스택 과정 5주차 | form 전송

form 전송

body-parser

• 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
• Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와 줌

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

1. url 인코딩방식
2. json 방식

form

• 입력된 데이터를 한 번에 서버로 전송하기 위해 사용
• 즉, 클라이언트가 서버에게 정보를 전달할 때 사용
• 속성 : action, name, target, method
• 폼 요소 : <input>, <select>, <textarea>, <button>등등

form 속성

• action : 폼을 전송할 서버 주소 지정
• name : 폼을 식벽하기 위한 이름
• method : 폼을 서버에 전송할 http 메소드 지정
• target : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 함

method

GET

• 클라이언트에서 서버로 어떠한 리소스부터 정보 요청을 위해 사용되는 메서드
• 특징
  • 캐시가능
  • 브라우저 히스토리에 남음
  • 북마크됨
  • 길이 제한 있음
  • 중요 정보를 다루면 안됨(보안 때문에)
  • 데이터를 요청할 때만 사용됨

POST

• 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드
• 특징
  • 캐시되지 않는다.
  • 브라우저 히스토리에 남지 않는다.
  • 북마크되지 않는다.
  • 데이터 길이 제한이 없다.(큰 데이터 보낼 때 사용함)
  • 데이터가 외부적으로 드러나지는 않는다.(보안이 필요한 부분에 사용됨)

GET & POST 차이점

• 사용목적
  • get : 서버 리소스에서 데이터를 요청할 때
  • post : 서버의 리소스를 새로 생성하거나 업데이트 할 때
• body 유무
  • get : URL 파라미터에 요청하는 데이터를 담아 보냄 (body 없음)
  • post : body에 데이터를 담아 보냄 (body있음)

폼 요소

input

• 사용자가 다양하게 폼 태그를 입력할 수 있게 하는 것
• 입력창
• 가장 기본적인 form 요소

input 속성

• type : 인풋 타입
• name : 이름 지정. backend에서 name으로 key가 설정된다.
• readonly: 읽기 전용(수정 불가)
• autofocus : 자동 focus
• placeholder : 짧은 도움말

input type 속성 값 종류

• text :
• radio :
• checkbox :

select

• 선택창
• 서버가 지정한 특정 값만을 선택할 수 있는 요소
• input이 주관식이라면 select는 객관식
  아메리카노 카페라떼 아이스티 프라푸치노 <- 눌러보세요

label

• 폼 양식에 이름을 붙일 수 있다.
• for속성 : for속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 만들 수 있다.

fieldset, legend

• fieldset : 폼 태그 안에 있는 요소들을 그룹화할 때 사용한다.
• legend : fieldset 안에 들어가는 태그로, 목적에 맞게 이름을 지정할 수 있다. legend자리 이름:
  나이:

form 정보 받기

GET요청

제출

app.get('/getForm', function(req, res){
  console.log(req.query);
  res.send('get 요청 성공!');
});
 
// 콘솔창
{id: 'apple', pw: '1234'}

제출 클릭

POST요청

제출

app.post('/postForm', function(req, res){
  console.log(req.body);
  req.send('post 요청 성공!');
});

// 콘솔창
{id: 'banana', pw: '4321'}

결과 페이지에 데이터 추가

GET 요청(query로 받음!!)

app.get('/getForm', function(req, res){
  console.log(req.query);
  // res.send('get 요청 성공!');
  res.render('result', {
    title: 'GET 요청 폼 결과 확인하기',
    userInfo: req.query,
  });
});

POST 요청 (body로 받음!!)

app.post('/postForm', function(req, res){
  console.log(req.body);
  // res.send('post 요청 성공!');
  res.render('result', {
    title: 'POST 요청 폼 결과 확인하기',
    userInfo: req.body,
  });
});

result.ejs

유효성 검사(form validation)

• form 요소들에 정보가 올바르게 입력되었는지 검사하는 것

  • 비밀번호 : 8자리 이상, 특수문자 및 대문자 1개 이상 포함
  • 이메일 : @ 기호 반드시 포함

• required : 필수 값

• minlength / maxlength : 최소/최대 문자수

• min / max : 최소/최대 값

• type : 입력받는 정보 타입

• pattern : 정규식으로 검사

pattern 속성에서 정규식 사용

• / : 정규식을 사용한다는 의미(정규표현식을 //으로 감싼다.)
• ^ : 시작
• $ : 끝
• [] : 범위
  • ex) [a-z] : a부터 z까지 중 문자 하나
  • ex) [가-힣] : 한글의 모든 음절 범위를 표현
• {} : 개수
  • ex) {2, 4} : 2개 부터 4개까지
• () : 그룹 검색 및 분류
• . : 임의의 글자 하나
• + : 1개 이상의 글자
• * : 0개 이상의 모든 문자
• ? : 0~1번 반복되는 문자열

<form action="/postForm" name="login" method="post">
  <input
	type="text"
	name="id"
	placeholder="ID"
	pattern="^([a-zA-Z0-9가-힣]){4,}$"
	title="대소문자, 한글, 숫자, 4글자 이상"
	required
  />
  <input
	type="password"
	name="pw"
	placeholder="PW"
	pattern="^([a-z0-9]){8,12}$"
	title="소문자, 숫자로 8자리 이상 12자리 이하"
	required
  />
</form>