본문 바로가기

전체 글75

[Dap JI ] expo 이미지 업로드 reat-native 환경에서 이미지 업로드 적용하는 방법,  next..js에선 input의 type ='file'을 사용해서 이미지 업로드를 구현할 수 있지만 react-native에선 없기 때문에 라이브러리를 사용. 1. expo-image-picker2. react-native-picker 이 두개가 대표적인듯.  나는 expo를 사용중이기 때문에 expo-image-picker  적용,  last publish도 2일전이니 꾸준하게 디벨롭중인 것 같다. - expo-image-picker 장점   1. 간편한 설치 및 사용       - expo에서 바로 사용 가능하며 네이티브 코드를 건드릴 필요가 없다.    2. 안전성      - expo 환경에 테스트 가능, 다양한 기기에서 일관되게 작용.. 2024. 10. 24.
[Dap JI - issue] 이미지 업로드 1. 구현 방법 및 고민다중 이미지 업로드 기능에서 동일한 이미자가 두 번 추가되는 문제 발생 FileReader를 사용해 미리보기 URL을 생성하는 동시에 서버로 파일을 업로드 한 후에도 다시 URL을 추가하는 과정에서 발생한 문제인 것 같다. 2. 이슈사용자가 이미지를 업로드할 때 FileReader를 사용해 이미지의 미리보기 URL을 생성하고 서버에 파일을 업로드 한 후에도 setFileuUrl을 호출해 이미지 url을 상태에 추가했다. 이로인해 동일한 이미지가 두 번 추가된다. 미리보기 url과 실제 서버에서 반환된 url을 동일한 state로 관리하면서 발생했기 때문이다. const { mutate: boardImageUpload } = useMutation({ mutationKey: ['bo.. 2024. 8. 26.
[Dap JI - issue] 동영상 삭제에 관하여 1. 기존 구현 방법 및 고민삭제를 하는 기존 구현 방식은 매우 간단하게 이루어졌었다. 사용자가 수정 페이지에서 동영상마다 있는 x아이콘을 클릭하면 해당 동영상의 url이 서버로 전송되어 바로 삭제되었다. 하지만 이 방식에는 문제점이 있었다. .1. 실수로 삭제된 동영상을 다시 업로드 하는 것 외에는 돌릴 방법이 없다는것2. 서버에서 완전히 제거되므로 데이터 복구 불가능  const updatedVideos = mediaUrl.videoUrl.filter((_, i) => i !== index);const updatedThumbnailUrl = mediaUrl.thumbnailUrl.filter( (_, i) => i !== index,);setMediaUrl({ videoUrl: updatedVid.. 2024. 8. 23.
react-csv 사용해서 엑셀 다운로드 해보기 프로젝트에서 관리자 페이지 기능 중에서 사용자나 게시물 데이터를 엑셀로 받을 수 있는 기능을 구현해야했다. 많이 알려진 라이브러리 중에서는 react-csv라는 라이브러리가 있어서 적용을 해봤다.  React- csv https://www.npmjs.com/package/react-csv react-csvBuild CSV files on the fly basing on Array/literal object of data . Latest version: 2.2.2, last published: 3 years ago. Start using react-csv in your project by running `npm i react-csv`. There are 300 other projects in the npm.. 2024. 7. 19.