Form - 241120

오태원·2024년 11월 21일

form: 입력된 데이터를 한 번에 서버로 전송하기 위해 사용
즉, 클라이언트가 서버에게 정보를 전달할 때 사용된다.

  • 요소: input, select, textarea, button, radio.. 등등
  • 속성
    • action : 폼을 전송할 서버 주소 지정
    • name : 폼을 식별하기 위한 이름, name으로 key가 설정 되므로 가장 중요한 요소이다.
    • method : 폼을 서버에 전송 할 http 메소드 지정
    • target : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 함.
  • form태그의 특징으로는 form을 제출 했을 때 새로운 페이지를 띄워버린다는 것이 특징이다.

form의 메소드

  • GET
    • url 에서 ? 뒤의 주소들을 query라고 한다.
    • get 요청으로 데이터로 전송을 하면 url query에 정보가 노출이 된다.
    • 정보를 가져오거나 검색 할 때 쓰임
    • 서버(backend)의 값이나 상태를 변경하지 않을 때

  • POST
    • get과는 다르게 query가 아닌 body에다가 정보를 보낸다.
    • 무언가를 생성하거나 어떤 정보를 보낼 때 쓰임
    • 데이터는 요청(request)의 본문(body)에 실어서 전송.
    • body를 읽으려면 body-parser을 사용해야한다.
      • body를 읽을 수 있도록 해주는 설정이다.
      • 데이터를 쉽게 처리 할 수 있도록 도와주는 미들웨어
      • 요청의 body를 해석해서 req.body 객체로 받을 수 있게 도와줌

form get 정보 받기

  • express get 요청의 기본코드

    기본코드 작성 후 index.ejs파일로 넘어가서 결과화면을 세팅해준다.

결과 화면 세팅 해 준 뒤, 명령pormpt창에 node run '설정해준 이름' 을 치면 서버가 실행된다. 이름을 설정 안해 줬으면 node app.js(서버 파일 이름)을 치면 된다.

결과화면에서 form이 제출 되었을 때 나타나는 화면을 설정 해주기 위해 설정 해준다.

form post 정보 받기

get과 마찬가지로 post의 요청과
결과 화면 만들어준다.
여기서 input 속성으로 적은 title의 값은 결과화면에서 ID text란에 커서를 가져다 놓으면 나오는 값이다.

이어서 제출 버튼을 눌러서 form을 전송하게 되면 화면은 넘어가지만 정보창에는 undefinded가 나온다.

  • 이유는 get은 query로, post는 body로 정보를 전달하게 되므로 body-parser 설정을 안해주었기 때문이다.

body-parser은 body를 해석해주는 설정으로 urlencoded에서 해석을 진행해준다.

post요청에서 form을 전송하고 데이터 값을 보면 checkbox의 데이터들이 on으로만 나타나진다. 이건 input의 type에서 value값을 주면 된다. value 값으로 marketing, private, use를 준 결과값이다.

result.ejs 파일로 결과화면 도출

  1. GET 요청으로 결과화면 도출

form 제출 시 result.ejs 파일을 만들어서 새로운 결과 페이지를 연결하려고 한다.
get, post 요청에서 응답하는 방식에는res.send가있고 res.render가 있다.

  • res.send는 간단한 텍스트나, 문자열, 파일등을 데이터 그대로 전송할 때 사용한다.
  • res.render는 뷰 템플릿을 사용하여 HTML을 동적으로 생성하고 이를 클라이언트에게 전달할 때 사용한다. 그래서 그냥 텍스트만 전달 했던 send 부분은 주석처리를 하고 render를 이용해서 result파일을 연결 해주었다.

get 요청으로 전송된 결과 화면에서는

이런식으로 코드를 주어 결과 화면에는 text 그대로 결과 화면이 나온다.

이 text들을 파일에 사용한 정보들로 바꿔 줄 것이다.

일단 res.render의 두 번째 인자로 result 파일에 들어갈 정보를 객체로 보내준다.

두 번째 인자로 적어준 title을 result 파일에서<%=%>를 사용해서 적용 시켜준다.
id 와 email, pw는 query에 담겨있기 때문에 userInfo로 담아주고 result 파일에서 userInfo.(정보)로 적용 시켜준다.

사용된 정보(title: GET, query에 담겨있고, 사용자가 입력하는 id, email, pw) 들로 이뤄진 result 화면을 볼 수 있다.

  1. POST로 결과화면 도출

get요청과 같이 res.send를 주석처리해주고 res.render를 이용해서 title과 userInfo들을 입력하려한다. 이때 post는 body에 정보를 전달해주므로 res.body를 사용해준다.
결과는 GET요청과 동일하게 들어왔지만 post에는 email정보를 주지 않았기 때문에 공백란으로 남는것을 볼 수있다.

form validation (유효성 검사)

  • form 요소들에 정보가 올바르게 입력되었는지 검사 하는 것
    ex) 비밀번호: 8자리 이상, 특수문자 및 대문자 1개 이상 포함, email: @ 무조건 포함

  • input 태그에 지정 가능한 유효성 검사 기능
    • required: 필수값
    • min/max length: 최소, 최대 문자수
    • min, max: 최소, 최댓 값
    • type: 입력받는 정보 타입 ( email 형식 검사 )
    • pattern: 정규식으로 검사
      • / : 정규식을 사용한다는 의미
      • ^ : 시작, $ : 끝,
      • [ ] : 범위
        ex) [a-z]: a부터 z까지 중 문자 하나, [가-힣]: 한글의 모든 음절 범위
      • { } : 개수
        ex) {2, 4}: 2개 부터 4개 까지
      • ( ) : 그룹 검색 및 분류
      • . : 임의의 글자 하나
      • + : 1개 이상의 글자
      • * : 0개 이상의 모든 문자
      • ? : 0~1번 반복되는 문자열

위에서 작성한 form에 title에 맞게 pattern으로 작성해 주었다.
결과 화면에서 정규식에 맞지 않게 입력하면 위와 같이 정보창이 뜬다.

유효성 검사 응용

사용할 기본 코드 작성

1. input창이 빈 값일 때 제출이 안되도록

  • 먼저 form을 불러오는 방식이 여러개 있다.
    form에 name값을 적어도 되고 form에 id값을 적어도 같은 form을 불러 올 수 있다.

  • 만약 form안에 id2라는 name을 가진 input창의 value값이 공백으로만 이루어져 있다면 다음 함수를 실행 해 주세요라는 코드이다.
  • return에 false를 해야만 submit 이벤트를 막을 수 있다.

2. chekbox에 하나라도 선택이 되어 있어야만 제출 되도록

  • 만약 form의 첫번째 mail과 두번째 mail에 checked가 false이면, 제출이 되지 않는다.라는 코드이다.
  • checkbox는 기본 default 값으로 checked 옵션이 false가 되어있어서 체크가 안되어있다.
  • checkbox는 console.log( )로 확인 해보면배열의 형태로 값이 나타나진다.
  • 이 코드도 마찬가지로 return에 false를 해야만 submit 이벤트를 막을 수 있다.

form validation을 post로 요청해 주는 API 작성
결과는 data로 확인하기위해 send를 주었다.

nodemon

파일들을 모니터링 하다가 소스코드 변경시 자동으로 node 재실행을 해주는 패키지

  • 원래 서버측코드가 변경 될 때마다 ctrl+c 단축키로 node 명령어를 종료 했다가 다시 입력을 해주어야 함.

  • npm install -g nodemon을 해주면 전역 설치를 해주고, 설치 후 nodemon -v를 해주면 설치 확인(버전 확인)을 해줄 수 있다.
    • 전역 설치: -g옵션(global)으로 전역 node_modules/ 폴더 안에 패키지를 설치함.
      • 모든 프로젝트가 공통으로 사용 가능 // npm install
    • 지역 설치: 해당 프로젝트의 node_modules/ 폴더 안에 패키지 설치
      • 해당 프로젝트 내에서만 사용 가능 // npm install -g

  • 설치 후 package.json에 들어가서 "test" 아래에 "watch": "node (파일명)를 적어서 실행 명령어를 입력해준다.
    • 파일명에 server라고 적어도 됨.
    • 여기에서는 작은따음표''를 사용하면 안되고 큰따음표""를 사용해야한다.

  • 실행 시킬 때에는 npm run watch를 적어주면 실행된다.

API

Application Programming Interface
프론트엔드에서 백엔드로 데이터를 요청하면 (request)
백엔드에서 프론트엔드로 응답(response)

  • REST API : Representational State Transfer API
    • client가 server로 요청을 할 때 GET, POST, PUT, DELETE method같은 자원들을 보낼 수 있다.
    • server에서는 client로 jason이라는 format의 데이터라던지, XML이라 format의 데이터를 보냄으로 응답을 할 수 있다.
    • HTTP통신에서 CRUD요청을 resource + method로 표현, 특정한 형태로 전달하는 방식.
    • REST API를 요청 할 때에는 resource와 어떠한 method로 통신 할 것인지를 적어주면 된다.
      • resource: 내가 필요한 데이터, 모든 데이터들은 특정 장소에 보관되어 있음.
        (HTTP URI를 통해 자원을 명시한다.)
      • method 뒤에는 주소를 적어주어야 하는데 그 주소가 URI이다. 이렇게 주소와 URI가 명시되어있는 방식으로 통신하는 방식이 REST API이다.
  • Method의 방식
    • GET : 읽기, 검색 : 내용 또는 정보를 가지고만 오는 방식. (뉴스 기사..)
    • POST : 입력, 등록 : 로그인, 댓글 등록, 게시판 등록 등,,
    • PUT: 모두 수정
    • PATCH : 일부 수정
    • DELETE : 삭제
profile
오태원
이전 포스트

jQuery

다음 포스트

동적폼 전송 - 241122

0개의 댓글