Request

: HTTP Request(요청)는 클라이언트가 서버로 보내는 요청 메시지로, 웹 리소스에 대한 동작(GET, POST, 등) 및 해당 리소스와 함께 전달되는 데이터를 정의합니다.

Overview

•

클라이언트가 서버로 요청을 보내는 방법

◦

브라우저를 통해 요청 보내기

◦

API 개발 및 테스트 도구를 통해 요청 보내기

▪

Postman

▪

Thunder Client

•

Thunder Client 로 요청 보내보기

•

스프링 부트로 서버에서 요청 받아보기

◦

요청 테스트

▪

Thunder Client 로 요청 테스트

▪

HTML form 태그로 요청 테스트

클라이언트가 서버로 요청을 보내는 방법

•

브라우저를 통해 요청 보내기

•

API 개발 및 테스트 도구를 통해 요청 보내기

브라우저를 통해 요청 보내기

•

주소 표시줄에 URL 를 입력하여 요청하기

•

FORM 전송 요청 하기

주소 표시줄에 URL을 입력하여 요청하기:

•

HTTP 요청 메소드: 일반적으로 브라우저에서 주소 표시줄에 URL을 입력하여 요청을 보낼 때 사용되는 HTTP 메서드는 GET입니다.

•

특징:

◦

GET 메서드는 서버로부터 정보를 요청하고 해당 리소스에 대한 요청을 보냅니다.

◦

주소 표시줄에 직접 입력하므로, 브라우저에 의해 가장 간단하게 요청할 수 있습니다.

◦

주로 웹페이지를 요청할 때 사용되며, URL에 쿼리 파라미터를 포함하여 정보를 전달할 수 있습니다.

FORM 전송 요청하기:

•

HTTP 요청 메소드: FORM 전송에서 사용되는 기본 메서드는 GET 또는 POST입니다.

•

특징:

◦

GET: 폼 데이터를 URL의 쿼리스트링에 포함하여 전송합니다. 주로 데이터 검색이나 조회에 사용됩니다. URL에 데이터가 노출되며 길이에 제약이 있습니다.

◦

POST: 폼 데이터를 HTTP 요청의 본문(body)에 포함하여 전송합니다. 데이터 길이에 제약이 없고, 민감한 정보 전송에 사용됩니다. 안전하고 데이터를 노출시키지 않습니다.

<form action="/board/insert" method="POST" id="form">
		<input type="text" name="title" placeholder="제목">
		<input type="text" name="writer" placeholder="작성자">
		<textarea name="content" cols="40" rows="5" placeholder="내용"></textarea>
</form>
HTML
복사

GET vs POST

GET

용도

•

서버로 데이터를 요청하여 가져오는 데 사용됨.

•

정보를 검색하거나 조회할 때 사용.

특징

•

URL의 쿼리 파라미터를 통해 데이터를 전달

•

길이에 제한이 있어 한정된 양의 데이터 전달에 적합.

•

브라우저에서 캐싱될 수 있어, 반복 요청에 유용함.

POST

용도

•

서버로 데이터를 전송하는 데 사용됨.

•

새로운 데이터를 생성하거나 업데이트할 때 사용.

특징

•

데이터를 HTTP 요청의 본문(body)에 포함하여 전달 (데이터가 URL에 노출되지 않음).

•

데이터 길이에 제한이 없어 더 많은 양의 데이터 전달에 적합.

•

민감한 정보 전송에 적합하며, 보안을 위한 HTTPS 사용 권장.

API 개발 테스트 도구를 통해 요청 보내기

API 개발 테스트 도구

: 개발자가 API를 만들고, 테스트하며, 디버깅하는데 도움을 주는 소프트웨어 도구입니다.

종류

•

Postman

•

Thunder Client (VSCODE)

Postman

•

API 개발, 테스트 및 문서화에 널리 사용되는 플랫폼.

•

사용자 친화적 인터페이스와 다양한 기능을 제공하여 API 테스트 및 디버깅이 용이함.

Postman API Platform | Sign Up for Free

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

https://www.postman.com/

Thunder Client (VSCODE)

경량 Rest API 클라이언트 익스텐션으로, Visual Studio Code용으로 설계된 간단하고 깔끔한 디자인을 가지고 있습니다.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

Postman 으로 요청 보내보기

New

HTTP Request

Request 작성

요청 메소드 : GET

URL : https://httpbin.org/get

Send

New

HTTP Request

Request 작성

요청 메소드 : GET

URL : https://httpbin.org/get

Send

응답 메시지

{
    "args": {},
    "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate, br",
        "Host": "httpbin.org",
        "Postman-Token": "86f7879d-21ba-425e-a061-4d640b5dd900",
        "User-Agent": "PostmanRuntime/7.31.1",
        "X-Amzn-Trace-Id": "Root=1-6540f7d5-3e6af9f251d571d0093f073f"
    },
    "origin": "114.201.106.211",
    "url": "https://httpbin.org/get"
}
JSON
복사

Thunder Client 로 요청 보내보기

VS CODE 실행

확장: 마켓플레이스 (Extension)

Thnder Client 검색

설치

Thnder Client 아이콘 클릭

New Request

Request 작성

요청 메소드 : GET

URL : https://www.thunderclient.com/welcome

Send (요청-Requset)

결과 확인 (응답-Response)

더 자세한 사용법

Thunder Client

설치

•

VS CODE 실행

•

확장: 마켓플레이스 (Extension)

•

Thunder Client 검색

Thunder Client 아이콘 클릭

New Request

Request 작성

요청 메소드 : GET

URL : https://www.thunderclient.com/welcome

Send

응답 확인

스프링 부트로 서버에서 요청 받아보기

•

프로젝트 구조

•

프로젝트 환경

•

작업 파일

•

실행 결과

◦

요청 테스트

▪

GET

▪

POST

▪

PUT

▪

DELETE

프로젝트 구조

spring-request/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── joeun/ │ │ │ └── springrequest/ │ │ │ ├── controller/ │ │ │ │ └── BoardController.java

│ │ │ ├── dto/ │ │ │ │ └── Board.java │ │ │ ├── ServletInitializer.java │ │ │ └── SpringRequestApplication.java │ ├── resources/ │ │ ├── application.properties │ │ ├── static/ │ │ └── templates/ └── build.gradle

프로젝트 환경

•

Spring boot version : 3.3.5

•

Group Id : com.aloha

•

Artifact Id : spring-request

•

Java version : JDK 17

•

Packaging : WAR

•

Dependency

◦

Spring Web

◦

Spring Dev Tools

◦

Lombok

작업 파일

•

build.gradle

•

Board.java

•

BoardController.java

•

build.gradle

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
SQL
복사

•

Board.java

/**
 * Board 
 * - 게시글 정보
 */
@Data
@NoArgsConstructor
public class Board {
    private int boardNo;        
    private String title;
    private String writer;
    private String content;
    private Date regDate;
    private Date updDate;
    private int views;
    
    public Board(String title, String writer, String content) {
        this.title = title;
        this.writer = writer;
        this.content = content;
    }
    
}
Java
복사

•

BoardController.java

/**
 *  게시판 컨트롤러
 * - 게시글 목록            - [GET]     - /board
 * - 게시글 조회            - [GET]     - /board/10
 * - 게시글 등록 처리       - [POST]    - /board
 * - 게시글 수정 처리       - [PUT]     - /board
 * - 게시글 삭제 처리       - [DELETE]  - /board
 */
@Slf4j              // 로그 사용 어노테이션
// @Controller      // 해당 클래스를 컨트롤러 역할로 빈등록
@RestController     // @ResponseBody+@Controller : 해당 클래스를 REST API 컨트롤러로 빈등록
@RequestMapping("/board")
public class BoardController {

    /**
     * 게시글 목록
     * [GET]
     * /board
     * - response :  boardList
     * @return
     * @throws Exception
     */
    @GetMapping(value="")
    public ResponseEntity<List<Board>> list() throws Exception {
        log.info("[GET] - /board");

        List<Board> boardList = new ArrayList<>();
        boardList.add(new Board("제목1", "작성자1", "내용1"));
        boardList.add(new Board("제목2", "작성자2", "내용2"));
        boardList.add(new Board("제목3", "작성자3", "내용3"));

        return new ResponseEntity<>(boardList, HttpStatus.OK);
    }


    /**
     * 게시글 조회
     * [GET] 
     * /board
     * - response :  board
     * @param model
     * @param boardNo
     * @return
     * @throws Exception
     */
    @GetMapping(value="/{boardNo}")
    public ResponseEntity<Board> read(@PathVariable("boardNo") int boardNo) throws Exception {
        log.info("[GET] - /board/read");

        Board board = new Board("제목1", "작성자1", "내용1");    

        return new ResponseEntity<>(board, HttpStatus.OK);
    }


    /**
     * 게시글 쓰기 처리
     * [POST]
     * /board
     * - response : 
     * ✅ 요청 성공 : 200 OK            "SUCCESS"  
     * ❌ 요청 실패 : 400 Bad Request   "FAIL"
     * @param board
     * @return
     * @throws Exception
     */
    @PostMapping(value="")
    public ResponseEntity<String> insertPro(Board board) throws Exception {
        int result = new Random().nextInt(2);

        if( result == 0 ) {
            return new ResponseEntity<>("FAIL", HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity<>("SUCCESS", HttpStatus.OK);
    }
    
    /**
     * 게시글 수정 처리
     * [PUT]
     * /board
     * - response : 
     * ✅ 요청 성공 : 200 OK            "SUCCESS"  
     * ❌ 요청 실패 : 400 Bad Request   "FAIL"
     * @param board
     * @return
     * @throws Exception
     */
    @PutMapping(value="")
    public ResponseEntity<String> updatePro(Board board) throws Exception {
        int result = new Random().nextInt(2);

        if( result == 0 ) {
            return new ResponseEntity<>("FAIL", HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity<>("SUCCESS", HttpStatus.OK);
    }

    /**
     * 게시글 삭제 처리
     * [DELETE]
     * /board
     * - response : 
     * ✅ 요청 성공 : 200 OK            "SUCCESS"  
     * ❌ 요청 실패 : 400 Bad Request   "FAIL"
     * @param boardNo
     * @return
     * @throws Exception
     */
    @DeleteMapping(value="")
    public ResponseEntity<String> deletePro(@RequestParam("boardNo") int boardNo) throws Exception {
        log.info("boardNo : " + boardNo);
        int result = new Random().nextInt(2);

        if( result == 0 ) {
            return new ResponseEntity<>("FAIL", HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity<>("SUCCESS", HttpStatus.OK);
    }
    
    
    
}
Java
복사

실행 결과

요청 테스트

•

Thunder Client 로 요청 테스트

•

HTML form 태그로 요청 테스트

•

GET : http://localhost:8080/board

•

GET : http://localhost:8080/board/10

•

POST : http://localhost:8080/board

◦

Body  Form  title, writer, content

•

PUT : http://localhost:8080/board

◦

Body  Form  boardNo, title, writer, content

•

DELETE : http://localhost:8080/board/10

Thunder Client 로 요청 테스트

GET : http://localhost:8080/board

GET : http://localhost:8080/board/10

POST : http://localhost:8080/board

•

Body  Form  title, writer, content

PUT : http://localhost:8080/board

•

Body  Form  boardNo, title, writer, content

DELETE : http://localhost:8080/board/10

Run Collection

HTML form 태그로 요청 테스트

•

build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
Plain Text
복사

build.gradle 수정 후, [프로젝트 우클릭] > [프로젝트 다시 빌드] 해야 프로젝트 다시 빌드

•

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML form 태그로 요청 테스트</title>
</head>
<body>
    <h1>HTML form 태그로 요청 테스트</h1>
    <p>
        POST, PUT, DELETE 는 실제 DB 와 연결이 안 되어 있고, <br>
        랜덤으로 SUCCESS, FAIL 응답합니다.
    </p>
    

    <hr>
    <ul>
        <li>GET : <a href="http://localhost:8080/board">http://localhost:8080/board</a></li>
        <li>GET : <a href="http://localhost:8080/board/10">http://localhost:8080/board/10</a></li>
        <li>
            POST : <a href="http://localhost:8080/board">http://localhost:8080/board</a>
            <ul>
                <li>Body ➡ Form ➡ title, writer, content</li>
            </ul>
        </li>
        <li>
            PUT : <a href="http://localhost:8080/board">http://localhost:8080/board</a>
            <ul>
                <li>Body ➡ Form ➡ boardNo, title, writer, content</li>
            </ul>
        </li>
        <li>
            DELETE : <a href="http://localhost:8080/board">http://localhost:8080/board/10</a>
            <ul>
                <li>Body ➡ Form ➡ boardNo</li>
            </ul>
        </li>
    </ul>
    <hr>

    <h2>- GET : http://localhost:8080/board</h2>
    <form action="/board" method="GET">
        <input type="submit" value="요청">
    </form>
    <hr>
    
    <h2>- GET : http://localhost:8080/board/10</h2>
    <form action="/board/10" method="GET">
        <input type="submit" value="요청">
    </form>
    <hr>
    
    <h2>- POST : http://localhost:8080/board</h2>
    <h3>- Body ➡ Form ➡ title, writer, content</h3>
    <form action="/board" method="POST">
        <input type="text" name="title" placeholder="title" value="제목"> <br>
        <input type="text" name="writer" placeholder="writer" value="작성자"> <br>
        <input type="text" name="content" placeholder="content" value="내용"> <br>
        <input type="submit" value="요청">
    </form>
    <hr>
    
    <h2>- PUT : http://localhost:8080/board</h2>
    <h3>- Body ➡ Form ➡ boardNo, title, writer, content</h3>
    <!-- form 태그에서는 method: GET,POST 만 지원됨 -->
    <form action="/board" method="POST" id="form-put">
        <input type="text" name="boardNo" placeholder="boardNo" value="10"> <br>
        <input type="text" name="title" placeholder="title" value="제목"> <br>
        <input type="text" name="writer" placeholder="writer" value="작성자"> <br>
        <input type="text" name="content" placeholder="content" value="내용"> <br>
        <input type="button" value="요청" onclick="update()">
    </form>
    <hr>
    
    <h2>- DELETE : http://localhost:8080/board</h2>
    <h3>- Body ➡ Form ➡ boardNo</h3>
    <!-- form 태그에서는 method: GET,POST 만 지원됨 -->
    <form action="/board" method="POST" id="form-delete">
        <input type="text" name="boardNo" placeholder="boardNo" value="10"> <br>
        <input type="button" value="요청" onclick="remove()">
    </form>
    <hr>
    

    <script>

        // 게시글 수정 요청 - JSON
        function update() {

            let request = new XMLHttpRequest()

            // 입력 정보
            let form = document.getElementById('form-put')
            let boardNo = form.boardNo.value
            let title = form.title.value
            let writer = form.writer.value
            let content = form.content.value

            // JSON 
            let data = {
                'boardNo' : boardNo,
                'title' : title,
                'writer' : writer,
                'content' : content
            }

            // 응답 확인
            request.onreadystatechange = function() {
                // 요청 성공
                if( request.readyState == request.DONE && request.status == 200 ) {
                    let response = request.responseText
                    alert(response)
                }

                // 요청 실패
                if( request.readyState == request.DONE && request.status == 400 ) {
                    let response = request.responseText
                    alert(response)
                }

                // 에러 발생
                if( request.readyState == request.DONE && request.status == 500 ) {
                    alert('서버측 에러 발생')
                }
            }

            // 요청 설정
            let url = 'http://localhost:8080/board'

            request.open("PUT", url, true)
            request.setRequestHeader("Content-Type", "application/json")

            // JSON.stringify() : JavaScript 의 객체를 JSON 문자열로 변환하는 메소드
            request.send( JSON.stringify(data) )

        }



        // 게시글 삭제 요청 - JSON
        function remove() {

            let request = new XMLHttpRequest()

            // 입력 정보
            let form = document.getElementById('form-put')
            let boardNo = form.boardNo.value

            // JSON 
            let data = {
                'boardNo' : boardNo,
            }

            // 응답 확인
            request.onreadystatechange = function() {
                // 요청 성공
                if( request.readyState == request.DONE && request.status == 200 ) {
                    let response = request.responseText
                    alert(response)
                }

                // 요청 실패
                if( request.readyState == request.DONE && request.status == 400 ) {
                    let response = request.responseText
                    alert(response)
                }


                // 에러 발생
                if( request.readyState == request.DONE && request.status == 500 ) {
                    alert('서버측 에러 발생')
                }
            }

            // 요청 설정
            let url = 'http://localhost:8080/board/' + boardNo

            request.open("DELETE", url, true)

            // JSON.stringify() : JavaScript 의 객체를 JSON 문자열로 변환하는 메소드
            request.send()

        }
    </script>

    
</body>
</html>
HTML
복사

Github (소스코드)

github.com

https://github.com/ALOHA-CLASS/SpringBoot_TJE/tree/main/spring-request