1. 파일 업로드
React Dropzone을 사용하여 파일 업로드 기능을 구현했습니다. 또한, 커스텀 훅을 선언하여 파일 첨부 시 업로드 용량 초과 여부를 체크하도록 했습니다. 마지막으로, 업로드가 성공하면 useSWR의 revalidate을 활용해 데이터를 다시 가져오도록 구현했습니다.
프로젝트: Upshare
취약한 파일공유 서비스
- 기간2024.04 ~ 2024.07
- 규모1인 개발
프로젝트 기획 동기
2024년 2월부터 약 10개월간 한국폴리텍대학에서 프로그래밍을 공부하며 동료들과 다양한 프로젝트를 진행했습니다. 그 과정에서 자리를 자주 옮기며 협업하다 보니, 파일을 공유하는 일이 번거로운 문제로 떠올랐습니다.
대부분 카카오톡이나 이메일을 통해 파일을 공유했지만, 매번 로그인해야 하는 번거로움이 있었고, 특히 2단계 인증(2FA) 과정이 협업을 더욱 어렵게 만들었습니다. 이에 더 간편하고 효율적인 파일 공유 서비스의 필요성을 느꼈고, 이를 해결하기 위해 직접 기획하고 구현하게 되었습니다.
사용한 기술
node.js 기반의 풀스택 프레임워크
기능 소개
2. 폴더 이동
파일을 드래그 앤 드롭하여 폴더를 이동하는 기능을 구현했습니다. 파일은 folder_id만 수정하면 되어 비교적 간단했지만, 폴더는 한 단계 더 처리가 필요했습니다. 계층형 구조로 되어 있어, 폴더를 이동할 때 해당 계층 정보를 저장하는 테이블에 추가로 INSERT 및 UPDATE를 수행했습니다.
드래그 드롭기능 구현은 간단했습니다. 4가지 상태 즉, onDropState, onDropEnd, onDropOver, onDropLeave, onDrop에 대해서 각각 함수를 만들어주면 됐습니다. 또한 해당 기능을 useReducer함수를 hook을 보기 편하게 고도화한 것에 대해서는 아래 블로그 글을 읽어봐주세요
3. 상태관리
사용자 인증을 위한 보안 프레임워크로는 auth.js 5.0 beta를 사용했습니다. 베타 버전임에도 불구하고 다양한 편리한 기능을 제공했습니다. 또한, /folder 경로에서는 공유해야 할 prop이 많아 React에 내장된 Context API를 활용해 상태를 관리했습니다. 이에 대한 자세한 내용은 아래 prop 드릴링 빼버리기 게시글에서 확인해 주세요.
어려웠던 점
1. 폴더 삭제
이번 프로젝트에서 가장 어려웠던 부분은 폴더 삭제 API 구현이었습니다. 폴더가 계층 구조로 이루어져 있어, 최상위 폴더를 삭제할 때 하위 폴더가 남아 외래 키 제약으로 문제가 발생했습니다.
이를 해결하기 위해 파일 삭제 → 폴더 관계 테이블 삭제 → 폴더 삭제 순서로 처리해야 했습니다. 해당 로직은 오라클의 프로시저와 계층형 쿼리를 활용하여 구현했습니다.
오라클의 계층형 쿼리와 프로시저를 처음 사용하다 보니 구현 과정에서 어려움이 있었습니다. 그러나 구조를 이해하고 나서는 계층 데이터를 효율적으로 삭제할 수 있도록 적절한 로직을 설계할 수 있었습니다.
이미지
