[React] 리액트로 만드는 파일업로더

사내에서 그동안 FTP에 직접 붙어 이미지를 업로드한 후

파일서버 URL을 직접 적어서 채용공고 등 외부공유가 필요한 이미지파일을 사용해왔다.

이미지 하나 올리고 공유하는 절차가 너무 번거로웠다.

(= 이제 이미지 파일을 사내채팅방에 돌림빵하지 않아도 된다)

 

예전부터 이 프로세스를 간소화 할 수 있는 웹을 만들어야겠다 생각 하던중

팀내 백엔드 개발자분과 소통하여 개발하기로 결정했다.

 

모습은 위와 같이

이미지 선택 -> 업로드 -> 이미지 URL 응답 -> 클립보드 API 가 전부라고 할 수 있겠다.

 

비록 작은 프로젝트지만

사내에서 유용하게 쓰였으면 하는 바램이다.

 

이번에 픽한 컬러는

#766EDA , #98D8F3

 

 

Custom Components

기능적인것 보다도 UX 관점에서 조금 더 신경쓴 프로젝트였다.

Toast Message와 Confirm, Alert 모두 Cusom으로 개발하여 브라우저에서 기본으로 제공하는

딱딱(!)하고 갑분회색이 안뜨도록 신경쓰고

최대한 UI 안에서 감싸주는 듯한 느낌이 들도록 작업하려고 노력했다.

 

Preview

미리보기 기능은 기획에는 없었지만

내가 만약 사용자라면, 확대까진 아니어도 대충 이미지 잘 선택해서 올렸나 확인용도로

체크할 수 있는 프롬프터같은 역할을 해주는게 좋을것 같아서 추가하게 되었다.

 

Auto Copy

요즘 클립보드 API를 활용해서 이 기능을 많이 사용하는 것 같다.

기술문서 Docs에서도 정말 많이 보이는 기능이다.

언젠간 써봐야지 했는데 여기서 쓰일줄 몰랐다.. 사람일은 모르는거다

 

 

-

 

 

기여 (1인) : 기획 - 디자인 - 프론트개발

Skills: Javascript, React 17.x, Styled-components

 

 

-

 

 

다음엔 어떤 프로젝트를 해볼까?