Frontend/UI&UX

react-dnd → Drag & Drop

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

tailwind-css

tailwind-css https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com tailwind css의 컨셉인 Utility-First로 인해 HTML과 CSS를 왔다갔다하면서 원하는 태그의 스타일을 변경하기 위해 시간을 쏟을 필요가 없고 클래스명도 고민할 필요가 없다 각 css 요소 수준의 유틸리티 클래슬르 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있지만 디자인이 복잡해질 수록 코드가 못생겨진다 ㅠㅠ 또한 클래스 속성명에 대한 러닝커브가 존재..

무한 스크롤 - infinite scroll

How - useInview 무한 스크롤을 스크롤 이벤트를 통해서 구현하기도 하고 여러 방법이 있겠지만 react-intersection-observer의 useInView 훅을 사용해 쉽게 구현할 수 있다. yarn add react-intersection-observer useInView의 첫번째 파라미터로 ref를 설정할 수 있고 두번째 파라미터는 ref가 걸린 요소가 화면에 보이면 true로 값이 변경되고 화면에 보이지 않으면 false로 변한다 const [ref, isView] = useInView() 아래 예시를 살펴보자! 맨 아래 요소에 ref를 걸고 useEffect를 이용해서 맨 아래 요소가 화면에 보이는 여부에 따라 isView가 변경될 때마다 콘솔에 isView를 출력해보자! imp..

이미지 업로드, 미리보기

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