🖐️ 프로젝트 소개

Taskify는 일정 관리 기능을 지원하는 웹 애플리케이션입니다.
초대 기능을 활용하여 다른 사용자와 일정 관리를 공유할 수 있습니다.
다른 사람들과 일정을 공유하여 성공적으로 Task를 해결할 수 있습니다.

📅 서비스 소개
🔥 Taskify 팀의 경험
🔧 프로젝트 구조
🧑 팀원소개

📅 서비스 소개

🍽️ 손 쉬운 대시보드 관리

📢 나만의 대시보드를 이름과 색상을 지정해서 생성할 수 있습니다.
📢 내가 생성한 대시보드를 자유롭게 넘나 들 수 있습니다.
📢 초대를 통해 대시보드의 멤버가 되면 해당 대시보드를 방문할 수 있습니다.

📒 자유로운 칼럼 생성과 할 일 생성

📢 해야할 일을 칼럼 별로 정리할 수 있습니다.
📢 담당자를 지정하여 누가 어떤 이슈를 작업하는지 관리할 수 있습니다.

🚗 손 쉬운 할 일 카드 이동

📢 직접 할 일을 수정하지 않아도 이동이 가능합니다.
📢 마우스 드래그로 할 일을 잡아서 원하는 컬럼에 놓아보세요!

⏬아래 링크를 클릭하시면 더 다양한 기능들을 만날 수 있습니다!⏬

⏩지금 Taskify 사용하러 가보기!⏪

🔥 Taskify 팀의 경험

🖥️ 서버 데이터의 상태 관리

Taskify 팀은 TanStack Query 라이브러리를 활용하여 전역적으로 서버 상태를 관리합니다. 이로 인해 Props Drilling을 방지할 수 있었고, 서버의 Promise 상태를 집약적으로 관리하여 보다 쉽게 API 흐름을 파악할 수 있도록 구현했습니다.

zod를 활용하여 API의 응답 스키마를 토대로 서버로부터 예상된 결과값을 가져오는지 검증하는 로직을 추가하여, 더욱 안전하게 코드를 작성했습니다.

📝 폼의 상태 관리

Taskify 팀은 Form의 상태를 집약적으로 관리하기 위해 React Hook Form 라이브러리를 사용했습니다. 해당 라이브러리를 통해 Form의 상태 추적을 용이하게 하고, 공통된 controller, uncontroller를 개발하여 다른 개발자들이 컴포넌트를 재사용하기 쉽게 구현했습니다.

Form의 Validation은 zod를 활용하여 Form 스키마로 작성하였고, 해당 스키마를 토대로 타입을 추출해냅니다.

👮 Route Handler로 인증 처리하기

외부 API의 응답 body로 받는 accessToken을 HttpOnly 쿠키로 적용할 수 있는 방법을 알고 계신가요?

Taskify 팀은 Next.js의 Route Handler를 통해 logout을 제외한 모든 API는 하나의 route handler를 직면하게 됩니다. 이 route handler가 클라이언트 대신 외부 API에 요청을 보내기 때문에 HttpOnly 쿠키를 설정할 수 있게 되는 것입니다. 이 덕분에, 외부 API의 노출을 최소화 할 수 있었고, HttpOnly 쿠키를 사용함으로써 보다 안전하게 토큰을 관리할 수 있었습니다.

🔙 로그인 상태에 따른 리다이렉트

클라이언트에서 로그인 상태에 따른 리다이렉트 구현이 왜 안좋은 지 알고 계신가요?

리액트 기반 프로젝트인 경우 useEffect를 통해 로그인 상태를 판단하게 되는데, 이렇게 구현될 경우 페이지 깜빡임 현상을 해결 할 수 없습니다. 또한, 보호된 페이지임에도 불구하고 노출을 피할 수 없습니다. 그리고 이것은 리다이렉트가 아니라 라우팅이라고 불러야 하는 것이 맞습니다. Taskify 팀은 이러한 현상을 해결하기 위해 middleware를 활용하여 로그인 상태를 판단합니다.

브라우저가 쿠키를 보내면 middleware가 해당 쿠키를 읽어서 로그인 유무에 따라 페이지 접속에 따른 리다이렉트를 반환합니다. 클라이언트가 아니라 서버에서 로그인 상태를 판단하는 것입니다.

✏️ Taskify 팀의 기록

⏬아래 링크를 클릭하시면 Taskify를 어떻게 만들었는지 알 수 있습니다.⏬

⏩Taskify 팀의 Notion 구경하기⏪

🔧 프로젝트 구조

⚙️ API 흐름 도식화

🗂️ 디렉토리 구조

📂src
 ┣ 📜middleware.ts
 ┣ 📂apis
 ┃ ┣ 📂auth
 ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┣ 📜queries.ts
 ┃ ┃ ┗ 📜types.ts
 ┃ ┗ ...
 ┣ 📂app
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┣ 📂(after-login)
 ┃ ┃ ┣ 📂mydashboard
 ┃ ┃ ┗ ...
 ┃ ┗ 📂(before-login)
 ┃   ┣ 📂(auth)
 ┃   ┃ ┗ 📂login
 ┃   ┗ ...
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂auth
 ┃ ┣ 📂ui
 ┃ ┗ ... 
 ┣ 📂constants
 ┣ 📂fonts
 ┣ 📂hooks
 ┣ 📂stores
 ┣ 📂types
 ┃ ┗ 📜common.ts
 ┗ 📂utils

💎 주요 기술 스택

기술 이름	선정 이유
	컴포넌트 기반 설계 방식인 리액트 라이브러리를 활용하여 SSR과 CSR를 혼합해서 사용하기 위해 선정한 프레임워크입니다.
	Props 타입 지정으로 인한 런타임 오류 감소, vscode 자동 완성 기능 등 타입 안정성을 통한 코드 품질 개선을 위해 선정했습니다.
	UI 상태와 서버 상태를 분리하고, api 데이터에 대한 Promise를 집약적으로 관리하기 위해 선정했습니다.
	전역 UI 상태를 관리하기 위해 선정했습니다. 현재 프로젝트에서는 모달의 상태를 zustand로 관리합니다.
	axios instance의 interceptor 기능을 통한 중복 코드 최소화 등을 위해 선정했습니다.
	폼의 상태를 집약적으로 관리하기 위해 선정했습니다.
	폼의 유효성 정의 및 타입 추출이 용이하고, API request 타입정의 및 safeParse()메소드를 통한 API 응답 데이터 타입 검증을 하기 위해 선정했습니다.
	유틸리티 기능을 선언형으로 작성함으로써 코드 가독성을 향상시키기 위해 선정했습니다.
	유틸리티 클래스 사용으로 클래스 네이밍 고민 감소, 디자인 시스템이 미흡 시 유연한 대응이 가능하기에 선정했습니다.
	Next.js와의 완벽한 통합 및 소규모 웹 애플리케이션에서 무료 플랜을 제공해주기 때문에 선정했습니다.

🧑 팀원 소개

김도균	김찬기	이석찬	최성락