What to do? 페이지에서 클라이언트가 로컬 컴퓨터로 이미지나 비디오 파일을 업로드하고 서버에 전송하기 전에 미리 사용자가 업로드할 이미지를 보여주고 싶을 경우가 있을 것이다. 아래처럼 input 태그에 type을 file로 주고 accept라는 키워드를 사용해서 비디오와 이미지 형식의 파일만 받게 태그를 변경하면 비디오&이미지 업로더를 구현할 수 있다. 클라이언트로 부터 받은 비니오와 이미지 파일은 state에 저장하고 삭제 버튼을 클릭하면 state를 초기화 시키자. 클라이언트가 이미지를 업로드하기 전에는 디폴트 이미지를 보여주고 클라이언트가 비디오나 이미지를 업로드하면 해당 이미지를 보여주도록 하자. 그리고 사용자가 업로드하는 비디오의 시간을 제한하는 기능도 추가해보자! 예를들어 서버의 자원을..

react-dnd react-dnd는 react에서 쉽게 Drag & Drop을 사용할 수 있게 해주는 라이브러리이다. 모바일에서 작동하지 않는 drag 이벤트를 touch 이벤트로 바꿔주기 때문에 모바일 환경에서도 Drag & Drop 기능을 사용할 수 있게 해준다. 또한 Drag중인 요소를 추적해서 css 속성을 바꿔주거나 Drag가 끝난 상황도 커스터마이징 해줄 수 있는 유용한 라이브러리이다! 예를 들어 아래 그림처럼 드래그중일 때 opacitiy와 같은 css 속성을 넣고 state를 수정해서 요소의 순서를 바뀌게 할 수 있다! 아래 공식 문서와 여러가지 example code를 보고 참조하자! 내가 간단히 구현한 것보다 훨씬 많은 기능을 추가할 수 있다! https://react-dnd.gith..

Why? UX적 관점에서 생각할 때, 아래처럼 로그인하지 않은 사용자가 인증이 필요한 페이지에 접속하려고 할때 로그인 화면으로 넘어가서 로그인을 마친 후 다시 원래 가고자했던 페이지로 돌아오는 것은 사용자의 편의를 위해서도 매우 중요하다! 만약 인증된 사용자만 사용할 수 있는 페이지를 사용하려고 할 때, 로그인을 하지 않은 상태이거나 jwt-token이 유효하지 않으면 로그인 화면으로 가서 로그인에 성공하면 다시 원래 화면으로 돌아올 수 있게 리다이렉트하게 할 수 있게 Navigate 컴포넌트(react-router-v6)의 url에 쿼리 파라미터로 기존에 사용하고자하는 페이지의 url을 넘겨주자. 만약 로그인이 된 상태라면 기존에 이용하고자 하는 페이지의 컴포넌트를 리턴해서 렌더링한다. 즉, Priva..

Why? 인증이 필요한 서버로 데이터를 보내거나 조작하는 API를 호출할 때 보안을 위해 interceptor로 요청을 가로챈 후 HTTP Authorizaition 요청 헤더에 jwt-token을 보내서 서버 측 해당 API에 요청을 하기 전에 서버 측의 미들웨어에서 이를 확인한 후 검증이 완료되면 API에 요청을 하게 한다 클라이언트가 jwt-token을 저장하는 위치는 매우 많겠지만 아래 예시에서는 localStorage에 있다고 가정하자!! axios interceptor import axios from 'axios'; import store from "../redux/configStore"; import {jwtUtils} from "./JwtUtils"; const instance = axio..