[TIL] 2022-04-07

오늘의 TIL

1. 이미지 프로세스 이해

• 이미지 서버
• 스토리지

  이미지는 스토리지 저장소에 저장되고, 데이터베이스에는 실제 이미지 파일이 아니라 스토리지에 접근할 수 있도록 부여받은 url이 저장된다.
  프론트에서 이미지 등록을 요청하면 실제 이미지는 스토리지에 저장되고 url을 돌려받게 되고, url로 이미지를 조회해서 화면에 보여준다.

2. 이미지 검증

• 확장자, 용량

  안전한 로직을 위하여 이미지를 업로드하면 용량과 이미지 타입을 먼저 검증하는 함수를 만들고, 그 함수를 따로 분리해서 boolean 리턴값만 받아와서 활용했다.

3. 기본 FILE 태그 숨기기

• useRef

  file 타입의 input 태그는 display:none으로 설정해서 숨기고, 다른 버튼을 만들어서 그 버튼의 이벤트가 일어나면 useRef를 사용해 file 타입의 input 태그의 onChange가 실행되도록 변경해서 버튼을 커스텀할 수 있게 만들었다.

self-study

• 포트폴리오에 이미지 여러장 업로드, 수정, 삭제 기능 추가