• 언제 쓰나: 특정 “대상(리소스)”을 명확히 식별해야 할 때 (1건 조회/수정/삭제)
• 이유: URL 자체가 “무슨 대상을 다루는지”를 표현 → 로그/권한/캐시/디버깅이 명확
• 예시
  • GET /api/building/qr/setting/1 → 1번 조회
  • DELETE /api/building/qr/setting/1 → 1번 삭제
  • PATCH /api/building/qr/setting/1 → 1번 수정

2) @ModelAttribute (쿼리스트링/폼 필드 → 객체 바인딩)

• 언제 쓰나: 목록 조회에서 검색/필터/정렬/페이징 조건을 여러 개 받을 때
• 이유: 조건이 많고 optional이 많아 DTO로 묶기 편함 + URL로 재현/공유/디버깅 쉬움
• 예시
  • GET /api/building/qr/setting?buildingSeq=626&searchText=3층&page=1
• 참고: 단일 파라미터는 @RequestParam을 많이 씀

3) @RequestBody (요청 Body: JSON 등)

• 언제 쓰나: 생성/수정처럼 “저장할 데이터(payload)”를 통째로 보낼 때
• 이유: 필드가 많거나 구조가 복잡한 데이터를 URL로 보내기 어렵고, 검증(@Valid)도 쉬움
• 예시
  • POST /api/building/qr/setting
    • Body: { "buildingSeq": 626, "placeName": "3층 복도" }
  • PATCH /api/building/qr/setting/1
    • PathVariable로 대상(1번) + Body로 변경값 전달

한 줄 정리

• PathVariable = “어떤 대상인가(ID)”
• ModelAttribute = “조회 조건(필터/페이지/정렬)”
• RequestBody = “저장/변경할 내용(payload)”

기존에 있던 데이터들은 json 타입으로 넘어간다.

var data = Object.assign($("#formAdd").serializeObject(), {
    gatewayCluster: $("#gatewayCluster").val(),
    status: "ENABLED",
    methods: makeMethods(),
    apiPolicy: $("#apiPolicy").val(),
    billPolicy: $("#billPolicy").val(),
    service: $("#service").val(),
    engineApi: $("#engineApi").val(),
    customRouteUri: $("#customRouteUri").val(),
    extras: makeSpringProperties(),
    scopes: $scopes,
    keywords: $("#keywords").val()
});

formData.append("request", JSON.stringify(data));

여기에 파일 업로드를 추가해야하는데, 파일은 multipart/form-data로 넘겨야 하기 때문에, 따로 formData를 추가했다.

function completeRegistration() {
        // 1) 중복 체크 및 데이터 검증
        if (globalVars.dupCheckFlag === "N") {
            alert("오픈 API URI 중복 체크를 진행 해주세요");
            return false;
        }
        if (!dataValidation()) return false;

        // 2) JSON 데이터 구성
        var $scopes = [];
        if ($("#scopeList").find(":checked").val() !== "") {
            $scopes = $("#scopeList").find(":checked").map(function (i, d) {
                return { id: d.value };
            }).toArray();
        }

        var data = Object.assign($("#formAdd").serializeObject(), {
            gatewayCluster: $("#gatewayCluster").val(),
            status: "ENABLED",
            methods: makeMethods(),
            apiPolicy: $("#apiPolicy").val(),
            billPolicy: $("#billPolicy").val(),
            service: $("#service").val(),
            engineApi: $("#engineApi").val(),
            customRouteUri: $("#customRouteUri").val(),
            extras: makeSpringProperties(),
            scopes: $scopes,
            keywords: $("#keywords").val()
        });

        if (!confirm("편집 내용을 저장하시겠습니까?")) return;

        // 3) 파일 가져오기
        const file = document.getElementById("fileInput").files[0];
        const formData = new FormData();

        // 4) 파일 존재 시 추가
        if (file) {
            formData.append("uploadedFile", file);
        } else if (globalVars.currentFileId) {
            // 기존 파일 유지
            data.fileId = globalVars.currentFileId;
        }

          // 5) 기존 json 추가
        formData.append("request", JSON.stringify(data));

        // 6) Ajax multipart/form-data 요청
        $.ajax({
            url: "/my-url",  // 정확한 백엔드 경로 확인
            type: "POST",
            data: formData,
            processData: false,    // jQuery가 데이터를 처리하지 않도록 설정
            contentType: false,    // jQuery가 Content-Type 헤더를 설정하지 않도록 설정
            success: function (d) {
                if (d.error) {
                    alert("오류가 발생했습니다.\n" + d.message);
                    return false;
                }
                alert("성공적으로 처리되었습니다.");
                $(".m_modal").removeClass("on");
                $("body").css("overflow", "auto");
                searchPart();  // 예: 목록 갱신 함수
            },
            error: function (xhr, status, err) {
                alert("업로드 중 오류 발생: " + err);
            }
        });
    }

하지만....

2025-01-09 14:11:21.496 WARN 1 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

백엔드 Controller에서 내가 생각한 multipart/form-data로 넘어가지 않는 듯 했다.

이슈

스프링에서 이미지 업로드를 할때 Json 데이터를 Multipart로 같이 보내는 경우 Content-Type을 application/json으로 명시해줘주지 않으면 application/octet-stream not supported 예외가 발생

해결법

JSON.stringify를 통해 javascript object를 생성하고 blob 객체의 타입을 application/json으로 만들어서 formdata에 append를 한다.

아래의 코드를

formData.append("request", JSON.stringify(data));

이렇게 수정

formData.append("request", new Blob([JSON.stringify(data)], { type: "application/json" }), "request.json");

Spring Controller에도

    @PostMapping(
            value = "/my-url",
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
            produces = MediaType.APPLICATION_JSON_VALUE
    )

명시적으로 consumes와 produces를 삽입한다.

Content-Type 헤더와 Consumes 설정

Consumes

클라이언트가 서버에게 보내는 데이터 타입을 명시한다.

@RequestMapping의 consumes 설정과 Content-Type request

헤더가 일치할 경우에 URL이 호출된다.

Content-Type

HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터 형식을 알려주는 헤더이다. 즉, 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.

HTTP 요청이 GET방식인 경우

무조건 URL 끝에 쿼리스트링(key=value) 형식이기 때문에

Content-Type 헤더가 굳이 필요없으므로 Content-Type은 POST방식이나 PUT방식처럼 BODY에 데이터를 싣어 보낼 때 중요하다.

이제 매핑이 된다....!!!!

마크업(MarkUp)언어란?

마크업 언어는 "마크(Mark)"로 둘러싸인 언어로 "태크(Tag)"로 둘러싸였다고도 표현한다. HTML, XML 등의 마크업 언어들은 문서의 구조를 정의하고 쉽게 설명하면 문서의 골격에 해당하는 부분을 작성하는데 사용한다.

1. 특징

1) 데이터 저장 및 교환

• XML은 플랫폼 간 데이터 교환을 위해 사용한다.
• ex) 웹 서비스에서 서버와 클라이언트 간의 데이터를 전달

2). 유연한 구조

• 태그를 사용자가 정의할 수 있어서 특정 데이터 요구에 맞게 설계가 가능하다.
• ex) book, employee등등 이와 같은 태그들을 자유롭게 정의

3). 계층적 구조

• 부모와 자식 관계를 통해 데이터의 계층적 관계를 나타낸다.
• ex) root아래에서 여러 자식 태그가 포함

4). 쉬운 이해

• 직관적이고 텍스트 기반이라 사람이 쉽게 이해가 가능

5). 플랫폼 독립성

• 운영체제나 언어에 상관없이 데이터를 표현하고 교환 가능

2. 역할

데이터 저장

• XML파일은 데이터를 저장하고 파일로 기록하는데 사용한다.

  데이터 전송

• 네트워크를 통해 데이터를 전송하는데 사용한다.
• ex) 웹 서비스

  구성 설정 파일

• 시스템이나 어플리케이션의 설정 정보를 XML 형식으로 저장한다.
• ex) Tomcat의 server.xml, Spring의 applicationContext.xml

  문서 형식 정의

• XML 스키마 또는 DTD로 XML 문서의 구조와 데이터를 검증 할수 있다.

3. 구조

1) 선언부

• XML 문서의 첫번째 줄로, 문서의 버전과 인코딩 정보를 표시한다.

  <?xml version="1.0" encoding="UTF-8"?>

2) 루트 요소 (root)

• XML의 최상위 요소로 모든 데이터가 여기에 포함된다.

  <root>
    ...
  </root>

3) 요소 (Element)

• 데이터를 포함하는 태그, 시작과 종료 태그로 구성된다.

  <name>King-Dong-Gun</name>

4) 속성 (Attribute)

• 요소의 추가 정보를 제공한다. key = "value"의 형식으로 작성

  <book title="XML Study" author="King-Dong-Gun" />

5) 데이터 내용 (Content)

• 요소 안에 포함된 실제 데이터 값

  <name>King-Dong-Gun</name>

6) 주석

• 문서의 가독성을 높이기 위한 설명

  <!-- Hi Hello Bye GoodBye -->

4. 사용 예시

• 도서 정보를 저장하고 표현

<?xml version="1.0" encoding="UTF-8"?>
<library>
    <!-- 루트 요소: 도서관 전체 -->
    <book id="1">
        <!-- 책 제목 -->
        <title>XML Fundamentals</title>
        <!-- 책 저자 -->
        <author>John Doe</author>
        <!-- 책 가격 및 통화 단위 -->
        <price currency="USD">29.99</price>
    </book>
    <book id="2">
        <!-- 두 번째 책 정보 -->
        <title>Advanced XML</title> <!-- 책 제목 -->
        <author>Jane Smith</author> <!-- 책 저자 -->
        <price currency="EUR">35.00</price> <!-- 책 가격 및 통화 단위 -->
    </book>
</library>

• Java에서 DOM 파서로 XML을 읽고 데이터를 출력

  import javax.xml.parsers.DocumentBuilder;
  import javax.xml.parsers.DocumentBuilderFactory;
  import org.w3c.dom.*;
  

public class XMLParserExample { public static void main(String[] args) { try { // XML 파일 로드 DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder builder = factory.newDocumentBuilder(); Document doc = builder.parse("library.xml");

        // 루트 요소 가져오기
        Element root = doc.getDocumentElement();
        System.out.println("Root Element: " + root.getNodeName());

        // 모든 <book> 요소 가져오기
        NodeList bookList = doc.getElementsByTagName("book");
        for (int i = 0; i < bookList.getLength(); i++) {
            Element book = (Element) bookList.item(i);
            System.out.println("Book ID: " + book.getAttribute("id"));
            System.out.println("Title: " + book.getElementsByTagName("title").item(0).getTextContent());
            System.out.println("Author: " + book.getElementsByTagName("author").item(0).getTextContent());
            Element price = (Element) book.getElementsByTagName("price").item(0);
            System.out.println("Price: " + price.getTextContent() + " " + price.getAttribute("currency"));
            System.out.println();
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

}

- 출력결과
```yml
Root Element: library
Book ID: 1
Title: XML Fundamentals
Author: John Doe
Price: 29.99 USD

Book ID: 2
Title: Advanced XML
Author: Jane Smith
Price: 35.00 EUR

문제의 원인은 document.getElementById()의 결과는 HTMLInputElement 이라고 나오는데, value는 속성(property)이지 함수가 아니기 때문에 document.getElementById("id값") 뒤에 .value(); 와 같은 괄호 형태의 함수를 사용하여 나오는 에러이다.

그렇기 때문에 .value() 대신 .value 를 사용하면 오류가 해결된다.

보통은 다 오타이다.....

1. .value

• 속성(property)으로, HTML 요소의 값을 가져오거나 설정할 때 사용한다,
• 주로 input, textarea, select와 같은 폼 요소에서 사용한다.
• 순수 JavaScript에서 HTML 요소의 값을 읽거나 설정할 때 사용한다.

  const value = document.getElementById("inputId").value;
  document.getElementById("inputId").value = "new value";
  

2. `.value()`
- 함수(method) 호출 방식
- 주로 JavaScript 객체나 라이브러리에서 값을 가져오거나 처리하는 메서드 형태로 사용한다.
> 예를 들어, jQuery에서는 `.val()` 함수를 사용하여 요소의 값을 가져온다.

```javascript
const value = $("#inputId").val(); // jQuery 사용

결론

HTML 표준 DOM 요소에서는 .value를 사용하고, 라이브러리(jQuery 등)에서는 제공되는 .value() 또는 .val() 메서드를 사용한다.

주요 원인

1. 클래스가 JAR 파일에 포함되지 않음
   • 애플리케이션이 실행 중 필요한 클래스를 포함하는 JAR 파일이나 라이브러리가 클래스패스에 없을 때 발생
   • 예: commons-el 의존성이 추가되지 않았거나 JAR 파일에 포함되지 않은 경우.
2. 클래스가 의존성 충돌로 인해 로드되지 않음
   • 프로젝트에 동일한 이름의 클래스가 여러 의존성(JAR)에서 정의되어 충돌이 발생
3. 컴파일 타임과 런타임 클래스 패스 불일치
   • 개발 환경에서는 잘 동작하지만, 빌드 후 배포 시 런타임 환경에서 클래스패스 설정이 누락되거나 잘못된 경우 발생
4. 클래스가 동적으로 로드될 때 (Reflection)
   • Class.forName() 또는 ClassLoader를 사용해 동적으로 클래스를 로드하려는 경우 해당 클래스가 클래스패스에 없다면 발생
5. JAR 파일 손상
   • 클래스가 포함된 JAR 파일이 손상되었거나 잘못된 방식으로 패키징된 경우 발생

• ClassNotFoundException:
  • Class.forName() 또는 ClassLoader 같은 동적 로딩 메서드에서 클래스가 없을 때 발생.
  • 주로 개발자가 직접 처리 가능한 경우.
• NoClassDefFoundError:
  • 런타임 시 JVM이 클래스 파일을 로드하려 했으나 실패.
  • 컴파일 시 문제가 없었더라도 런타임 환경에서만 발생.

NoClassDefFoundError 가 발생하면 의존하는 라이브러리의 버전이 서로 맞지 않아 발생하는 경우가 대부분이므로 build.gradle 파일을 확인해보자.

.war파일을 .jar파일로 변경하는 것은 간단하다.

1. build.gradle

plugins {    

id 'org.springframework.boot' version '2.7.18'    

id 'io.spring.dependency-management' version '1.0.11.RELEASE'  

id 'java'

// jar로 빌드하므로 war값은 주석처리

// id 'war'*

}`

// 그리고 jar 빌드시 추가 설정이 들어간다

compileOnly 'org.springframework.boot:spring-boot-starter-tomcat'

runtimeOnly 'org.springframework.boot:spring-boot-starter-tomcat'

// =====================================================================

// WAR 플러그인은 2개의 의존 구성을 더한다.
// 1. providedCompile
// 2. providedRuntime
// 이 구성들은 컴파일이나 런타임 시에는 필요하지만 WAR 파일로 배포될 때는 제외된다.
// WAR 파일로 빌드될 때 Spring Boot의 내장 톰캣은 제외되도록 하기 위해 `implementation`이 아닌 `providedRuntime`으로 톰캣 라이브러리가 선언되어 있을 것이다. 이를 제거한다.

// jar 빌드시 필요없는 설정    

//providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
//providedCompile 'org.springframework.boot:spring-boot-starter-tomcat'

1. SpringBootServletInitializer 상속 제거

@SpringBootApplication
public class MyApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(MyApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

• SpringBootServletInitializer은?

SpringBootServletInitializer는 War 파일을 생성하기 위해서 상속받는 클래스 이므로 Jar 로 배포할 것이면 상속 받지 않아도 된다.

1. build 하기

• 인텔리제이의 오른쪽 상단 메뉴바의 gradle 버튼을 클릭

• claen 으로 build > lib 삭제 후 build

1. putty를 이용하여 yml 재설정

spring:
  web:
     resources:
     // Spring Boot가 정적 리소스를 제공할 디렉터리를 지정
          static-locations: classpath:/static/   
  thymeleaf:
         // Thymeleaf 템플릿 파일이 위치한 디렉터리를 설정
          prefix: classpath:/templates/
          suffix: .html
          mode: HTML
          encoding: UTF-8
          enabled: true
          cache: false
          check-template-location: true
          servlet:
                content-type: text/html
  jackson:
        // 기본 시간대 설정
          time-zone: Asia/Seoul
  mvc:
          // Spring MVC에서 URL 매칭 전략을 설정
    pathmatch:
        matching-strategy: ant_path_matcher
      // 정적 리소스의 매핑 패턴을 설정
    static-path-pattern: "/**"


apptomo:
         // 비밀번호 강도 설정
  security:
          password:
                  lifetime: 90
                  warn-lifetime-expire-before: 7
                  strength: 10

1. .jar 파일 실행!!

.jar 파일이 있는 디렉토리에 접근해 .jar 파일 실행

java --add-opens java.base/java.lang=ALL-UNNAMED    
     --add-opens java.base/java.lang.reflect=ALL-UNNAMED   
     -Dspring.config.location=/sw/apptomo/tomcat/yml/application-dev-postgresql.yml  
     -Dspring.profiles.active=dev-postgresql   
     -jar apptomo-portal-4.jar

이렇게 실행이된다!!!!!!

1. 시큐리티 브레이크 포인트….

서버 연결은 완료 되었지만, js, css등등 파일들을 못읽는 상황이 발생했다.

이 문제는 Spring Security 설정에서 따로 정적 리소스들을 허용해주지 않았기 때문에 매핑하지 못한다.

1. Spring Securty에서 정적 리소스 허용

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(
        "/res/**",             // 정적 리소스 허용
        "/resources/**",
        "/favicon.ico",
        "/robots.txt",
        "/prf");
    super.configure(web);
}

1. HTTP 보안 설정

// authorizeRequests에서 /res/**를 permitAll()로 추가해야 정적 리소스에 대한 접근을 보장
@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers(
                "/res/**"
            "/",
            "/open/**",
            "/session",
            // 추가 경로들
        ).permitAll()
        .anyRequest().authenticated();
}

1. 커스텀 ResourceHandler 추가

    // Spring Boot가 정적 리소스 매핑을 처리하지 못하는 경우 명시적으로 ResourceHandler를 추가
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**")
                .addResourceLocations("classpath:/static/res/")
                .setCachePeriod(cachePeriod);
        registry.addResourceHandler("/favicon.ico")
                .addResourceLocations("classpath:/static/favicon.ico")
                .setCachePeriod(cachePeriod);
    }