수월한 IT

단순 구구단에서 Restful API를 사용한 구구단까지 본문

BOOKS/Spring Boot

단순 구구단에서 Restful API를 사용한 구구단까지

IT여행자 2025. 3. 24. 17:21
728x90

안녕하세요~ IT 이곳저곳을 여행하고 있는 IT여행자입니다.

이번 여행지는 단순한 구구단 출력 프로그램을 사용하여 RESTful API를 사용하여 서버로부터 구구단 출력 정보를 전달받아 자바스크립트 내에서 출력하는 과정을 여행해 보려 합니다.

 

본 문서에서는 중간 과정은 생략되어 있고 최종 결과만을 기록하려 합니다. 만약 중간중간 과정이 궁금하시다면 아래의 동영상을 참고해 주시면 감사하겠습니다. 또한 전체 코드는 깃허브에 공유되어 있으니 참고 바랍니다.

 

 

[준비물]

  • JAVA JDK
  • Visual Studio Code
    • Extension Pack for Java
    • Spring Boot Extension Pack
  • Dependencies
    • Spring Web
    • Spring Boot Dev Tool

VSC에는 최소 두개의 extension이 필요합니다. 또한 프로젝트를 생성할 때 최소 두 개의 dependency가 필요합니다. 이 두 개의 dependency들은 프로젝트가 생성된 뒤에도 추가하거나 삭제할 수 있습니다. 본 지면에서는 Maven을 사용하기 때문에 pom.xml 파일을 수정하여 dependency들을 관리할 수 있습니다.  프로젝트를 생성하는 과정은 하나의 표로 정리하겠습니다.

 

[프로젝트 생성하기]

Ctrl + Shift + p를 눌러 프로젝트 생성 진행

프로젝트 종류 Spring initilaizr 로 검색
Spring Boot Version 3.4.4(각자 버전은 다를 수 있음)
project language Java
Group Id kr.jobtc (도메인이나 적당한 이름 가능)
Artifact Id restfulNchartjs(프로젝트명이 됨.)
packaging type War
Java version 17(각자 버전은 다를 수 있음)
dependencies Spring Web,
Spring Boot DevTool

 

 

HTML

CSS와 JavaScript 코드가 그리 복잡하거나 길지 않으므로  html문서와 함께 작성되어 있습니다. css부분은 출력창의 스타일을 간단히 만드는 정도로만 작성되었습니다. 코드의 설명은 자바스크립트 부분만 하겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단</title>
    <style>
        #result{
            box-sizing: border-box;
            padding:15px;
            border: 2px solid #aaa;
            width : 280px;
            margin-top:10px;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <span>구구단</span>
    <input type="text" value="2" id="dan">
    <button type="button" id="btnRun">실행</button>
    <br/>
    <div id="result"></div>
    <script>
        let btnRun = document.querySelector('#btnRun');
        btnRun.addEventListener('click', async ()=>{ //(1)
            let dan = document.querySelector('#dan').value;
            let result = document.querySelector('#result');
            let param = { //(2)
                'dan' : dan
            }
            let resp = await fetch("/gugudan", { //(3)
                method : 'POST', //(4)
                headers:{
                    'Content-Type' : 'application/json' //(5)
                },
                body: JSON.stringify(param) //(6)
            })
            let data = await resp.json(); //(7)
            data.result = data.result.replaceAll("\n", "<br/>"); //(8)
            result.innerHTML = data.result; //(9)
 
        })
    </script>
</body>
</html>

 

(1) "실행" 버튼이 클릭되면 실행되는 이벤트 핸들러입니다. 화살표 함수앞에  async는 동기화를 하기 위한 키워드입니다. fetch() 함수 자체가 비동기적 방식으로 처리되기 때문에 서버에서 처리된 값이 전달되기 전에 자바스크립트 하단에 있는 코드가 먼저 실행될 수도 있습니다. 그것을 사전에 방지하고자 동기화 블록으로 처리하였습니다. 만약 fetch().then()문장을 사용하게 되면 async 키워드는 불필요할 수도 있습니다.

(2) 서버로 전달되는 파라미터 값을 정의합니다. 보고자하는 구구단의 단수가 전달됩니다.

(3) fetch()함수의 처리 결과가 모두 수신될 때까지 기다리도록 await 키워드를 붙였으며, RESTful API(서버)를 호출하기 위해 매핑 주소를 "/gugudan"으로 하였습니다.

(4) method 유형은 대표적으로 PUT, DELETE, POST, GET과 같은 방법을 사용할 수 있으나 입력, 수정 등등의 작업이 아니기에 POST방식으로 요청하였습니다.

(5) 컨텐트 타입을 "application/json"으로 지정하게 되면 송수신되는 모든 데이터는 JSON 구조를 사용하게 됩니다. 특히나 JSON 타입의 문자열로 서버에 요청 정보를 전달하면 서버, 즉 RESTful API는 이를 자바의 MAP구조로 변환하여 처리해 줍니다.

(6) 서버로 전달되는 값을 JSON의 문자열로 바꾸어 줍니다. JSON Object를 그대로 전송할수는 없습니다.

(7) 수신 정보가 모두 도착할때까지 기다리도록 await 키워드를 붙여 주었으며 수신된 자료를 JSON Object로 바꾸어 줍니다.

(8) 자바에서 처리된 결과물은 줄바꿈 기호가 "\n" 들어오기 때문에 이를 HTML의 "<br/>" 태그로 바꾸어 웹상에서 정상적으로 줄 바꿈이 일어나도록 조치하였습니다.

(9) 이렇게 처리된 결과를 id="result"인 태그에 출력합니다. data.result에서 result값은 서버에서 Map 구조의 키값이 "result"이기 때문에 사용할 수 있습니다.

 

컨트롤러(RESTful API)

컨트롤러는 단순히 하나의 매핑 정보("/gugudan")만을 처리하는 것으로 되어 있습니다.

 

package kr.jobtc.gugudan;
 
import java.util.HashMap;
import java.util.Map;
 
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
 
@RestController //(1)
public class GugudanController {
    @PostMapping("/gugudan") //(2)
    public Map<String, String> gugudan(@RequestBody Map<String, Integer> map){ //(3)
        Map<String, String> result = new HashMap<>();
        int dan = map.get("dan");
        Gugudan g = new Gugudan(); //(4)
        String temp = g.process(dan); //(5)
        result.put("result", temp); //(6)
        return result;
    }
    
}

 

(1) @RestController 어노테이션을 붙여줌으로 RESTful API를 사용하게 됩니다.

(2) 자바스크립트에서 fetch("/gugudan")과 같이 요청하였기에 작성되었습니다.

(3) 자바스크립트의 fetch()함수 내부를 살펴보면 body: JSON.stringify(param)의 정보가 자바의 Map구조로 전달됩니다. 이는 @RequestBody라는 어노테이션 기능 때문이라 볼 수 있습니다.

(4) 실제 구구단을 생성하는 클래스를 생성합니다. 

(5) 매개변수 map으로 전달 받은 단수를 인자값으로 g.process(dan)를 호출하여 구구단을 처리하고 처리된 구구단을 문자열로 리턴 받습니다.

(6) Map의 키를 "result"으로하여 문자열로 되어 있는 구구단을 클라이언트에게 전달합니다.

 

구구단 클래스

만약 구구단 클래스를 스프링 부트의 싱글톤으로 관리하면서 사용하려면 클래스명 위에 @Component를 붙여 주고 컨트롤에서 @Autowired어노테이션으로 자동 연결하여 사용할 수도 있지만 본 지면에서는 사용하지 않았습니다.

 

package kr.jobtc.gugudan;
 
public class Gugudan {
 
    public String process(int dan){
        String result = ""; //StringBuffer, StringBuilder //(1)
        int i=0;
        int r=0; //dan*i
 
        for(i=1; i<=9 ; i++){ //(2)
            r=dan*i;
            result += String.format("%s * %s = %s\n", dan, i, r);
        }
        return result;
    }
}

 

(1) 구구단 처리 성능을 조금이라도 높이려면 단순히 String 클래스를 사용하기 보다는 StringBuilder나 StringBuffer와 같은 클래스를 사용하는 것을 추천합니다.

(2) 구구단을 만드는 루프입니다.

 

이번 여행지의 최종 목적은 RESTful API를 호출하는것에 있기 때문에 송수신되는 자료는 최소화하여 처리하였습니다. 여러분들에게 이 작은 여행지가 많은 영감을 줄 수 있었으면 좋겠습니다.

 

저는 다음 여행지에서 다시 찾아 뵙겠습니다. 감사합니다.

 

관련 영상 : https://youtu.be/B_Xz2nGdecA

전체 코드 : https://github.com/hiparkwg/restfulAPI_gugudan.git

'BOOKS > Spring Boot' 카테고리의 다른 글

RESTful API와 chart.js를 사용한 데이터 시각  (1) 2025.03.24
spring에서 사용하는 주요 Annotation  (0) 2022.07.14
Spring Boot에서 WebSocket 만들기  (4) 2022.01.02
이클립스를 사용한spring boot mybatis 설정  (0) 2021.12.24
Spring Boot에서 MVC 초간단 설정  (0) 2021.12.24
'BOOKS/Spring Boot' Related Articles more