bootstrap2 [React] Drag & Drop으로 파일 첨부하기 React 로 파일 업로드 기능을 구현하기 위해 기존에는 Bootstrap Form Control 에서 type='file'로 구현했었는데,위와 같이 구현하면 파일을 드래그 앤 드랍 방식으로 업로드를 할 수 없었다.드래그 앤 드롭 방식의 파일을 업로드를 지원하는 다른 사이트들 처럼 구현해 보고 싶어서 연습을 했다. 1. 패키지 설치React 에서 구현하는 것이 목표이므로 React용 패키지, 그리고 스타일링을 위해 Bootstrap 를 설치했다.npm install react-dropzone bootstrap 2. 기본 구현파일을 업로드할 화면을 먼저 구현했다.import { Container, Card } from "react-bootstrap";const FileUploadFiekd = () => {.. 2024. 8. 21. [Bootstrap] React에 Bootstrap 적용하기 https://chunws13.tistory.com/55 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 chunws13.tistory.com 가장 기본적인 기능 (메모 CRUD)을 백엔드와 프론트엔드 모두 구현했으므로 이용할 때 보기 좋게 기본적인 스타일링을 진행하려고 한다. 문제는, 본인의 색감이나 구도 잡는 능력 등 스타일링에 관련해서는 별로 좋지가 않다는 점과 css 문서를 만들어서 하나하나 적용하다보면 시간이 매우 오래걸릴 것이라는 우려로 인해 스타일링을 직접 하는 것 보다는 외부 기능을 사용.. 2023. 12. 5. 이전 1 다음
