🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

이미지 리사이징 403 forbidden

21.08.24 20:41 작성 조회수 603

0

안녕하세요 제로초 선생님..! 보너스 강좌를 제외한 모든 강좌를 듣고 S3 이미지 리사이징을 적용했는데 위와 같이 계속해서 오류가 발생합니다. 403 Forbidden 이면 권한 상에 문제가 있다는 것 같은데, cors와 유사한 문제이려나요. 여러가지 시도해봤지만 계속해서 오류가 발생해 질문드립니다!

답변 2

·

답변을 작성해보세요.

0

혹시 이미지 리사이징 안되시는 분들은 파일 이름이 '한글'이라서 인코딩 문제로 되지 않으실 확률이 높습니다! encodeURIComponent로 파일 이름을 감싸주면 정상적으로 인코딩되는데, 한글을 인코딩하면 초기에 설정했던 image 테이블의 src 컬럼 200글자를 넘어가는 경우가 많아 drop table 해주시고 3~400자 정도로 컬럼 설정 변경해주시면 모든 사진이 잘 업로드될 겁니다...!! 

0

s3 버킷을 퍼블릭으로 열지 않으셔서 그렇습니다. 버킷 정책에서 제가 말했던 json 복사붙여넣기 하셔야 합니다.

음 영상 보면서 제대로 설정해줬는데 뭐가 잘못됐을까요

구체적으로는 아래와 같이 나옵니다

음 위의 문제는 해결했는데 이상한게 '영어' 제목으로 된 이미지 파일을 업로드하면 thumb 폴더로 가면서 제대로 리사이징이 되는데 '한글'이나 '_' 등의 기호가 섞여있는 파일을 업로드하면 아래와 같은 에러가 발생합니다. 무엇이 문제일까요

{ "errorType": "NoSuchKey", "errorMessage": "The specified key does not exist.", "code": "NoSuchKey", "message": "The specified key does not exist.", "region": null,

...

encodeURIComponent로 파일명을 감싸서 저장하면 될거같네요 내일 일찍 일어나서 시도해보겠습니다 ㅎㅎ 추가로 ant-design 커스터마이징하는 법을 오늘 계속 찾아봤는데 next.config.js의 불변성 문제 때문인지 어떻게해도 적용이 되지가 않아서... 혹시나 방법 쉽게 알려주시면 열심히 해보겠습니다 :) 항상 감사합니다! 제로초 선생님 좋은밤 되시길 바랍니다!

네 한글의 경우 브라우저는 자동으로 encodeURI 해주지만, 노드의 경우 그렇지 않기 때문에 저장할때부터 한글은 encodeURIComponent로 감싸서 저장해주셔야 합니다. 그리고 대소문자가 달라도 문제가 생기므로 전부 소문자로 만들어서 넣어주세요.

antd design은 styled-components로 감싸도 반영이 안 된다는 말씀이신가요?

아니요! Styled components는 잘 적용됩니다. 음 예를 들어 마우스가 input창에 focus될때 색깔을 파란색이 아니라 빨간색으로 하는등의 커스터마이징을 해보고싶은데 설정이 매우 헷갈려서요...!

&:focus {
  border-color: 원하는 색 !important
}

하면 되지 않나요?

아 가능하네요 ㅎㅎ 감사합니다!! 이미지 리사이징 문제도 해결했습니다! 

채널톡 아이콘