[TIL] 2021.11.09 최종 프로젝트 진행중

내가 만든 API를 프론트와 통신하는 과정을 겪었다

분명히 postman으로 테스트할 때는 문제 없이 response가 잘 왔는데

프론트에서 request하면 400에러나 500에러가 났었다

위의 형식으로 request를 해야했다

프론트의 코드를 수정하면서 계속 원인을 찾아보았다

우리가 알아낸 결과다

 

1. postman에서도 봤다 싶이 form-data로 request해야 한다

    - title, content, image 모두 React의 formData 객체에 담겨 있어야 하고,

      key: value 형식으로 담겨 있어야 한다

    const recipeFormData = new FormData();
    recipeFormData.append("title", title);
    recipeFormData.append("content", content);
    recipeFormData.append("price", price);
    recipeFormData.append("tag", tagList);
    for (const f of fileList) {
      recipeFormData.append("image", f);

 

2. image가 여러장일 경우 image: [이미지, 이미지, ...] 형태로 request하는게 아니다

    - 정말 그대로! postman에서 요청한 그대로 데이터를 만들어주면 되는거였다

    - image: [이미지, 이미지, ...] 가 아닌

      image: 이미지,

      image: 이미지, ...

      이런 형태로 request 해야하는 거였다

      postman에도 그렇게 되어있다

    //fileList = [파일객체, 파일객체, ...]
    for (const f of fileList) {
      recipeFormData.append("image", f);

 

위의 내용을 깨닫게 된 후로 response가 정상적으로 왔다

 

---

드디어 테스트코드를 짜기 시작했다

처음에 어떤 흐름으로 테스트코드를 짜야햐는지 감이 안 잡혔다

팀원분이 고민해본 결과 아래의 흐름으로 테스트코드를 짜면 될 것 같다고 하셨다

1. dto 유닛테스트
2. 엔티티 유닛테스트
3. 서비스에 있는 메소드 테스트
4. 컨트롤러-서비스-리포지토리 통합테스트

내가 아직 테스트코드를 깊게 공부한 것이 아니라서 그런지

엔티티 유닛테스트와 dto 유닛테스트의 차이점을 잘 모르겠다

고민하지 말고 일단 시작하자

언제까지 안 하고 질질 끌거냐..!(논건 아니지만..ㅠ)

 

---

테스트코드를 짜면서

"게시물 작성하는 API를 어떻게 테스트하지? 사진을 어떻게 입력받았다고 가정해..?"

라는 생각이 들었다

그래도 검색을 해보니까 방법은 있긴 했다

https://gaemi606.tistory.com/entry/JUnit5-multipartformdata-%EC%A0%84%EC%86%A1-%ED%85%8C%EC%8A%A4%ED%8A%B8-MockMultipartFile

JUnit5 | multipart/formdata 전송 테스트 ( MockMultipartFile, @RequsetPart )

이 부분을 참고했다

나는 이렇게 짰다

//S3에 upload하는 과정은 생략. 단지 이미지 파일을 입력했다고 가정할 뿐
MockMultipartFile file1 = new MockMultipartFile(
    "image", "choonsik1.png",
    "multipart/form-data",
    new FileInputStream("src/main/resources/static/testImage/choonsik1.png")
);

주황색인 이유는 gitignore에 걸려있기 때문

사진 자체를 입력했다고 해야하기 때문에 사진을 불러오기 위해서 프로젝트에 사진을 넣어놨다

아직 이미지파일을 S3에 올려 이미지URL를 얻어내는 코드를 테스트하는 과정이 아니기 때문에

잘 입력한건지는 확실하진 않다

테스트코드를 돌려봤을 땐 에러가 나지 않았다

실패도 아닌 성공이 떴다

 

---

 

S3 파일 업로드가 잘 되는지 테스트하는 코드도 짜야할 것 같다

multipartfile을 테스트하는 방법을 검색하다가 우연히 찾았다

https://blog.junu.dev/27

Spring boot S3 Local에서 Test하기

이거 보고 짜면 될것 같다