리액트를 이용한 Task 생성 앱 만들기 - Part4

React Beautiful Dnd(현재는 hello-pangea/dnd) 를 이용한 간단한 앱 만들기

이슈
react-bueatiful-dnd가 더 이상 지원을 해주지 않음 => hello-panged/dnd를 사용

import { useState } from 'react';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import logo from './logo.svg';
import './App.css';

const finalSpaceCharacters = [
  { id: 'gary', name: 'Gary Goodspeed' },
  { id: 'cato', name: 'Little Cato' },
  { id: 'kvn', name: 'KVN' }
];

function App() {
  const [characters, setCharacters] = useState(finalSpaceCharacters);

  const handleEnd = (result) => {
    console.log(result)
    if (!result.destination) return;

    const items = Array.from(characters);
    console.log(items)

    const [reorderedItem] = items.splice(result.source.index, 1);
    console.log(reorderedItem)

    items.splice(result.destination.index, 0, reorderedItem);
    console.log(items);

    setCharacters(items);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul
                className="characters"
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {characters.map(({ id, name }, index) => (
                  <Draggable key={id} draggableId={id} index={index}>
                    {(provided) => (
                      <li
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <p>{name}</p>
                      </li>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
    </div>
  );
}

export default App;

라이브러리에서 DragDropContext, Droppable, Draggable사용법을 공부함

• DragDropContext
  드래그 앤 드랍 전체를 감싸는 컨테이너
  onDragEdn이벤트 핸들러로 드래그 종료 시 순서변경을 확인할 수 있도록 해둠

• Droppable
  드래그 가능한 항목들이 들어갈 수 있는 영역을 의미

• Draggable
  각각의 아이템을 Draggable로 감싸서 드래그 가능하게 만듬

Drag And Drop 기능 만들기 시작하기

DnD 기능을 위해서 App.tsx 파일에서 <ListContainer>를 DragDropContext로 지정하고
components/List/List.tsx에 Droppable을 도입하고, 기존 리스트 wrapper를 <Droppable>으로 감싸주면서
provided.droppableProps
provided.innerRef
를 연결함

Task/Task.tsx에는 Draggable을 도입해 개별 할 일 카드를 로 감쌌고
provided.draggableProps
provided.dragHandleProps
provided.innerRef
를 각 DOM 요소에 적용함

DragEnd 기능 생성하기

드래그가 끝난 시점에 이벤트를 구현함
source와 destination정보를 읽어 Redux 액션을 디스패치하도록 했음
그래서 서로 다른 리스트 간 이동인지, 같은 리스트 내 이동인지 구분해 페이로드를 담아 넘겨주는 로직을 만듬

sort 로직 생성하기

store/slices/boardsSlice.ts에 sort 리듀서를 추가함
같은 리스트 내 이동인 경우와, 리스트 간 이동인 경우를 구분해 Array.splice()로 배열 요소를 꺼내고 다시 삽입하는 로직을 작성함
이걸 해줌으로써 index 처리를 바르게 정리하여 안정적으로 순서 변경이 가능해짐

Firebase 연결하기

firebase사이트에서 프로젝트 만들기버튼을 통해 우리가 만든 프로젝트를 배포해줄 것이다.
이렇게 프로젝트를 만들게 되면 firebaseConfig 코드를 주다. 이걸 통해 프로젝트를 배포할 준비를 해줄 수 있다.

Login 기능 구현하기

hooks/useAuth에 커스텀 훅을 만들어 user상태에서 id와 email을 꺼내올 수 있도록 만들어준다.
그리고 BoradList에서는 useAuth로 인증 여부를 판별해 로그인, 로그아웃 버튼 중 어떤걸 보여줄건지 결정하는 로직도 만들어주었다.

Redux Store에 유저 데이터 넣기

slices/userSlice를 새로 만들어서 setUser, removeUser리듀서를 정의해줬다.
초기 상태는 ''의 빈 문자열로 두고 로그인시 action.payload의사용자 정보를 저장할 수 있도록 만들었다.

LogOut 기능 구현하기

이렇게 만든 리듀서들을 통해 로그아웃 시에는 다시 빈문자열('')이 들어갈 수 있도록 만들었다.

배포하기

배포는 다음과 같은 순서로 진행되었다.

이슈
firebase-tools를 전역으로 다운했는데, 명령어가 불러와지지 않는 문제가 생겼다.
그래서 ~/.npm-global파일에서 /bin파일내에 명령어가 있는지를 확인하는 과정에서 ~/.npm-global폴더가 없는것을 확인하고

mkdir ~/.npm-global
npm uninstall -g firebase-tools
npm i -g firebase-tools

를 하여 다시 설치하였더니 firebase 명령어를 사용할 수 있게 되었다.

$> npm i -g firebase-tools

$> firebase login
Already logged in as wltjd1688@gmail.com

$> firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/kimjiseong/programers/React-task-app

? Which Firebase features do you want to set up for this directory? Press Space to select 
features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and 
(optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: react-test-app-2-afd70 (react-test-app-2)
i  Using project react-test-app-2-afd70 (react-test-app-2)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
✔  Wrote dist/index.html

i  Detected a .git folder at /Users/kimjiseong/programers/React-task-app
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=89cf50f02ac6aaed3484&state=582067610&redirect_uri=http%3A%2F%2Flocalhost%3A9005&scope=read%3Auser%20repo%20public_repo

Waiting for authentication...

✔  Success! Logged into GitHub as jiseong1688

? For which GitHub repository would you like to set up a GitHub workflow? (format: 
user/repository) jiseong1688/task-app

✔  Created service account github-action-964038280 with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_REACT_TEST_APP_2_AFD70.
i  You can manage your secrets at https://github.com/jiseong1688/task-app/settings/secrets.

? Set up the workflow to run a build script before every deploy? No

✔  Created workflow file /Users/kimjiseong/programers/React-task-app/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main

✔  Created workflow file /Users/kimjiseong/programers/React-task-app/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

다음과 같이 firebase-tools를 사용해 배포를 진행하던 중
github의 Action에서 라이브러리를 찾지 못한다는 오류가 계속나왔었다.
firebase-tools에서 이전에 실행할 스크립트를 추가했지만 다음과 같은 오류가 나와서 firebase.json에서

...
    "predeploy": [
      "npm install",
      "npm run build"
    ]
  }
}

를 추가하였더니 잘 실행 되었다.

이 외에도 type에러가 나는게 몇개 있어 오타와 함께 수정해주었다.