80일차

Git

경중님 팀 프로젝트 github를 보고 뱃지와 아이콘은 어떻게 한건지 여쭤봤더니

본인 TIL 주소를 보내주셨다.

>> 9월 16일: Git

 

그 덕분에 나도 Developer Program Member 뱃지도 받고 학생이라서 pro도 신청했다.

그리고 내 프로필도 한 번 만들어 봤다.

GitHub Stats랑 Most Used Languages를 띄워봤는데 나중에는

경중님처럼 프로젝트 수준으로 무언가를 해서 repository에 올려야겠다.

거기에 비하면 나는 그냥 잔디심기에만 열심히 했던 것 같다.🥲

 

 

stats를 작성할 때 참고하면 좋을 사이트이다. 한국어로 번역 되어있어서 👍🏻 Github 

블로그 글 참고하기 >> Github 프로필 꾸미기

색상 그라데이션 참고 사이트 >> css

 

---

오류 같이 해결해보기

 

 

팀원분이 Feed와 연결이 안되는 이유를 잘 모르겠다고 하셨다.

그래서 내가 타임어택을 참고해서 진행한 프로젝트 코드를 참고했다.

 

 

알고보니 Feed.java에 적힌 위 코드를 service와 연결하는 코드를 작성하지 않아 생긴 오류인 것 같았다.

 

 

* 위 코드에서 setFeed가 색이 없는 이유는 Controller와 연결해주지 않았기 때문이다.

 

연결과정을 해결해주면서 느꼈지만 아직 나도 연결되어있는 코드의 흐름을 잘 모르겠다

 

---

사진 업로드

 

사진 업로드 및 이미지 미리보기 참고 사이트

>> JSP/HTML/Javascript - 사진 미리보기, 사진 썸네일 구현, https://jamesyleather.tistory.com/403

 

 

---

오류 해결하기

 

이전에 python으로 사진 업로드 했던 것이 기억나서 그 코드를 참고하여(html 부분만) 이미지를 저장하려고 했다.

>> 심화 2주차 나홀로 일기장 참고

 

 

 

실행을 해보니 에러 415에러가 떴는데 검색해보니

@RequestBody가 있으면 json 형태로 넘겨줘야 정상동작한다고 해서 

data와 contentType에 json 형태로 수정했다.

 

참고한 사이트 >> https://kimtaekju-study.tistory.com/280

 

 

 

다시 실행해보니 에러 500이 떴다.

 

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.dao.DataIntegrityViolationException: not-null property references a null or transient value : ~~

라는 에러메세지 인데

내 생각에 file db 지정은 null은 올 수 없게 지정했는데 null값으로 나와서 에러가 나온 것 같아

심화 2주차 나홀로 일기장을 다시 참고 했더니

$('#file')[0].files[0] 작성이유를 브라우저 콘솔창을 통해 test 해본 것을 보고 나도 똑같이 test 했더니 

파일을 갖고 올 id 값을 내가 지정한 id 값에서는 undefined가 뜨고 다른 id값에서 이미지가 표시되었다.

$("#product_image") 👉🏻 $("#image_container")

 

 

 

id값을 변경하고 파일의 형태가 나오는 코드를 실행했더니 

 

위 코드가 올바른 실행 방법이었다.

 

 

 

 

img src = 에서 url 주소만 가져오려고 attr("src")를 입력했더니 에러가 떴다. 🥲

 

 

 

 

 

 

도저히 에러를 해결할 방법을 몰라서 튜터님께 질문했다.

 

 

 

 

먼저 id를 img 태그에 넣는다.

img.setAttribute("id", "imageUpload");

이미지 url이 길게 나왔다.

 

 

 

 

이미지 업로드 기능은 보통 <input type=file>를 사용하신다고 했는데

내 코드는 이미 <input type=file>으로 구현되어있었다.

 

<!-- 이미지 업로드 -->
<div class="form-group">
    <input class="form-control form-control-user" type="file"
           name="product_image" id="product_image" onchange="setThumbnail(event);">
</div>
<!-- <div><img src="images/img_section/coco.jpg" alt=""></div> -->
<div id ="image_container"></div>

 

 

 

 

이미지 업로드 코드에 있는 파일 input 태그를 읽어서 서버로 바로 전송하는 코드로 수정한다.

$("#image_container")가 아닌 아래 코드로 수정했다.

$("#product_image")[0].files[0]

 

 

 

 

또, javascript에서 form 데이터로 서버에 보내기 때문에 @RequestBody를 사용하면 안된다.

    @PostMapping("/api/upload")
    //public Upload setUpload(@RequestBody UploadDto uploadDto)
    public Upload setUpload(UploadDto uploadDto, @RequestPart(value = "file", required = false) MultipartFile image){
        return uploadService.setUpload(uploadDto);
    }

 

 

 

 

참고로 json으로 통신하는 방식이 아래 코드라고 보면 된다. 

@RequestBody를 사용해서 json으로 사용하는 거라고 구글링에서 본적이 있어서

@RequestBody를 지우면 json으로 보내는 방식 코드도 없애야 하냐고 질문드렸더니 지우지 말라고 하셨다.

        let form_data = new FormData()
        form_data.append("content", $("#writerArticle").val())
        form_data.append("file", $("#product_image")[0].files[0])

 

 

 

 

UploadDto에서는 file을 삭제한다.

@Setter
@Getter
public class UploadDto {
    private String content;
//    private String file;
}

 

 

 

 

 upload.java에서는 file을 삭제하지 않는다.

@AllArgsConstructor
@NoArgsConstructor
@Setter
@Getter
@Entity
public class Upload extends Timestamped {
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Id
    private Long idx;

    @Column(nullable = false)
    private String content;

    @Column(nullable = false)
    private String file;

    public Upload(UploadDto uploadDto) {
        this.content = uploadDto.getContent();
        //this.file = uploadDto.getFile();
    }
}

 

 

 

 

 

이렇게 해도 서버 에러 500이 떴다.

프론트에서 넘어오는 content값을 받지 못해서 그런것 같다고 하셔서 ajax 호출에 대해 다시 여쭤봤다.

 

$.ajax({
    type: "POST",
    url: `/api/upload`,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(form_data),
    cache: false,
    processData: false,
    success: function (response) {
        alert("글 저장 성공!!");
    }
});

 

위 코드에서 아래 코드로 수정했다.

 

$.ajax({
    type: "POST",
    url: `/api/upload`,
    contentType: 'application/json; charset=utf-8',
    data:form_data,
    cache: false,
    processData: false,
    success: function (response) {
        alert("글 저장 성공!!");
    }
});

 

 

이렇게 해도 여전히 서버 에러 500번이 뜬다.

내일 아침에 튜터님과 다시 해결을 해야겠다..!!

 

 

깃허브 >> 튜터님 1차 피드백(오류해결 아직못함) [#28]