내가 썻던 글: 제가 영상(42강)대로 fileUproadRequest, postBoardRequest API를 모두 작성해 주고 postman으로 게시글 제목, 게시글 내용, 이미지 파일을 post요청으로 했을때는 DB의 Board테이블과 Image테이블에 모두 post한 내용이 정상적으로 데이터가 쌓였습니다. 하지만 이상하게도 front화면에서 똑같이 내용을 입력하고 이미지 파일을 첨부하여 업로드 버튼을 클릭하니 이상하게도 게시글 제목, 내용은 정상적으로 board테이블에 데이터가 들어왔지만 image는 들어오지 않더라구요. 그리고 개발자 도구를 보니 401(Unauthorized)라는 오류가 뜬 것을 확인할 수 있었습니다. 그래서 구글링하다가 어찌어찌 axios의 post부분에 accessToken까지 추가해 주어서 이미지파일을 업로드시키는데 성공하였지만 그렇게 변형시킨 코드는 강사님이 작성하신 코드와는 전혀 달랐습니다.
내가 작성했던 코드와 강사가 작성했던 코드 비교:
그래서 문제가 뭐일까 생각해 보다가 백단의 WebSecurityConfig부분을 보게 되었습니다. 이게 9강에서 다루어 지는 내용인데 제가 여기서 문제의 원인을 발견할 수 있었습니다. 저는 영상과는 다르게 /file/**가 아닌 file/**를 antMatcheres의 인자로 건네주고 있더라구요.. 결국 문제의 원인은 제 실수였었던 것입니다.
================================================================================
이에 덧붙여 위와 같이 WebSecurityConfig가 제대로 설정되어야만 아래와 같은 DB에 쌓인 이미지의 URL을 복붙하여 주소창에 붙여넣기 해도 별다른 인증을 요구하는 화면이 뜨지 않고 이미지가 잘 보여 지게 된다.
================================================================================
위의 문제를 해결하기 위해서 나는 FormData에 내용이 잘 들어 갔는지를 console.log(data) 로 확인하려고 하였다 하지만 구글에서 다음과 같은 내용을 확인할 수 있었다. 아래글을 보면 어떻게 FormData의 내용을 확인하는지 알수 있다. 데이터를 보려고 tsconfig.json까지 건드렸고 만약 이것 때문에 나중에 어떤 문제가 생길수 있지 않을까도 걱정되기는 한다.
FormData는 XMLHttpRequest 전송을 위한 특수한 객체 형태이다. 문자화할 수 없기 때문에 console.log()로 찍어 확인할 수 없다.
