Post방식 form데이터 전송 & 포스트맨과 html 파일 전송 모두 해보기

개발

서블릿을 공부하면서

 

간단한 예제로 

 

전체 파라미터 조회

단일 파라미터 조회

복수 파라미터 조회를 해보고 있다

 

이전에는 그냥 코드 쭈욱 적고 전송하고 잘 되네? 그럼 끝 

 

이런 식으로 바쁘게 프로젝트를 진행하면서 제대로 머리속에 넣지 못하고 흘러간 시간이 너무 아깝다

 

차근차근 어? 이런 것도 몰라? 라고 생각할 수 있는 것일지라도 확실하게 알기 위해서

 

나름대로 근본부터 공부하려고 한다

 

우선 코딩을 처음 배울 때 vscode를 사용했었는데

 

html css 처럼 다소 이해도가 낮은 학습을 할 때

 

! 를 타이핑하고 엔터키를 누르면 자동으로 제공되는 

 

코드가 있는데 그것이 이번시간과 아주 연관성이 깊다

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/request-param" method="post">
    user name : <input type="text" name="username"/>
    age : <input type="text" name="age" />
    <button type="submit">전송</button>

</form>
</body>
</html>

 

자 위 코드를 보면 어딘가 많이 익숙하다

 

바로 값을 적고 그 값을 보내면 화면에서 값이 출력되는 기본적인 코드인데

 

내가 설명이 부족할지라도 내가 이해한대로 설명해보면

 

html방식으로 보내고

utf-8로 인코딩해줘서 한글이 잘 출력되도록 해줬고

헤더에 타이틀이라고 명시해서 헤더라고 잘 알 수 있게 해주고

바디안에 이제 내가 보낼 데이터를 적는데

form action이라고 하면 전송을 했을 때 어디로 보낼 것인가? 인데 /request-param으로 보내겠다는 것이다

 

이말은 즉 url 뒤에 ? 를 붙여주고 username=값&age=값 이런형태로 보내는 get방식이 아닌

 

body에 값을 실어보내는 post방식을 사용하기위해 폼을 짜는것이다 그래서 method="post"라고 써준것은

내가 이 값을 post방식으로 보낼게 라고 웹브라우저에게 알려주는 것이다 

그래서 어떤값을 보낼건지 보면

 

text 형식으로 name으로 username을 보내고 

text 형식으로 name으로 age를 보낼게 

 

그리고 버튼 타입을 submit이라고 적어주게 되면 클릭 시 내가 입력한 유저이름과 나이가 form action과 연동되어서

post 방식으로 해당 url이 맵핑된 곳으로 내가 작성한 데이터를 쏘옥~! 보내게 되는 것이다

 

그럼 저 url은 무엇인가? 라는 생각이 든다

 

RequestParamServlet이라는 파일을 열어보면

 

@WebServlet(name = "requestParamServlet", urlPatterns = "/request-param")
public class RequestParamServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("[전체 파라미터 조회] - start");

        request.getParameterNames().asIterator()
                        .forEachRemaining(paramName -> System.out.println(paramName + "=" + request.getParameter(paramName)));

        System.out.println("[전체 파라미터 조회] - end");

        request.getHeaderNames();

        System.out.println("[단일 파라미터 조회]");
        String username = request.getParameter("username");
        String age = request.getParameter("age");

        System.out.println("username = " + username );
        System.out.println("age = " + age);

        System.out.println("[이름이 같은 복수 파라미터 조회]");
        String[] usernames = request.getParameterValues("username");
        for (String name : usernames) {
            System.out.println("username = " + name);
            
        }

        // 새로고침 시 html처럼 ok 라고 응답이 찍혀져서 확인가능
        response.getWriter().write("ok");


    }
}

 

이렇게 코드를 작성해줬는데

 

이 어노테이션을 보면 name으로 파일명을 적어줬다 이게 내가 이해한대로 설명하자면

서블릿이라는 녀석한테 야 이 파일로 매칭해줘 url패턴으로 /request-param 해줬으니까

이거 누가 요청을 리퀘스트 즉 요청때리면 이 파일로 보내줘! 여기야 여기 라고 매칭을 시켜라고 안내하는 것이다

 

그리고 나서 서비스라는 메서드를 만들어서 요청과 응답을 적어줘서 요청을 주고 응답을 받고 하는 것이 가능하게 적어준다

사실 이부분은 100프로 이해한것은 아니지만 이걸 작성해야만 하단에서 내가 원하는 요청과 응답을 주고 받을수있기 때문에

이게 필수적으로 작성이 선행되어야 한다는 것 정도는 알아두자

 

여기 코드에서 아주 중요한게 나온다

내가 프로젝트하면서 정말 많이 보고 썼던 request.getParameter 인데

 

이걸 한마디로 설명하면 1개의 값을 정확하게 읽어들인다음 가져올 때 이 코드를 쓰면 되는데

 

말그대로 request -> 요청할게 

 

어떻게? get -> get방식으로 요청할게

 

무엇을? Parameter -> get방식으로 요청하는데 파라미터를 가져다줘 

 

이렇게 이해하면 된다

 

그래서 내가 작성한 username이라는 파라미터를 겟 방식으로 요청해서 가져온다는 것이다

 

그걸 println으로 출력하게 된다

 

자주있는 일은 아니지만 username이 2개라면? 먼저 읽힌 것을 가져오게 되는데 

 

복수 파라미터를 읽을 경우에는 getParameterValues라고 작성해주면 2개 모두 읽어 올 수 있다

 

요청해서 잘 응답이 오면 또 대답을 봐야하지 않겠는가?

 

그럴경우에는 반대로 request했으니 response.getWriter().write("내가원하는 문자 작성하자"); 이렇게 작성해주면 된다

 

말 그대로 응답해줘 작성된 거 보여줘 이렇게 생각하면 된다 ok 라고 찍었고 잘 요청됬으니 ok 라는 응답도 잘 찍히는 것이다

 

 

여기서 이렇게 username , age 를 작성해서 출력하는데

 

이것을 앞에서 form으로 작성할 때 name에 써준것과 똑같이 작성해야한다

 

김서방 찾으려고 김서방 김서방 외치고있는데 저기서 이서방? 박서방? 이라고 하면 찾을 수 있겠는가?

 

내가 찾고자하는 사람 이름을 정확하게 종이에 써서 저 이사람 찾아요 이사람 찾으면 알려주세요! 라고 해야 하듯이

 

form 액션 때릴 때 내가 name을 지정했으면 보낸 다음 그 값을 보는 곳에서도 동일한 네임으로 매칭해줘야 값이 잘 나오는 것이다

 

수도꼭지에 호수 달아놓고 물 열심히 틀었는데 호수끝에 물이 나오는 양동이를 내 양동이가 아니라 다른사람 양동이에 걸쳐두면

 

내가 열심히 뽑아내는 물이 알고보니 다른곳으로 줄줄 새는 것이다

 

입구와 출구를 동일하게 하라 그 소리다

 

자 그런데 이런 테스트를 개발하다보면 수십번 수백번 해야할지도 모르는데 매번 html태그를 하나하나 입력하고

 

form action이니 post method니 일일이 작성을 해야할까? 얼마나 피곤한 일인가?

 

그럴 때 우리게에 빛과 소금같은 존재가 있으니 그 이름하여 포스트맨 되시겠다

 

 

 

그 귀찮은 일을 이 앱 하나로 해결 할 수 있다 

 

포스트맨 사용법은 검색하면 5분도 안걸리니 알아서 할 수 있길 희망하며

 

 

자 이렇게 보면 위에 주소창 옆에 v 표시를 누르면 get ,post 등등 원하는 것을 선택할 수 있다

 

당연히 method="post" 였으니 포스트로 설정해주고 

주소창에 우리가 원래 작성했던 url을 그대로 작성해주자 만약 여기서 get방식이면

 

저 url뒤에 ? 로 쿼리스트링을 날리면 된다

 

지금은 post니까 저렇게 작성해주고 하단에 KEY ,VALUE가 보이는데 

 

저기에 username 을 적고 벨류에 원하는 값

하단에 key에 age를 적고 벨류에 원하는 값을 작성해주고 

 

위에 radio(동그라미버튼)를 보면 none form-data 등등 많은데 우리는 x-www-form-urlencoded를 선택해주자 

 

그리고 파란색 send를 딱! 눌러주면!

 

바디에 response로 작성했던 ok도 잘 나온다

 

그럼 이제 인텔리제이로 들어가서 system.out으로 작성했던 값들이 잘 찍혔나볼까?

 

 

원하는 값 즉 내가 입력한 값이 잘 출력된다

 

이 방법을 알았으니 이제 테스트할 경우 포스트맨을 사용해서 훨씬 더 효율적이게 시간을 아끼면서 개발할 수 있다

 

이렇게 간단하게 post방식에 대해 알아보았다