[자작] S3 파일 브라우저

회사에서 공지를 작성할 때 필요한 이미지를 S3에 업로드하고 사용하고 있는데, 매번 이미지 업로드 요청을 받고 S3 등을 업로드한 뒤 이미지 URL을 알려주는 과정이 번거로워서 누구든지 S3에 파일을 업로드할 수 있는 기능의 필요성을 느꼈다. 이런 기능이 사내 어드민에 있으면 좋겠지만 항상 어드민은 우선순위에서 밀리기 때문에 아마 내 생엔 추가되지 않을 가능성이 높..

아무튼 마침 커서도 사용하고 있겠다. 한번 커서한테 시켜서 S3 파일 브라우저라는 웹페이지를 만들었다. 대충 1시간 만에 만든 듯? 이제 공지 이미지를 직접 업로드하고 관리할 수도 있게 되어서 공지 작성할 때 불필요한 병목이 없어졌다.

바이브 코딩이 딸깍이라 편하긴 한데 몇 가지 문제가 있다. 내가 짠 코드가 아니기 때문에 나도 모르는 코드라는 점, 그래서 개발하면서 뭔가 배우는 게 없다는 점, 그리고 무엇보다 제일 큰 문제로 코딩이 재미가 없다. ㅡㅡ

그래서 개인 프로젝트로 다시 진행해 보았다!

커서가 만든 프로젝트는 그냥 순수 리액트에 S3 관련 기능은 @aws-sdk/client-s3 패키지를 사용했고, 디자인도 라이브러리 없이 인라인 스타일로 구현했었다.

나는 디렉터리 경로가 URL에 녹여져 있으면 그럴싸할 것 같아서 라우트 라이브러리를 사용하기로 했고 디자인도 큰 힘 들이기 싫어서 회사에서도 사용하고 있는 MUI 라이브러리를 사용했다.

사용하기 위해선 환경변수 설정이 필수인데 아래 리포지토리에서 리드미를 참고하면 된다.

https://github.com/joyfuI/s3-file-browser

GitHub - joyfuI/s3-file-browser: AWS S3 파일 브라우저

라우터 라이브러리로는 react-router가 익숙하긴 한데(근데 최근에 또 v7으로 업데이트되면서 대규모 변화가 있었다.) 이번엔 새로운 걸 써보고 싶어서 tanstack-router를 알아봤다. 얘는 신기하게 nextjs처럼 파일 기반 라우팅을 지원한다길래 어떤 원리로 가능한 거지? 알아보니까 vite에 플러그인을 붙이는 방식이었다. react-router v7도 비슷한 방식이 최근에 추가됐던데..

프로젝트를 생성하던 중에 t3-env라는 라이브러리를 알게 되어 얘도 추가했다. 타입 안전한 환경 변수를 만들어 준다.

aws-sdk를 사용하다 보니 역시 api 처리는 tanstack-query가 편해서 추가. 쿼리랑 라우터 둘 다 같은 곳에서 만든 거라 그런지 devtool이 각각 생겼는데 이거 역시 통합하기 위한 tanstack-devtools가 있길래 얘도 사용했다. tanstack 시리즈를 세 개나!

전역 상태 관리가 필요해졌는데 너무 조금 필요한 거라 useContext를 쓸까 하다가 마침 tanstack-query를 사용 중이니까 얘를 적당히 응용해서 상태 관리자처럼 사용했다. 그 와중에 tanstack-store가 눈에 들어오긴 했는데.. 안 썼다ㅎ

커서가 만든 프로젝트는 단순하게 520여 줄짜리 단일 컴포넌트였는데 직접 만드니까 이렇게 됐다. ㅋㅋㅋ 이 맛에 프론트 하지!

아무래도 환경변수에 aws 시크릿키를 넣고 사용하는 방식이라 빌드한 결과를 공개된 웹에 올리기엔 난감한 점이 있었다. 그래서 웹 프로젝트를 단일 실행파일로 만드는 방법을 찾았는데, 일렉트론은 너무 과하고;; bun을 사용하면 bun build --compile 명령어로 자바스크립트를 실행파일로 만들 수 있다길래 이 방법을 사용했었다.

근데 커서가 만든 프로젝트는 잘 작동했는데 내가 만든 건 복잡해져서 그런가 자바스크립트 오류가 나서 사용할 수 없었다. bun 런타임이 같이 묶이느라 용량도 과하게 크기도 했고..

그러다가 정말 신기한 프로젝트를 발견했다. redbean이라는 프로젝트인데 무려 그 자체로 zip이면서 윈도우/리눅스/맥/BSD에서 실행할 수 있는 웹서버이다. zip으로 열고 웹페이지를 넣으면 끝! 그냥 실행하면 웹서버가 열린다. 정말 해커스러운 프로젝트인데 최신버전인 3.0은 내 컴퓨터에서 오류가 나서 그 전 버전인 2.2를 넣고 패키징 기능도 넣었다.