7월 5일 수요일 TIL 회고록

게시글 작성 부분 만들기

---

먼저 어제 미완성으로 만들어두었던 게시글 작성 부분을 게시글 작성 api가 동작하게끔 만들었다. (부트스트랩 5, 구글링)

엄청 심플하다.. 더 이쁘게 꾸미고 싶었지만 이거 만드는데도 상당히 오래걸렸다 ㅋㅋ ㅠㅠ

 

카테고리 버튼 부분과 제목, 내용, 카테고리버튼에 각각 id를 부여했다.

<!-- 카테고리 부분 -->
<ul class="dropdown-menu" id="boardSort">

<!-- 이미지 부분 -->
 <input type= "file" multiple= "multiple" name="imageFile" id="imageFiles" class = "files">
 
<!-- 제목 부분 -->
 <input name="title" type="text" id="title" placeholder="제목을 입력해주세요.">
 
<!-- 내용 부분 -->
<textarea name="content" id="content" placeholder="내용을 입력해주세요."></textarea>

 

 

게시글 작성 api를 포스트맨 코드스니펫을 사용해 vs code에 복붙했다.

var form = new FormData();
form.append("request", "{\"title\" : \"제목\",\"content\" : \"내용\",\"BoardSort\" : \"BASIC\"}");
form.append("images", fileInput.files[0], "file");

var settings = {
  "url": "http://localhost:8080/api/basic-boards",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Authorization":
  },
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

 

먼저 var form = new FormData() 부분을 수정했다. form.append는  'Key', 'Value' 형태로 append 시켜주는 기능이다.

이미지 같은 경우에는 그냥 넣어도 되지만 request (JSON) 같은 경우는 서버에서 값을 읽어야 하기 때문에 JSON으로 형 변환을 시켜주어야 한다.

 

먼저 변수 request를 만들고 넘길 데이터를 val()를 사용해서 담아준다.

var request = {
   "title" : $('#title').val(),
   "content" : $('#content').val()
};

 

그 다음 'request'라는 이름으로 위에서 담은 request를 Blob를 사용해 FormData에 append 시킨다. 

Blob(Binary Large Objects) : 단순 텍스트가 아닌 이미지, 사운드, 동영상 등 대용량 바이너리 데이터를 담을 수 있다.

JSON.Stringify()를 사용하고 type은 json을 사용한다.

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

 

이미지 업로드는 구글링을 하였다.

 // input class 값
        var fileInput = $('.files');
        // fileInput 개수를 구한다.
        for(var i =  0; i < fileInput.length; i++) {
            if(fileInput[i].files.length > 0) {
                for(var j = 0 ; j < fileInput[i].length; j++) {
                    console.log("fileInput[i].files[j] :::" + fileInput[i].files[j]);

                    // formData에 'images'이라는 키값으로 fileInput 값을 append 시킨다.
                    form.append("images",$('.files')[i].files[j]);
                }
            }
        }

 

실행 결과

게시글은 잘 작성된다. Board_Sort는 고쳐봐야겠다..

---

오류가 나왔지만 해결한 부분, 해결 못한 부분

---

오류가 나왔지만 해결한 부분

 

1. 415 에러

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

사실 위에 이 부분을 해결하려고 엄청 고생했다.. ㅠㅠ 저번 Postman처럼 이런 에러가 나와서 (415에러) 상당히 멘붕왔었다 ㅋㅋㅋ

DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'application/octet-stream' is not supported]

 

오류가 나왔지만 해결 못한 부분

 

1. 이미지 업로드 실패

 

구글링을 해서 해보려고 했지만 반응도 없고 이미지도 들어가지 않는다. 뭐가 문제인지 모르겠다. 

https://purecho.tistory.com/68

[JavaScript] 첨부파일 다중파일 multiple 업로드

이 블로그를 참고하여 내일 다시 구현해봐야겠다 ㅠㅠ..

 

2. 카테고리 값을 어떻게 받는지 모르겠다.. (enum 타입)

여기서 카테고리 값을 어떻게 받아와야할지 모르겠다. $('#카테고리).val()로 받아오려고 하면 이런 오류가 나온다.

.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot coerce empty String ("") to `com.luda.rhythmjoygo.board.entity.BoardSort` value (but could if coercion was enabled using `CoercionConfig`)]

구글링 해봐도 정보가 딱히 없어서.. 일단 보류해놨다.. ㅠㅠ

---

백엔드 api는 다 잘 작동되고 프론트에 붙이기만 하면 되는거라 되게 쉽고 금방 끝날줄 알았다.

하지만 엄청 큰 오산이었다.. 붙이기도 쉽지 않고 오류가 나오면 오류 찾느라 하루가 금방 지나간다.

아직 해야 할 것들이 산더미인데 참 어렵다 ㅋㅋㅋㅋ...