💡 1/26 - <form> 태그, GET/POST, nodemon, 유효성 검사

오전에 <form>태그와 GET/POST 요청에 대해 학습하고 오후에는 실습 위주의 수업을 했다.

📍 <form> 태그

입력된 데이터를 한 번에 서버로 전송하기 위해 사용

• action, method 속성은 꼭 작성해줘야 서버와 통신할 수 있음
  • action : 폼을 전송할 서버 주소 지정(url의 PORT 번호 뒤에 붙는 주소 ex. /login, /register 등)
  • method : 폼을 서버에 전송할 http 메소드 지정(get, post, put, patch, delete)
  • name : 폼을 식별하기 위한 이름
  • target : action 속성값의 경로 페이지를 현재 창이 아닌 다른 위치에서 열 수 있도록 함(_blank, _self)

[주의] 서버와 통신하기 위해 <input>에서 Key값에 해당하는 속성 알맞게 지정해야함!

1) 일반적으로 name="" 속성이 key 값

<!-- <input>에 작성한 내용 서버로 보냄, 터미널에서 data 확인 가능 -->
<form action="/getForm" method="get">
  <label>id: <input type="text" name="id" /></label>
   <br />
  <label>email: <input type="email" name="email" /></label>
   <br />
  <label>password: <input type="password" name="password" /></label>
   <br />
  <button type="submit">제출(submit type)</button>
  <!-- type="submit"인 버튼으로 서버와 통신 -->

2) checkbox, radio, color, number 등은 value="" 속성이 key 값

	<fieldset>
      <legend>체크박스</legend>
      <label><input type="checkbox" name="agree" />마케팅 동의</label>
      <label><input type="checkbox" name="agree" />개인정보 수집 동의</label>
      <label><input type="checkbox" name="agree" value="이용약관 동의" />이용약관 동의</label>

      <input type="submit" value="제출" />
    </fieldset>

• key값이 지정되지 않은 경우 서버에서 해당 정보가 넘어가지 않기 때문에 type에 맞는 속성을 꼭 사용해야 한다!

---

터미널에서 결과 확인해보면
1)
> { id: 'youngin', email: 'purple11_11@naver.com', password: '1234' }

2)
> {
     id: 'yyi9546',
     e-mail: 'dbsduddls95@naver.com',
     password: '',
     agree: [ 'on', 'on', '이용약관 동의' ]   // <input>의 value=""로 checkbox의 key 값 설정해줘야 함
     }

정보가 위와 같이 객체 형태로 서버에 전달됨

📍 GET 요청

어떤 정보를 가져오거나 검색할 때 사용
GET 요청 시 request.query에 정보가 들어온다. (url?query-string)

[GET 요청 예시]

// localhost:8080 입력 시 보여질 index.ejs 설정
app.get('/', (req, res) => { 
  res.render('index') // .ejs(확장자 생략 가능)

// '/getForm' 경로로 Get 요청 시 결과 result.ejs에 보여주기
app.get("/getForm", function (req, res) {

  res.render("result", { // result.ejs 에서 확장자 생략 가능
    title: "GET",
    userInfo: req.query, 

 // req.query 도 객체({}) 형태 => { id: , email: , password: }
  });
});

res.render('렌더링 할 파일명', {보내줄 데이터}) 형태로 사용해서 페이지 렌더링

하지만 두번 째 예시의 경우 get요청 후 렌더링 된 result 페이지에서
'http://localhost:8080/getForm?id=youngin&email=purple11_11%40naver.com&password=1234'
url 쿼리 스트링에 정보들이 담겨오기 때문에 보안상 문제가 생길 수 있다.

이를 해결하기 위해 POST 요청 사용!

📍 POST 요청

어떤 정보를 보낼 때 사용
GET 요청보다 보안성이 더 뛰어나기 때문에 중요한 정보는 POST를 이용한다.
POST 요청 시 request.body로 정보가 들어온다.

app.post("/postForm", function (req, res) {
  // post 요청은 request.body에 담겨져 옵니다!
  res.render("result.ejs", {
    title: "POST",
    userInfo: req.body, // { id:'' , password:'' , agree: [] }
  });
});

post 요청 시 body-parser를 이용해 데이터를 쉽게 처리할 수 있는 형태로 서버에 전달해줘야 한다.
그렇지 않으면 undefined로 값이 넘어감!

• body-parser는 express에 내장되어 있어서 별도의 설치는 필요하지 않고 다음과 같이 불러올 수 있다.

[body-parser 미들웨어 등록]

app.use(express.urlencoded({ extended: true }));
app.use(express.json()); // json 형식으로 데이터를 주고 받음

POST 요청 시 url은 'http://localhost:8080/postForm' 으로
GET 요청 했을 때 쿼리 스트링에 정보가 나타난 것이 숨겨진다!

nodemone

서버측 코드(app.js 등) 변경될 때마다 종료 후 다시 실행하는 행동을 하지 않게 해주는 패키지

소스코드 변경 시 자동으로 node 재실행

npm install -g nodemone # 전역 설치
nodemon app.js # 진입점 파일 실행

📍 유효성 검사

1. <input>의 required 속성
   : 입력하지 않은 <input> 있을 때, submit 되지 않음

2. pattern 속성에 정규표현식

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

[예시]

<label for="id">ID : </label>
<input
        type="text"
        id="id"
        name="id"
        pattern="^([a-zA-Z0-9가-힣]{4,10})$"
        title="아이디는 영어 대소문자, 숫자, 한글로 이루어진 4자 이상 10자 이하로 작성해주세요."
        placeholder="id를 입력해주세요."
        required
      />

<label for="pw">password</label>
      <input
        type="password"
        id="pw"
        name="password"
        pattern="^([a-z0-9]){8,12}$"
        placeholder="비밀번호를 입력해주세요."
        required
      />

3. <form>태그의 onsubmit 속성에 직접 함수 작성

<form
   action="js-form-check"
   method="post"
   name="validationForm"
   target="_blank"
   onsubmit="return checkForm(this)">

<input
   type="text"
   name="id"
   minlength="1"
   placeholder="ID를 입력해주세요."
   title="최소 1글자 이상을 입력해주세요."
   id="input" />

    <br />

  <div>우편물 수령 장소</div>
  <label><input type="checkbox" name="mail" value="회사" />회사</label>
  <label><input type="checkbox" name="mail" value="자택" />자택</label>
   <br />
  <button>제출</button>
</form>

<script>
    function checkForm(form) {
      console.log(form);
      // const form = document.forms["validationForm"];
      // const form = document.forms["name 속성"];

      console.log(form.input);
      console.log(form.id);

   /* input text 창에 아무것도 쓰지 않았을 때 */
      if (form.id.value === "") {
        alert("아이디를 입력해주세요.");
        // submit 이벤트를 실행하지 않도록 return false;
        return false; // return false 해줘야 제출되지 않는다.
      }

    /* checkbox 중 아무것도 선택되지 않았을 때*/
      if (form.mail[0].checked === false && form.mail[1].checked === false) {
        alert("우편물 수령장소를 선택해주세요.");
        return false;
      }
    }
  </script>