코딩하는라민

[Refact/웹접근성] input file 요소에 잘못된 커스터마이징으로 스크린리더에서 읽을 수 없던 문제 개선하기 지난 프로젝트에서 파일 업로드를 하기 위해 input type file 부분을 커스터마이징했다. 그러는 과정에서 input 요소에 display: none; 을 적용했고, label 요소의 background 로 원하는 이미지를 적용해주었다. 하지만 이런 방법은 tabindex 가 적용되지 않을 뿐더러 스크린리더가 해당 요소를 잡지 못하는 문제점이 발생했다. 이렇게 된다면 웹접근성을 고려하지 않는 방법이라 수정하는 게 좋다는 피드백을 받았다. 📌 접근 가능한 숨김 텍스트 🚫 내가 사용한 잘못된 방법 input{ disaply: none; } 못생긴 input file 의 기존 디자인을 숨..

[React/Project] input 으로 업로드한 여러 개의 이미지 하나씩 삭제하기 📌 업로드한 여러개의 이미지 개별 삭제하기 ✅ 삭제 버튼을 만들어준다. ✅ 버튼에 클릭 이벤트를 걸어준다. ✅ 이렇게 클릭 이벤트를 걸어주면 이미지 전체가 지워진다. function removeImg() { setPostImg([]); setPreviewImg([]); } 단순히 이렇게해서 상태를 초기화한다면, 어떤 x 버튼을 눌러도 업로드된 이미지가 모두 제거될 것이다. 그렇다면 내가 누른 버튼의 index 를 파악해서 그 index에 해당하는 파일의 index 번째 파일을 지워야할 것. ✅ 매개변수에 index 를 넣어주고, 파일과 파일 url 을 전개해 변수에 넣어준다. function removeImg(inde..

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) 이미지 업로드하고 프리뷰를 하는 여러 블로그들을 서칭하고, 적용해보았다. 이미지 1개 업로드하는 것은 성공했는데 여러 이미지를 업로드하는 것은 성공하지 못했다. 그러던 중 하나의 블로그를 발견했고 겨우 성공할 수 있었다. [리액트] 이미지 여러장 올려서 확인하기 게시물 사진을 고를 때 보통 프리뷰를 보여주기 때문에 구현을 하기로 했다.포스팅 페이지 uploadPost.jsx이미지들을 보여주는 images.jsx우선 파일을 받기 위해서 input태그를 만들어 줬습니다.그리고 velog.io 물론 버튼을 개별적으로 지우는 것은 이 블로그를 보고 성공하지 못했다.. 결국 그분의 도움을.. ha ha..