TIL220713

김선미·2022년 7월 13일

오늘 한 것

프로젝트 구현

POST 500 Error

에러 : 어제는 파라미터로 id가 들어오지 않아서 post 500 에러가 났었는데 팀장님이 타임리프로 그 문제를 해결한 후에도 post 500 에러가 났다. 프론트 콘솔 창에는 별다른 내용이 없어 서버 에러로 보여서 intellij 를 확인했더니 서버의 문제가 맞았다. ‘들어온 값이 없다’ 라는 단순한 내용의 에러 메세지가 발생하였다.

해결 : controller 코드를 검색해서 그대로 붙여넣어 쓰다보니 코드에 여러가지 문제가 있는 것 같았다.
1. controller에 들어오는 데이터의 타입을 지정해주는 consume 코드에서 파일을 들어오지 못하게 막는 것 같아 'json type' 을 지우고 'multipartfile'만 남겼다.
2. Postmapping 메소드 위에 @ResponseBody를 추가해주었다. RestController가 아닌 Controller로 구현했기 때문에 @ResponseBody 어노테이션을 추가해야 데이터를 JSON으로 인식할 수 있었다. 이 어노테이션이 없다면 Java 객체를 JSON으로 변환할수 없다는 것을 배웠다. 중요한 부분이지만 이렇게 해도 문제가 해결이 되지 않았다.

컨트롤러 설정 문제들을 수정했는데도 data가 제대로 들어오지 않았는데 문제는 formdata와 controller의 변수명이 일치하지 않아서였다. 변수가 일치하지 않아서 아예 값을 전달할 수 없어서 발생한 에러메세지였다.

formdata와 Dto 변수이름을 일치하게 작성해주었다.

user.js

 let form_data = new FormData()
    form_data.append("file", file)
    form_data.append("nickname", name)
    form_data.append("statusMessage", about)
    console.log(file, name, about, form_data)
    $.ajax({
        type: "POST",
        url: `/user/update_profile/${id}`,
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            if (response["msg"] == "변경 완료!!") {
                alert(response["msg"])
                $("#modal-edit").removeClass("is-active")
                window.location.replace("/user/" + name)
            } else {
                alert(response["msg"])
                $("#modal-edit").removeClass("is-active")
            }
        }
    });

UserRequestDto

@Getter
@Setter
@NoArgsConstructor
public class UpdateUserRequestDto {
    private String nickname;
    private MultipartFile file;
    private String statusMessage;
}

며칠동안 multipartfile을 formdata로 전송하는 방법을 공부하면서 변수명이 일치해야 한다는 건 명심하고 있었는데 모르는 부분이 많아 알고있는 부분까지 놓친 것 같아 아쉬웠다. API 통신을 할 때 변수명을 일치하게 구현하는 것의 중요성을 다시 깨달을수 있었다.

No content length specified for stream data

에러 : intellij 화면에 No content length specified for stream data. 라는 오류가 계속 났는데 검색해보니 aws 에러였다.

해결 : 다음과 같은 코드들을 추가해주었다.

참고 포스팅

public String upload(MultipartFile multipartFile, String fileName) {
ObjectMetadata objectMetaData = new ObjectMetadata();
objectMetaData.setContentLength(multipartFile.getSize());
objectMetaData.setContentType(multipartFile.getContentType());

try (InputStream inputStream = multipartFile.getInputStream()){
return putS3(inputStream, objectMetaData, fileName);
} catch (IOException e) {
e.printStackTrace();
}
return "fail";
}

private String putS3(InputStream inputStream, 
ObjectMetadata objectMetaData, String fileName) {
amazonS3Client.putObject(new PutObjectRequest(bucket, fileName, inputStream, 
objectMetaData)
.withCannedAcl(CannedAccessControlList.Private));
return amazonS3Client.getUrl(bucket, fileName).toString();
}

완료된 것