'TaskTracker'

🍅 TaskTracker - 회고

🎯 프로젝트 개요 본 프로젝트가 지향하는 바는 다음과 같았다. 프로젝트의 필요성을 본인 스스로 납득할 수 있을 것 Firebase를 통한 Authentication과 CRUD의 전 과정을 경험할 것 Redux-Toolkit을 통해 전역 상태 관리를 경험할 것 >

2024년 6월 22일10min read

https://tasktracker-livid.vercel.app/home

🎯 프로젝트 개요

본 프로젝트가 지향하는 바는 다음과 같았다.

1. 프로젝트의 필요성을 본인 스스로 납득할 수 있을 것 2. Firebase를 통한 Authentication과 CRUD의 전 과정을 경험할 것 3. Redux-Toolkit을 통해 전역 상태 관리를 경험할 것

✅ 프로젝트의 필요성

불편했다. 계획을 세우면 지키지 않고, 세우지 않으면 불안했다. 그리고 모든 것을 예측할 만큼 똑똑하지 않았다. 매번 수행하려는 작업의 난이도는 상이했고, 예측할 수 없는 무언가를 예측하려 했기에 당연히 실패하면서, 무엇인가 잘못됐다는 생각이 들었다.

원인과 결과가 바뀌는 순간이 분명히 있다. 그러니까, 계획과 실행에 문제가 있어서 불안해지는 것이 아니라, 불안하기 때문에 계획과 실행이 망가지는 상황이 있다는 것이다. 불안이 원인이라면 그것을 경감하려는 쪽이 해결에 가깝겠다.

뽀모도로 기법은 꽤나 유명한 시간관리 방법론 중 하나였고, 버튼을 클릭하는 순간 내가 설정한 Task와 시간에 온전히 집중하게 된다는 점이 불안 관리에 상당히 유용하다는 생각이 들었다.

프로젝트는 사실상 껍데기에 불과하다. 프로젝트라는 바운더리 안에서 어떠한 기술을 습득하고 숙련했으며 무슨 이야기를 담았는지가 훨씬 중요하고, 이러한 작업은 여전히 어렵지만, 고민의 총량이 프로젝트이기 때문에 고민이 전제되지 않은 프로젝트를 수행할 것이라면, 그냥 나가서 노는 게 행복에 더 유리할 것이라는 것이 내 생각이었다. 역설적이다.

✅ Authentication

1. createUserWithEmailAndPassword(회원 가입) ✍️

code

  // 회원가입을 처리하는 함수
  const handleSignUp = async (e) => {
    e.preventDefault();
    if (Object.values(errors).some((error) => error)) {
      alert("Please check your information again.");
      return;
    }
    await dispatch(
      signupUser({
        email: userInfo?.email,
        password: userInfo?.password,
        imgFile,
        displayName: userInfo?.username,
      })
    ).unwrap();

    alert("Sign up successful!");
    navigate("/signin");
  };

code

export const signupUser = createAsyncThunk(
  "user/signupUser",
  async (userInfo) => {
    try {
      // Firebase를 통해, 이메일과 비밀번호로 사용자를 생성
      await createUserWithEmailAndPassword(
        auth,
        userInfo?.email,
        userInfo?.password
      );

      // 현재 사용자가 있는 경우(=firebase에 회원 등록이 된 경우)
      if (auth.currentUser) {
        // 동시에 이미지 파일이 있는 경우
        if (userInfo?.imgFile) {
          // firebase에 이미지를 업로드
          const storageRef = ref(
            storage,
            new Date().getTime() + userInfo?.imgFile?.name
          );
          const uploadTask = uploadBytesResumable(
            storageRef,
            userInfo?.imgFile
          );
          uploadTask.on(
            "state_changed",
            // 업로드 상태가 변경될 때 실행될 콜백 함수
            (snapshot) => {
              // 업로드 진행률을 계산하는 로직
              const progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              console.log("Upload is " + progress + "% done");
              switch (snapshot.state) {
                case "paused":
                  console.log("Upload is paused");
                  break;
                case "running":
                  console.log("Upload is running");
                  break;
              }
            },
            // 업로드 중 에러가 발생한 경우
            (error) => {
              alert("Failed to upload image. Please try again later.");
            },
            // 업로드가 완료된 경우
            () => {
              // 업로드된 파일의 다운로드 URL을 가져옴
              getDownloadURL(uploadTask.snapshot.ref).then(
                async (downloadURL) => {
                  // 사용자 프로필을 업데이트
                  await updateProfile(auth.currentUser, {
                    displayName: userInfo?.displayName,
                    photoURL: downloadURL,
                  });
                }
              );
            }
          );
        }
        // 이미지 파일이 없는 경우
        else {
          await updateProfile(auth.currentUser, {
            displayName: userInfo?.displayName,
            photoURL: "",
          });
        }
      }
    } catch (error) {
      // 예외가 발생한 경우
      switch (error.code) {
        case "auth/email-already-in-use":
          alert("Email already in use.");
          break;
        case "auth/weak-password":
          alert("Password should be at least 6 characters.");
          break;
        case "auth/network-request-failed":
          alert("Network request failed.");
          break;
        case "auth/invalid-email":
          alert("Invalid email format.");
          break;
        case "auth/internal-error":
          alert("Internal error.");
          break;
        default:
          alert("Sign up failed.");
      }
    }
  }
);

코드를 주절주절 설명하는 것은 크게 의미가 없을 것 같다. Firebase에서 제공하는 createUserWithEmailAndPassword 함수에 적절한 값을 전달하면 회원 가입은 완료된다.

그런데 재료가 무엇인지 그 속성이 어떠한지는 명확히 인지해야 한다. 향후에 React-Query나 Supabase 등 다양한 기술을 프로젝트에 적용할 예정인데, 내가 활용할 수 있는 데이터에는 무엇이 있으며, 그 데이터들이 가지는 속성이 무엇인지 알지 못하면, 제대로 된 코드를 작성할 수 없다.

돼지고기가 소화되면 펩타이드를 거쳐 아미노산으로 바뀌는데, 이때 필요한 것이 단백질 분해 효소인 '프로테아제'고, 새우젓이 발효되는 동안 생성되는 프로테아제는 일종의 소화제 역할을 하기에, 일반적으로 순댓국의 간을 새우젓으로 한다.

코딩은 지식이 압도적으로 많은, 까다로운 손님(like 백종원 선생님)에게 식사를 대접하는 과정과 같아서, 내가 사용하는 재료를 명확히 알고 있어야만 한다.

2. signInWithEmailAndPassword(로그인) ✍️

code

 // 로그인을 처리하는 함수
  const handleSignIn = async () => {
    try {
      await dispatch(
        signInUser({ email: signinInfo?.email, password: signinInfo?.password })
      ).unwrap();

      navigate("/home");
    } catch (error) {
      console.error(error);
    }
  };

code

export const signInUser = createAsyncThunk(
  "user/signInUser",
  async (userInfo) => {
    const userCredential = await signInWithEmailAndPassword(
      auth,
      userInfo?.email,
      userInfo?.password
    );
    const result = {
      uid: userCredential?.user?.uid,
      displayName: userCredential?.user?.displayName,
      email: userCredential?.user?.email,
    };
    localStorage.setItem("user", JSON.stringify(result));

    return result;
  }
);

Firebase에서 제공하는 함수를 사용한다는 점을 제외하고 특징적인 것은, 유저 정보를 localstorage에 저장한다는 점이다.

여러 장단점이 있겠지만, 브라우저에 데이터를 저장하면, 유저가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도, localstorage에 저장된 데이터는 그대로 유지되기에, 로그인 상태 유지 등 세션 관련 기능을 구현하는 데 유용하기 때문에 사용했다.

3. onAuthStateChanged(회원 유지) ✍️

code

  useEffect(() => {
    dispatch(checkLoginUser(JSON.parse(localStorage.getItem("user"))));
  }, [dispatch]);

code

// 유저 정보를 설정하는 비동기 함수
export const checkLoginUser = createAsyncThunk(
  "user/checkLoginUser",
  async (user) => {
    console.log(user);
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      console.log(user);
      localStorage.setItem("user", JSON.stringify(user));
    });

    return user;
  }
);

Appbar에서는 해당 useEffect를 실행한다. 즉, Appbar가 제시되는 모든 영역에서 계속해서 유저 정보를 checkLoginUser 함수로 dispatch 한다는 것이다.

Firebase에서 제공하는 onAuthStateChanged 함수를 통해 계속해서 유저 정보를 갱신 및 유지할 수 있게 된다.

✅ CRUD

1. Add Task 버튼 ✍️

동작: 사용자가 입력한 새로운 태스크 이름을 리스트에 추가한다. 예를 들어, 사용자가 "운동하기"라는 태스크를 입력하면, 이 태스크가 리스트에 추가된다.

2. Go to Archive 버튼 ✍️

동작: 현재 화면에서 아카이브 페이지로 이동한다. 이동 후에는 홈 페이지에 있던 모든 complete 태스크들을 확인할 수 있다.

3. All Clear 버튼 ✍️

동작: 아카이브 페이지에 있는 모든 complete 태스크들을 삭제한다. 단, 홈 페이지에 추가된 내용은 complete가 아니기에 삭제되지 않는다.

4. Go Home 버튼 ✍️

동작: 아카이브 페이지에서 홈 페이지로 되돌아간다. 이동 후에는 다시 홈 페이지에 추가되어 있던 태스크들과 아카이브 버튼을 확인할 수 있다.

5. Start 버튼 ✍️

동작: 선택한 특정 태스크의 타이머를 시작한다. 예를 들어, "운동하기" 태스크의 타이머를 시작하면, 해당 태스크는 'pending' 상태로 표시되며 시간이 진행된다.

6. Pause 버튼 ✍️

동작: 현재 진행 중인 태스크의 타이머를 일시 정지한다. 예를 들어, "운동하기" 태스크의 타이머가 일시 정지되면, 해당 태스크는 'paused' 상태로 변경되며 정지된 기록으로 해당 태스크가 서버에 저장된다.

7. Delete 버튼 ✍️

동작: 선택한 특정 태스크를 리스트에서 삭제한다. 예를 들어, "운동하기" 태스크를 삭제하면, 이 태스크는 리스트에서 제거되어 UI에서 보이지 않게 된다.

8. 대표 코드 ✍️

code

  const handleAddTask = () => {
    if (!task.trim()) {
      return alert("태스크를 입력해주세요.");
    }
    const newTask = {
      createdAt: Date.now(),
      task,
      status: "pending",
      initialTime: time,
      pausedTime: "",
      userId: user.uid,
    };
    dispatch(addTask(newTask));
    setTask("");
    setTime(300);
  };

code

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";
import {
  addDoc,
  getDocs,
  deleteDoc,
  doc,
  collection,
  updateDoc,
} from "firebase/firestore";
import { db } from "../firebase";

// 모든 태스크 가져오기
export const getAllTasks = createAsyncThunk(
  "tasks/getAllTasks",
  async (userId) => {
    const taskCollection = await getDocs(collection(db, "tasks"));
    const allTasks = [
      ...taskCollection.docs.map((doc) => ({ ...doc.data(), id: doc.id })),
    ].filter((task) => task.userId === userId);
    return allTasks;
  }
);

// 태스크 추가하기
export const addTask = createAsyncThunk("tasks/addTask", async (data) => {
  const result = await addDoc(collection(db, "tasks"), {
    userId: data?.userId,
    task: data?.task,
    initialTime: data?.initialTime,
    pausedTime: "",
    createdAt: data?.createdAt,
    status: data.status,
  });
  const taskId = result.path.split("/")[1];
  return { ...data, id: taskId };
});

// 태스크 삭제하기
export const deleteTask = createAsyncThunk(
  "tasks/deleteTask",
  async (taskId) => {
    console.log(taskId);
    await deleteDoc(doc(db, "tasks", taskId));

    return taskId;
  }
);

// 멈춘 태스크 추가하기
export const putTask = createAsyncThunk("tasks/putTask", async (task) => {
  if (task.pausedTime !== "") {
    await updateDoc(doc(db, "tasks", task.id), {
      pausedTime: task?.pausedTime,
      status: task.status,
    });
  }
  return task;
});

// 완료된 태스크 추가하기
export const completedTask = createAsyncThunk(
  "tasks/completedTask",
  async (task) => {
    if (task?.status === "complete") {
      await updateDoc(doc(db, "tasks", task.id), {
        status: task?.status,
      });
    }

    return task;
  }
);

// 모든 'complete task' 삭제하기
export const allClear = createAsyncThunk(
  "tasks/allClearTask",
  async (userId) => {
    const taskCollection = await getDocs(collection(db, "tasks"));
    const tasksToDelete = taskCollection.docs.filter(
      (doc) => doc.data().userId === userId && doc.data().status === "complete"
    );

    const deletePromises = tasksToDelete.map((task) =>
      deleteDoc(doc(db, "tasks", task.id))
    );
    await Promise.all(deletePromises);

    return tasksToDelete.map((task) => task.id);
  }
);

const initialState = {
  tasks: [],
  loading: false,
  error: null,
};

const tasksSlice = createSlice({
  name: "tasks",
  initialState,
  extraReducers: (builder) => {
    builder.addCase(getAllTasks.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(getAllTasks.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = action.payload;
    });
    builder.addCase(getAllTasks.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(addTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(addTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks.push(action.payload);
    });
    builder.addCase(addTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(deleteTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(deleteTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => task.id !== action.payload);
    });
    builder.addCase(deleteTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(putTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(putTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.map((task) =>
        task.id === action.payload.id ? action.payload : task
      );
    });
    builder.addCase(putTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(completedTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(completedTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => task.id !== action.payload.id);
      window.alert("Task saved successfully 😄");
    });
    builder.addCase(completedTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(allClear.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(allClear.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => !action.payload.some(task.id));
    });
    builder.addCase(allClear.rejected, (state) => {
      state.loading = false;
    });
  },
});

export default tasksSlice.reducer;

나에게 필요한 데이터의 프로퍼티를 명확히 함으로써, db의 분산을 줄여, 효율적인 상태 관리를 수행하겠다는 것이 핵심이다.

✅ 예외처리

1. 회원 가입에 필요한 예외처리를 util로 분리 ✍️

code

export const validateUsername = (username) => {
  const usernameRegex = /^[a-zA-Z0-9_]{3,16}$/;
  return usernameRegex.test(username)
    ? ""
    : "3자 이상 16자 이하, 영문자, 숫자, 밑줄(_)만 허용됩니다.";
};

export const validateEmail = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email) ? "" : "잘못된 이메일 형식입니다.";
};

export const validatePassword = (password) => {
  const passwordRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  return passwordRegex.test(password)
    ? ""
    : "최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 포함해야 합니다.";
};

2. 로그인 여부에 따른 라우팅 예외 처리 ✍️

code

import { useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";

const usePreventAuth = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  useEffect(() => {
    if (JSON.parse(localStorage.getItem("user"))) {
      navigate("/home");
      if (pathname === "/archive") {
        navigate("/archive");
      }
    } else {
      if (pathname === "/home" || pathname === "/archive") {
        navigate("/");
      }
    }
  }, []);
  return;
};

export default usePreventAuth;

3. loading을 통한, (API 통신 전) Button disabled 처리 ✍️

code

 <Button disabled={loading} onClick={handleSignIn}>
            Sign In
          </Button>

code

const Button = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 1rem 0;
  margin: 1rem;
  font-size: 1.5rem;
  color: black;
  background: white;
  border: 2px solid white;
  border-radius: 50px;
  box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
    }
  }

  &:hover {
    background: #ffffff;
    color: black;
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.2);
  }
  &:disabled {
    background-color: gray;
  }
`;

4. .env를 통한 환경변수 처리 ✍️

code

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: "task-tracker3.firebaseapp.com",
  projectId: "task-tracker3",
  storageBucket: "task-tracker3.appspot.com",
  messagingSenderId: "977756658453",
  appId: "1:977756658453:web:588402c61ac23db27c671c",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app); // Initialize storage

export { auth, db, storage, onAuthStateChanged };

✅ 회고

스무 살이 갓 넘었을 때 잠깐 파리바게뜨에서 아르바이트를 한 적이 있다. 한 할머니가 따듯한 물을 줄 수 있냐고 여쭤보셔서 뜨거운 물에 찬물을 좀 타고 있었는데, 실장님이 찬물을 왜 붓냐고 호통 아닌 호통을 쳤다. 그런데 할머님은 웃으셨다. '뜨거운' 물이 아니라, '따듯한' 물을 달라고 했으니 내가 맞다고 말씀하셨다. 물론 실장님도 사과하셨다.

감동은 디테일에서 온다. 재밌는 점은, 그 디테일이라는 것은 대단한 판단이 아니라 세심한 관찰로부터 얻을 수 있다. 머리털 빠질 때까지 쳐다본 프로덕트는 퀄리티가 좋을 수밖에 없고, 아마도 사용자에게 감동으로 다가갈 것이다. 물론 그렇지 않더라도 당연히 많이 관찰해야 된다. 기본이니까. '부지런함'에 대한 경각심이 이번 프로젝트의 최대 교훈 아니었을까.