Codesigner

SW마에스트로 프로젝트를 진행하면서 웹 상에서 이미지를 크롭 할 필요가 생겼다. 주어진 이미지에서 사용자가 특정 영역을 드래그해서 표시하면, 해당 영역을 새롭게 보여주는 기능을 구현하고자 이와 관련된 라이브러리를 찾아보았다. 그 과정에서 React-image-crop이라는 오픈 소스를 찾게 되었고, 이를 간단하게 활용해본 내용을 이번 포스팅에서 정리해보고자 한다 먼저, 이미지를 크롭하는 과정을 다음과 같은 프로세스로 정의하였다 사용자가 이미지를 업로드한다(영수증, 사진 등) 사용자가 업로드한 이미지를 편집(크롭)한다 이를 구현한 데모 어플리케이션은 여기에서 확인할 수 있다. 데모 어플리케이션을 구동하는 GIF 그림은 다음과 같다. 또한 모든 소스코드는 여기에서 확인할 수 있다 Preview 필자가 구현하..

리액트 라우터는 다음과 같은 세 가지 컴포넌트가 존재한다 Router Components Route Matching Components Navigation Components 우리가 웹에서 사용할 모든 컴포넌트는 react-router-dom에서 임포트 한다 import { BrowserRouter, Route, Link } from "react-router-dom"; 본격적으로 각 라우터 컴포넌트들에 대해서 알아보도록 하자 Routers 리액트 라우터의 핵심은 바로 라우터 컴포넌트이다. react-router-dom 에서는 두 가지 라우터 컴포넌트를 제공하는데, 와 가 존재한다. 이 두 가지 컴포넌트 모두 history라는 오브젝트를 생성한다. history는 자바스크립트가 실행되는 환경에서 sessi..