13-2 DnD, Log in/out
What I Learn
Drang n Drop 기능
react-beautiful-dnd 라이브러리를 사용하여 지난번 만든 trello 게시판에 드래그 앤 드랍 기능을 추가하는 방법에 대해 학습하였습니다.
|설치|
해당 라이브러리는 리액트 버전 18까지 지원하므로
npm uninstall react react-dom // 기존 리액트와 리액트 돔 삭제
npm install react@18 react-dom@18 // 리액트 18버전으로 설치
사용방법이 다르지만 최신버전지원과 보다 나은 방식의
npm install @dnd-kit/core 라이브러리도 있음.
리스트 전체를 감싸고, 리스트, 리스트안의 아이템을 감싸는 형식으로 배열의 splice(시작인덱스, 지울 개수, ...추가되는) 형식을 이용해서 이동되게 하는 방식으로 동작합니다.
DragDropContext : 전체
Droppable : 리스트
Draggable : 리스트 안의 아이템
firebase
웹 개발시 프론트엔드 개발이나 학습을 하면서 백엔드쪽까지 구현하기는 힘들 수 있는데, 백엔드 관련한 서비스를 제공해줍니다.
구글 계정으로 로그인 하거나 DB, 파일 업로드/다운로드 등의 기능을 구현할 수 있게해줍니다.
npm install firebase 로 파이어베이스 설치후
firebase.ts 를 생성한 다음 프로젝트의 연결 초기 설정 코드를 작성해주면 됩니다.
아래 const app = initializeApp(firebaseConfig); 부분을 export 해주면 프로젝트에서 사용가능합니다.
회고
혼자 처음부터 해보라고하면 절대 못할거같다. 반복적으로 사용해보고, 지금까지 배운것들 처음부터 다시 해보면서 부족한 부분을 채우는 식으로 해보자
