본문 바로가기

전체 글70

[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.
a태그 사용한 첨부파일 다운로드 방법 프로젝트를 진행하던 중 관리자 페이지에서 첨부파일을 다운로드하는 기능을 구현해야했다. 자바스크립트의 a태그에는 download속성이 있다.  {list.files?.length > 0 ? list.files.map((file, index) => ( {file.fileName} )) : "첨부파일 없음"} 서버에서 받아오는 file의 이름을 a태그로 감싸고 a태그 속성에 href를 받아오는 파일의 url로 설정하고 download 적용해주면 다운로드가 될 줄 알았지만 단순히 file의 url링크로만 들어가지는 문제였다. 검색해보니 a태그의 download속성은  동일출처 정책에 의해 다운로드 파일의 경로가 현재 파일의 경로와 동일해야 적용된다는 것! .. 2024. 7. 5.