🎯 @react-beautiful-dnd 라이브러리를 통해 drag and drop 기능을 구현하고, Firebase로 Login 기능을 구현하고 배포합니다.

📗 Today I Learned

Drag and Drop 기능 구현

@react-beautiful-dnd 라이브러리를 사용해서 Drag and Drop 기능을 구현합니다.

• <DragDropContext/> : 드래그 앤 드롭 기능을 활성화하고자 하는 애플리케이션의 영역을 감싸는 컴포넌트입니다.

• <Droppable/> : 드롭이 가능한 영역입니다.

• <Draggable /> : 드래그할 수 있는 요소입니다.

App.tsx

List.tsx

Task.tsx

---

Firebase 연결

Firebase는 Google에서 제공하는 백엔드 플랫폼으로, 서버 없이도 빠르게 앱을 제작하고 배포할 수 있게 도와주는 서비스입니다.

1️⃣ Firebase에 로그인하여 Go to console 버튼을 눌러 콘솔에 들어갑니다.

2️⃣ 프로젝트를 선택하고 Firebase Hosting을 설정합니다.

3️⃣ 프로젝트 이름을 설정하고, 계속 버튼을 눌러줍니다.

4️⃣ AI 지원 여부를 설정하고, 계속 버튼을 눌러줍니다.

5️⃣ 애널리틱스 여부를 설정하고, 프로젝트 만들기 버튼를 만들어줍니다.
(현재는 간단한 프로젝트 배포기 때문에 애널리틱스는 사용하지 않습니다.)

6️⃣ 프로젝트를 만들고 가운데에 </>(웹) 버튼을 눌러 시작해줍니다.

7️⃣ 앱 닉네임을 적어주고 등록해줍니다.

8️⃣ npm으로 Firebase를 설치해주고, firebase.ts 파일을 만들어서 아래 스크립트를 넣고 콘솔로 이동 버튼을 눌러줍니다.

---

Google Login / LogOut 기능 구현

1️⃣ Authentication을 눌러 인증 관리 설정을 합니다.

2️⃣ 시작하기 버튼을 눌러줍니다.

3️⃣ 적용하고 싶은 로그인 업체를 눌러줍니다.

4️⃣ 사용 설정 버튼을 눌러 공개용 이름과 이메일을 넣어 저장 버튼을 눌러줍니다.

5️⃣ 설정이 마무리되었습니다.
(추가하고 싶다면 새 제공업체 추가 버튼을 눌러 동일한 과정을 수행해주면 됩니다.)

userSlice.ts

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  id: '',
  email: '',
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.email = action.payload.email;
      state.id = action.payload.id;
    },
    removeUser: (state) => {
      state.email = '';
      state.id = '';
    },
  },
});

export const { setUser, removeUser } = userSlice.actions;
export const userReducer = userSlice.reducer;

BoardList.tsx

생성한 reducer를 dispatch(액션)으로 불러와 사용합니다.

const handleLogin = () => {
    signInWithPopup(auth, provider)
      .then((userCredential) => {
        console.log(userCredential);
        dispatch(
          setUser({
            email: userCredential.user.email,
            id: userCredential.user.uid,
          })
        );
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleSignOut = () => {
    signOut(auth)
      .then(() => {
        dispatch(removeUser());
      })
      .catch((error) => console.log(error));
  };

[결과 화면] - 구글 로그인 후, user에 id, email이 잘 들어간 모습

---

배포하기

💡 Github에 파일이 저장되어있어야 합니다.

1️⃣firebase로 배포하기 위해서는 전역으로 firebase-tools를 설치해주어야 합니다.

$ npm install -g firebase-tools

2️⃣firebase에 로그인을 해줍니다.

$ firebase login

3️⃣ 코드를 서비스에 올릴 수 있는 형태로 압축하고 변환합니다.

$ npm run build

4️⃣ firebase 초기 설정을 해줍니다.

$ firebase init

? Are you ready to proceed? Yes

○ Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys

Use an existing project

프로젝트이름

? 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

? File dist/index.html already exists. Overwrite? No

? For which Github repository would you like to set up a Github workflow? 닉네임/프로젝트이름

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

? What script should be run before every deploy? npm ci && npm run build

? 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

5️⃣ 설정을 해준 뒤에 Github에 push해 줍니다.

git add .
git commit -m 'deploy'
git push

6️⃣ Github 레파지토리에서 Actions 탭에 들어가 배포한 커밋으로 들어가줍니다.

7️⃣ build_and_deploy로 들어가줍니다.

8️⃣ 해당 경로로 들어가면 배포된 사이트 주소가 표시됩니다.

---

✏️ 회고

Firebase를 활용하면서 로그인 기능 구현부터 배포까지 비교적 수월하게 진행할 수 있었다. 특히 Github Actions와 연동하여 자동화된 배포가 가능하다는 점에서 배포 과정에 대한 부담이 줄어든 느낌이다.