[web-server] 요청처리 : Form 전송 이용하기, method의 2가지 종류 (GET, POST)

form 전송이란?

가장 간단한, 클라이언트가 서버 쪽으로 정보를 넘겨주는 방법

그 중에서 사용할

body-parser

• 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
• Post로 정보를 전송할 때 요청의 body(req.body)로 받을수 있게 도와준다.
• express 4.x 부터body-parser가 내장되어있어 설치 필요 없음

(이전에는 모듈로 따로 설치했으나, 이제는 설치 하지 않아도 된다!)

// js에서 작성중

app.use(express.urlencoded({extended: true})); //x-www-urlencoded 데이터 해석
app.use(express.json()); //클라이언트가 보낸 데이터가 json형태로 받아와질 것이다. json : 딕셔너리 형태와 비슷

// form 태그 사용하는 서버 만들기
app.get("/form", (req,res)=>{
    res.render("form");
})

<form> 태그

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

<form> 속성

//설명부분

action="" // 내가 보낼 주소 적기 (url) 폼을 전송할 라우터를 적는다.
action="/getform" // 이라고 적으면, 서버측에서는 저 주소에 대한 처리가 가능한 코드가 있어야

js에
app.get("/getform", (req,res)=>{
    res.render("");
})


method="" //get과 post 중 하나를 넣는다. 이때 get은 폼에 입력한 정보가 url에 추가되어 보인다. post는 그 정보가 안나오므로, 보안상 좋다.


name="" //name을 작성하면 js 내에서
        document.forms["getform"]를 찍어서 불러올 수 있다. 
    <script>
        console.log(document.forms["getform"])
    </script>

<form> 속성 - method

method의 2가지 종류 (GET, POST)

//app.js에서 사용하고 있는 코드

// form 태그 사용하는 서버 만들기
app.get("/form", (req,res)=>{
    res.render("form");
})

app.get("/getform", (req,res)=>{ // 원래 라우터였던 form에서 getform라우터로 이동한 다음 send안에 문자열이 보이게 된다.
    console.log(req.query); // 클라이언트가 서버에 보내는 요청 중 'query'를 찍는다. 이는 ?뒤에 있는 것들로 터미널에 출력이 된다.
    res.send("get 요청성공!");
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 서버로 정보를 전송하는 form태그 -->
    <form action="/getform" method="get" name="getform">
        <input type="text" name="id">
        <input type="password" name="pw">
        <button type="submit">제출하기</button>
    </form>

    <script>
        console.log(document.forms["getform"])
    </script>
</body>
</html>

GET 요청은 쿼리에, POST 요청은 바디에 담긴다.

//js 

//post 요청 받기 == post 메소드 사용
app.post("/postform", (req,res)=>{ // 원래 라우터였던 form에서 postform라우터로 이동한 다음 send안에 문자열이 보이게 된다.
    console.log(req.body); // 클라이언트가 서버에 보내는 요청을 body에 받아온다. (get과 차이)
    res.send("post 요청성공!");
})


//html 

    <h3>post 요청</h3>
    <form action="/postform" method="post">
        <input type="text" name="id">
        <input type="password" name="pw">
        <button type="submit">제출하기</button>
    </form>

get과 post 의 차이

get

- url에 직접치고 들어갈수도 있고 심지어 거기서 아이디 비번도 입력 가능하다.

- localhost:8080/getform?id=lll&pw=3434

그러나 post는 url을 통해 들어갈 수 조차 없다. (보안상 안전)

app.js에서 코드 작성하는 순서

app use 먼저 상단에, 그다음 여는 listen이 마지막 하단에

app.use(express.urlencoded({extended: true})); //x-www-urlencoded 데이터 해석
app.use(express.json());

app.listen( port, ()=> { //listen이라는 메소드를 통해 웹서버를 연다. 이때 인저는 두개 (포트번호, 함수)
    console.log("server open :", port);
});

    <form action="/getform" method="get">
 
        <input type="radio" name="gender"> 남자
        <input type="radio" name="gender"> 여자
        // 묶임의 기준 == name을 이용하기!
        <input type="radio"> 음악 감상
        <input type="radio"> 영화 보기
        
        <button type="submit">제출하기</button>
    </form>

name 속성을 이용해 묶어서 묶음 중 하나만 선택하게 만들 수 있다. (하나는 체크 해제)

여러 개 선택하고 싶다면? checkbox 사용

       <input type="checkbox" name="interest"/> 음악 감상
        <input type="checkbox" name="interest"/> 영화 보기
        <input type="checkbox" name="interest"/> 운동 하기

이때 클라이언트는 구분이 되지만, 서버에서는 다 구분이 되지 않으므로 value를 주어야 한다.

(서버에서는 무슨 값을 보낼지 모르므로 )

    <h3>get 요청</h3>
    <form action="/getform" method="get">
        <input type="text" name="id">
        <input type="password" name="pw">
        <input type="radio" name="gender" value="남자"> 남자
        <input type="radio" name="gender" value="여자"> 여자
        
        <input type="checkbox" name="interest" value="음악감상"/> 음악감상
        <input type="checkbox" name="interest"value="영화보기"/> 영화보기
        <input type="checkbox" name="interest"value="운동하기"/> 운동하기

        <button type="submit">제출하기</button>
    </form>

localhost:8080/getform?id=amana&pw=3333&gender=여자&interest=음악감상&interest=영화보기

<select>
• 선택창
• 서버가 지정한 특정값만을 선택할 수 있는 요소
• input이 주관식이라면 select는 객관식

    <h3>post 요청</h3>
    <form action="/postform" method="post">
        <input type="text" name="id">
        <input type="password" name="pw">

        <select name="birthMonth">
            <% for(var i=1 ; i<=12 ; i ++ ) { %>
                <option value="<%=i%>"><%=i%></option>
                <%}%>
        </select>

        <button type="submit">제출하기</button>
    </form>

name은 select 태그에, value는 option태그에 들어간다.

<textarea> 태그

내용 쓰는 칸을 만들어준다.

속성 rows와 cols를 통해 행과 열을 미리 설정할 수 있다.

    <h3>post 요청</h3>
    <form action="/postform" method="post">
        <input type="text" name="id">
        <input type="password" name="pw">

        <select name="birthMonth">
            <% for(var i=1 ; i<=12 ; i ++ ) { %>
                <option value="<%=i%>"><%=i%></option>
                <%}%>
        </select>

         <textarea name="content" rows="30" cols="50"></textarea>
        <button type="submit">제출하기</button>
    </form>

<input>

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

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

        <input type="text" name="id" placeholder="아이디">
        <input type="password" name="pw" placeholder="비밀번호">

<label>

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

(for와 id는 같아야 한다.)

        <input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
        <input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>

묶음을 만드는 태그들

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

        <fieldset>
            <legend>성별</legend>
            <input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
            <input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>  
        </fieldset>

        <fieldset>
            <legend>성별</legend>
            <input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
            <input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>  
        </fieldset>
        
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="interest" value="음악감상"/> 음악감상
            <input type="checkbox" name="interest"value="영화보기"/> 영화보기
            <input type="checkbox" name="interest"value="운동하기"/> 운동하기
        </fieldset>

form validation (유효성검사)

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

- 개발자가 원하는 방식으로 클라이언트가 입력했는지를 검사

- 클라이언트에서 미리 검사하면 서버에서 튕기지 않게 할 수 있음

- 서버에서 유효성 검사를 해야하는 이유는 이러한 클라이언트 검사를 뚫고 들어갈 확률이 있기 때문에

둘 다 하는게 가장 좋다
ex. 비밀번호 : 8자리 이상, 특수문자 및 대문자 1개 이상 포함
ex. 이메일: @ 기호반드시포함

(클라이언트 측에서 유효성 검사)

- input 태그에 지정 가능한 유효성 검사 기능
• required : 필수값

• minlength / maxlength : 최소/최대문자수
• min / max : 최소/최대값
• type : 입력받는정보타입
• pattern : 정규식으로검사

required : 필수값

(값을 입력하지 않으면 넘어갈 수 없음)

        <input type="text" name="id" placeholder="아이디" required>
        <input type="password" name="pw" placeholder="비밀번호"required>

pattern 속성에서 정규식 사용

정규식(정규표현식): regex (regular expression)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA

developer.mozilla.org

    <form action="/getforms" method="get">
        <input type="text" name="이름" pattern="^\({a-zA-Z가-힣}){2,5}\$" required/> 이름
        <fieldset>
            <legend>성별</legend>
            <input type="radio" name="gender" value="남자" id="man"> <label for="man">남자</label>
            <input type="radio" name="gender" value="여자" id="woman"> <label for="woman">여자</label>  
        </fieldset>
        
        // 왜 패턴안에서 적은게 동작하지 않는지 나중에 처리하자

[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코

# 정규표현식이란?(Regular Expression: Regex) 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다. (이런걸 형식 언어, formal languange라고 합니다.) 정규표현식을 이용하면, 특정 패턴에 매

curryyou.tistory.com

[정규표현식] 정규표현식 정리

[정규표현식] 정규표현식 정리 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '추출', '치환'하는 과정을 매우 간편하게 처리

myeonguni.tistory.com

[JS] 📚 정규표현식(RegExp) - 이해하기 쉽게 정리 + 응용 예제

정규표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은

inpa.tistory.com

역슬래시 사용법 (\ = 이스케이프 문자)

[JavaScript] 정규표현식(regular expression)

🌈 정규 표현식 정의 자바스크립트에서 정규 표현식은 RegExp 객체로 표현된다. 정규 표현식 리터럴은 한 쌍의 슬래시(/) 문자 사이에 위치한다. // s로 끝나는 모든 문자열과 매치된다. const pattern

haranglog.tistory.com

    <form action="/getforms" method="get">
        <input type="text" name="이름" required/> 이름 <br>
        <input type="text" name="id" pattern="/^[a-zA-Z]\w{2,7}$/u" required> ID <br>
        <input type="text" name="mail" pattern= "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/"required> Email <br>
        <!-- 시작과 끝에 //로 감싸고, ^$로 시작하고 닫는다. 그 안에 대괄호로 내용을 넣어준다. 역슬래시\를 넣으면 특수기호를 일반문자로 취급한다. +를 통해 이어질 내용을 추가한다.-->
        <fieldset>

자바스크립트 응용한 유효성 검사

정규표현식.test(“검사할문자열”)
- 검사를 통과하면 true
- 검사를 통과하지 못하면 false

개발자를 편하게 하는 패키지

nodemon 패키지

• 서버측 코드(app.js 등) 가 변경 될 때마다 ctrl + c 단축키로 node 명령어를 종료하고, node app.js 명령을 다시 입력하기 귀찮음!

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

(서버측 코드 수정시 바로 반영)

참고) 지역설치vs. 전역설치

• 지역 설치 : 해당 프로젝트의 node_modules/ 폴더 안에 패키지 설치
= 해당 프로젝트 내에서만 사용 가능

• 전역 설치: -g 옵션(global)으로 전역 node_modules/ 폴더 안에 패키지 설치
= 모든 프로젝트가 공통으로 사용 가능

저작자표시 비영리 변경금지

'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL🚴‍♀️] CodingON' 카테고리의 다른 글

[파일업로드] 미들웨어(Middleware) 사용하기 (0)	2022.11.27
[동적 form 전송] Axios 중심으로 form 전송하기 (ajax, fetch 맛보기) (0)	2022.11.25
[Express, ejs 모듈] 노드 모듈을 이용한 웹 서버 구축 (0)	2022.11.22
[Node.js] promise 문법, FS모듈 다루기, 서버에 연결(HTTP) (0)	2022.11.19
[Node.js] 노드 내장 객체와 모듈 알기 (+ 객체 구조 분해, 콜백 함수) (2)	2022.11.19

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30