분류 전체보기70 [Dap JI ] React-native-webView 적용해보기 ( 진행중) 진행중 진행중 진행중 진행중 진행중 진행중 진행중 진행중 진행중 진행중 1. 왜 React-native-webView를 적용하는가! 답지 프로젝트에 React-native-webView를 적용해 스토어 출시까지 목표로 해보기로 했다. 보통 앱은 네이티브 앱이나 하이브리드 앱을 적용해서 만들어야 하는데 토스나 네이버 앱도 웹 앱을 적용한 경우라 답지도 React-native-webView를 사용해 네이티브 코드를 적용하기로 했다. 단순히 앱 형식으로 보이게 하는거라면 pwa가 더 간단할 수 있을 것 같지만 pwa는 모바일 브라우저에 들어가서 설치해야 되기 때문에 내가 생각하는 웹앱과는 거리가 좀 먼 것 같은 느낌이 들었다. 사실React-native-webView 스토어에 배포할 수 있다는 것만 .. 2024. 9. 4. [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. React의 fiber 아키텍쳐? (작성중) React는 16버전부터 파이버라 불리는 새로운 코어 아키텍처를 채택했다. 기존에 사용하턴 스택 알고리즘과 완전히 다른 것으로 React가 파이버 아키텍처를 사용해 virtual Dom을 어떻게 다루는지 알아보자. 1. Reconciliation Reconciliation은 재조정 이란뜻으로 react가 변경된 상태에 따라 ui를 효율적으로 업데이트하는 과정입다. react의핵심 기능 중 하나로 virtual Dom을 활용하여 실제 dom 변경을 최소화 한다. 2. 스택 기반의 알고리즘 react에서는 16버전 이전에 스택 기반 알고리즘을 사용해서 컴포넌트 트리를 Reconciliation했다. 이 알고리즘은 재귀적으로 컴포넌트 트리를 탐색하며 필요한 업데이트를 수행하는 방식이고 이 과정에서 스택.. 2024. 7. 19. 이전 1 2 3 4 5 6 ··· 14 다음
