개요
서비스 매니저(?)를 맡고 계신 선생님이 받은 테스트 중인 학생의 카톡....
처음에는 문제의 원인이 감이 잡히지 않아서 해결하는데 문제가 있었음.
개발자 도구에서 상태 코드나 에러 메시지를 볼 수 있으면 좋겠지만 개발자 도구 사용을 해보지 않은 학생이었고, 로그에도 잘 나타나지 않아서 직접 테스트 해봐야 하는 상황.
테스트
-
파일 확장자에 문제가 있었나 싶어서 테스트 시작.
문제 없음. 아래 코드의 모든 파일에서 제대로 작동함.
const FILE_EXISTENSION = /jpg|jpeg|png|svg|webp|pdf|doc|docx/; -
파일 크기의 문제인가 싶어 조금 더 큰 이미지를 삽입하려고 시도.
사진이 업로드 되지 않음. 따라서 최대 파일 크기를 제한한 부분을 수정하려는데...
const MAXSIZE = 1e7;파일 크기가 10Mb가 넘는다고?
다시 생각해보니 파일 크기 초과라면 업로드 할 때 alert 창을 봤을 것임.
상태 코드를 보자
상태 코드를 확인하지 않고 조금 좌절해 있었는데, 사진 업로드 요청의 응답 상태 코드를 보니 413으로, 한 번도 본 적이 없어 구글링.
백엔드 코드 끄적인다고 될 문제가 아니었음
해결
http {
client_max_body_size 10M;
...
}nginx 설정에서 위와 같은 설정값 추가 후 해결. 기본값은 1M이었으며, 제한을 두지 않으려면 0으로 입력하면 되지만 혹시 모를 악성(?)요청을 막고자 백엔드 코드와 일치하게 수정함.
반전
가능한 파일 형식들은 사용자가 볼 수 있게 view에 명시하자... 고쳤다고 해놓고 안 된다고 욕먹을뻔....
Full 'Snack' Developer