[IBSheet] 시트 내 이미지 삽입 / 반환타입과 파라미터요청, JSON요청(1)

 

 

 

 

오늘은 시트 내 이미지를 삽입하겠다.

 

매뉴얼에 image 넣는 게 딱히. 이렇다할 만한 내용이.  찾기 어렵다.

그래서 샘플을 통해 찾아보았는데

어떤 건 Type : Image 이고, 어떤 건 Type : Img 이다.

뭐가 다른지 모르겠는데 .......

 

여튼 방법이 두 가지가 있다.

 

1.

doRequest 나 Fetch 를 써서 모든 데이터를 다 출력하고

(아래 예시 코드는 axios.post 인데, 어차피 doRequest가 axios 호출이니까 똑같음..

doRequest("post",'url").then~ 하면 됨)

 

그때 image 행에는

변수 양 옆에 <img  와   >  를 넣는다.

DB에서 https://~ 링크를 전달받아 이미지태그로 감싼 형태를 집어넣어주면 된다.

 

그리고 Type : Html    로 준다.

 

시트 내 Event : { } 내부에 들어갈 onRenderFirstFinish 이벤트 내용

onRenderFirstFinish: function (evtParam) {
    const sheet = evtParam.sheet;

    axios.post("../winner/winner.do", {}, {
        headers: { "Content-Type": "application/json" }
    })
    .then(function (response) {
        const data = response.data;

        // 이미지 URL을 <img> 태그로 감싸기
        data.forEach(row => {
            if (row.img && typeof row.img === "string") {
                row.img = `<img src="${row.img}" style="height:30px;" />`;
            }
        });

        // IBSheet에 데이터 로딩
        sheet.loadSearchData({ data: data });
    })
    .catch(function (error) {
        console.error("데이터 요청 실패:", error);
    });
}

 

 

 

아니면 axios.post~ 코드를 짠 함수를 sheet option 지정하는 곳이 아닌 외부에 따로 빼서 정의하고

그 함수를 호출하면 Event 내부는 깔끔하게 정리된다.

 

 

 

2.

IBSheet 샘플을 잘 보다보면 

물론 매뉴얼 샘플에는 폴더 내 이미지파일 경로가 들어가있긴 하지만, 뒤로 |80|80||| 이런식의 width, height 를 직접 명시해주는 것을 볼 수 있다.

 

 

 

 

|width|height||| 없이  그냥 https://~ 주소만 쓰면

 

주소를 지 멋대로 h기준으로 잘라서 width 에 local:8080~ 이런 게 들어가고 height:에 ig 가 들어가는 등 자동으로 할당되어 에러가 난다.

 

그래서 | | ||| 사이에 width, height 가 들어가겠거니~ 하면 된다 ..

 

심지어 | 개수가 짝이 맞지도 않고 .. 뭔지 모르겠고 매뉴얼은 그렇게 나와있으니 따라하면 된다.

 

 

 

            sheet.doSearchPaging({
                url: "../winner/winner.do",
                method: "POST",
                reqHeader: {"Content-Type": "application/json"}
            })

 

 

그럼 이렇게 doSearchPaging 만 하고 더 해줄 것도 없

Type : Img 로 주면

깔끔하게 출력이 잘 된다..

 

굳이 뭐 이미지태그를 주고~ 어쩌고~ 할 필요가 없다.

 

 

 

 

아.그리고 왜그런지 모르겠는데

GPT 돌리면

headers : {"Content-Type" : "application/json"} 주라고 나오지만

 

 

 

그럼 www- 형식으로 요청한다 ? 왜 ? 모름 ;

reqHeader : ~

로 줘야 JSON 으로 요청함 ;;;;;;

나는 파라미터보다 JSON 쓰는 걸 선호하기 때문에 (이유없음 그냥 맘에 듦)

항상 이렇게 해준다. 헤헤

 

그냥 @RequestBody 로 받는 게 편하잖아용

언제 ~ 또 ~ model 쓰거나~ @RequestParam 으로~ 하나하나~ 다 씁니까~ 컨트롤러에서~ 귀찮게 ~~~~

근데 @ModelAttribute 쓰면 파라미터 여러개 가능

 

 

• 제네릭 설명으로 이동

 

 

2. JSON 보내기

 

@PostMapping("/user/register")
public ResponseEntity<?> registerUser(@RequestBody UserDTO userDTO) {
    // JSON 요청을 바로 객체로 매핑받음
    return ResponseEntity.ok("등록 완료");
}