코딩하는라민

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