코딩하는라민

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

[React/Project] firebase 데이터 무한 렌더링으로 용량 초과 문제 발생 📌 문제상황 useEffect(()=>{ ... }, [Arr]) Arr 에 해당하는 부분은 Firebase 에서 데이터를 가져와서 확인하는 부분이었다. Arr 를 useEffect 의 두번째 인자값으로 전달해서 Arr 이 변경될 때마다 useEffect 내부의 함수가 재렌더링 되도록 해준 것이었다. 계속해서 서버로부터 요청을 전송하게 되고 그럴 때마다 리렌더링 되는 바람에 무한 리렌더링의 늪에 빠져버렸다. 머지된 main 브랜치를 pull 받아서 실행해보니 데이터가 불러와지지 않았고, 오류의 숫자는 미친듯이 올라가고 있었다. 이게 무슨 상황인지 어버버 하다가 오류의 숫자가 4천이 넘도록 창을 끄지 않았는데 그 이유..

[React/Project] 이미지 압축해서 업로드하기 (with browser-image-compression 라이브러리) 📌 browser-image-compression 란? browser-image-compression 은 이미지 압축을 위한 자바스크립트 모듈이다. 이 모듈을 사용하면 프로그램 서버에 업로드하기 전 해상도나 저장 용량을 줄여 대역폭을 절약할 수 있다. 📌 사용하게 된 배경 Firebase 용량 이슈 이후 팀원들과 함께 서버에 전송하기 위한 데이터를 최적화하기 위한 작업을 시작했다. 로그인 시 프로필 사진 업로드하고 불러오기, 게시글 작성 시 프리뷰 이미지와 서버로 전송하는 이미지에 대해 해당 라이브러리를 적용해서 최적화를 진행했다. 📌 설치하기 npm install browser-..

[React/Project] Recoil Persist 를 사용해 로컬스토리지에 데이터 저장/불러오기 📌 사용하게 된 배경 ✅ Recoil 사용하게된 이유 더보기 Recoil 을 사용해서 로그인 시 토큰과 유저 정보들을 가져와서 전역에서 사용했다. 게시글 작성 페이지는 로그인 시에만 접근이 가능하도록 했으며, 게시글을 작성 / 수정할 경우 해당 유저 데이터를 서버로부터 받아와서 게시글에 해당 정보를 불러와서 게시글을 분류했다. 게시글 수정을 할 경우에는 로그인된 유저의 데이터와 게시글 작성자의 유저 정보와 일치할 경우 수정 / 삭제 버튼이 렌더링 되도록 했다. 또한 수정 버튼을 클릭하면 해당 게시글의 작성자 정보와 게시글 정보를 가져와 바뀐 내용으로 대체해주었다. ✅ Recoil 사용하다가 겪은 문제점 ..

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

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(다중 이미지) 📌 단일 이미지 업로드 및 프리뷰 구현 [React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) [React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) 이미지 업로드하고 프리뷰를 하는 여러 블로그들을 서칭하고, 적용해보았다. 이미지 1개 업로드하는 것은 성공했 ramincoding.tistory.com 📌 파일 업로드하는 코드(다중 이미지) 다중 이미지를 업로드하기 위해서는 반복문을 사용해야한다. 파일을 업로드하면 files 에 여러개의 파일 데이터가 들어올 것이고, 이를 배열로 만..

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

[React/Project] input disabled 를 이용한 다중 입력값에 따른 버튼 활성/비활성화 📌 input 에 value 를 하나라도 입력하면 버튼이 활성화되던 문제 ✅ 현재 상태 input 의 상태를 다음과 같이 관리하고 있다. const [formState, setFormState] = useState({ title: '', price : '', content: '', }); input 에 값을 입력하면 onChange 이벤트가 발생하고, onChange 이벤트 안에 setState 를 통해 상태를 변경하는 콜백함수를 넣어주었다. 변경되는 상태를 input 의 value 에 담아 input 의 값을 조회할 수 있게 해주었다. const handleChange = (e) => { setFo..

[React/Project] 파이널 프로젝트 시작 ( 당근마켓 클론코딩 ) 03/10 📌 파이널 프로젝트 React 수업까지 끝나고 드디어 파이널 프로젝트를 시작했다. 아직은 많이 부족하지만 공부하면서 프로젝트를 완성해볼 예정이다. 모르는 게 있으면 팀원들과 공유해서 같이 토론해보고 해결해나가고, 검색을 통해 해결할 수 있는 문제는 혼자 해결해볼 수 있도록 하자! 📌 프로젝트 주제 정하기 멋사에서 지정해준 프로젝트 주제인 마켓컬리, 티빙이 있었는데 다들 바닐라 프로젝트에서 마켓컬리를 진행했기 때문에 가급적이면 안해본 사이트를 클론코딩해보기로 했다. 물론 기존에 진행했던 부분에 대해 리액트로 자세히 파고들 수는 있지만, 이것은 파이널 프로젝트가 끝나고 나서 혹은 개인이 진행하기로 했다. 그래서 결정한 것이..