8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) #8

peacepiece7 · 2023-07-23T15:03:41Z

5 Toy project YOLO Wallet

프로덕트 소개

소개

YOLO Wallet은 사용자의 소비 현황을 기록 및 추적 할 수 있는 웹 어플리케이션입니다.

기간

2023.07.05 ~ 2023.07.23 (18일)

역할

박현준 (조장)	정태욱	백지욱	김진우
렌딩 페이지 지출내역 CRUD 지출내역 검색	총괄 github 관리 API 및 로그인 구현	켈린더 페이지 켈린더 구현 지출 내역 년, 월별 조회	차트 페이지 차트 구현 클라이언트 상태 관리

Link

YOLO Wallet 구경하기

YOLO Wallet Wiki

프로젝트 Github 저장소로 이동하기

Technologies & Tools

Front-end

Back-end

Deploy

페이지 구성

렌딩 페이지

렌딩 페이지 (로그인 전)	렌딩 페이지 (로그인 후)

켈린더 페이지

차트 페이지

DB Managment 페이지 (Sanity Lake)

다이어그램

회고

백지욱

제가 맡은 역할은 캘린더 페이지였습니다.

next.js를 처음 사용했던것도 있고 기본기가 부족해서 그런지

처음 구상했던거보다 많은걸 구현하지 못하였습니다.

구현을 하더라도 디자인적으로 깔끔 하지 못하게 구현못할껀 깔끔하게 포기했습니다.

또한 이것저것 시도하다가 라이브러리를 포기하지 못하고 사용하였습니다.

저희 조는 태욱님께서 서버를 따로 만들고 예시 api를 만들었다던지

좋은 코드 나쁜코드를 이야기 해주셨습니다.

토이프로젝트2는 많은걸 배워갈 시간이였다고 생각합니다

정태욱

좋았던 점

Headless CMS (Sanity), Next-Auth 사용

Headless CMS와 Next-Auth로 백엔드와 소셜 로그인 구현을 구현했다.

Headless CMS (Sanity)는 schema를 작성하는 방법과 GROQ라는 자체 쿼리언어가 직관적이라 문서를 join하는 것과 transaction 처리가 간단했다.

Next-Auth는 내부적으로 로그인에 필요한 인증을 모두 처리해주고,

서버에서 사용할 수 있는 getServerSession과 클라이언트에서 사용할 수 있는 useSession hook을 제공하기 때문에 간단하게 로그인을 구현 할 수 있었다.

Github Organization 활용

Github의 Organization, issue template, Wiki, Project 칸반 보드, Git flow를 활용해 프로젝트를 관리했다.

아쉬웠던 점

Optimistic UI

클라이언트에서 인터렉션한 작업이 많았고

react-query나 SWC를 사용해서 클라이언트에서 API 요청이 일어나면 일부 요청은 revalidate되지 않고

캐싱된 데이터를 Optimistic하게 제공함으로 API의 요청을 최소한으로 줄여보고 싶었는데

아쉽게도 페이지를 담당하지 않아서 적용해보지 못했다.

Server Component, Server Side Caching

Next.js 12의 pages directory를 사용했기 때문에 CSS 프레임워크나 라이브러리의 모든 소스를 클라이언트로 전송해야 했고,

Next.js 13의 fetch API로 프론트 서버에서 API의 호출 결과를 캐싱함으로 DB에 부하를 줄이고 요청 속도를 높이고 싶었는데 아쉽게도 12버전을 사용했기 때문에 적용하지 못했다.

박현준

Next.js를 처음 사용해 봄으로 인해 처음에 어색함이나 어려움을 겪었으나 사용하면 할수록 정돈된 느낌으로 너무나 편했습니다.
- Next.js에서는 Antd(라이브러리) 사용 시 Dynamic import를 통해 가져와야 함.

   import dynamic from 'next/dynamic'
    const DatePicker = dynamic(() => import('antd').then((lib) => lib.DatePicker), {
      ssr: false,
      loading: () => <div>loading...</div>
    })
    
    export default function DatePickerForm() {
      return <DatePicker />
    }

Github 이슈 기능 첫 활용으로 실시간으로 동료들 진행현황 확인 가능하며 확실하고 체계화된 팀 프로젝트가 가능했다.
폴더 구조를 좀 더 명확하게 이해할 수 있었다.
모르는 부분을 끝까지 혼자 해결해 보려고 노력해봤지만 그럼에도 모르겠는 오류가 생기거나 깃허브 관련해서는 아직 겁이 좀 많아서 태욱 님에게 정말 많은 도움을 받았고 정말 많은 공부를 할 수 있어서 좋았다.
팀원들끼리 필요한 요구사항을 전달하며 수정 작업을 하는 게 너무 좋았다.
컨벤션을 확실히 정해놓고 시작하는 첫 프로젝트인 만큼 여러 가지로 아쉬움도 많지만 그에 비례해 배운 점도 많았기에 다음에는 더 잘할 수 있을 거란 자신감도 조금은 생겼습니다.

iamidlek

고생하였습니다.
sanity와 next의 api, 구글 인증을 잘 활용하신 것 같습니다.
비슷한 부분에 대한 코멘트는 건너뛰었습니다.

총평

전체적인 디자인이나 사용에 있어서 잘 구현이 된 것 같습니다.
예외처리에 대한 부분도 고려된 것 같아서 좋은 것 같습니다.
sanity를 이용해 백엔드 영약까지 구현하신 것이 인상 깊었습니다.

기본 기능에서 버그가 많이 나고 있어서 아쉽습니다.
아쉬운 점에 대해서 이야기 드리면

기본 기능에서 버그가 있습니다.

지출 추가 시 두번 생성됨
달력에 지출이 잘 못 표기되는 버그(코멘트에 예시 적었습니다)
지출 수정 시 기존 추가 input에 값이 남습니다.

렌더링을 고려한 컴포넌트 분할이 조금 더 되었으면 합니다.
사용이 안되는 부분이 코드로 남아있는 부분이 아쉽습니다.

iamidlek · 2023-07-27T11:36:19Z

src/pages/chart/index.tsx

+  return (
+    <div className="container mx-auto  ">


chart page에 대해서 전체적으로
컴포넌트 분리가 필요해 보입니다.
불필요한 전체 렌더링이 일어나는 것 같습니다.

iamidlek · 2023-07-27T11:36:48Z

src/pages/chart/index.tsx

+  }
+
+  //////////////////////////////////
+  const chartBoxStyle = 'bg-white drop-shadow-lg w-full p-8 mb-8'


고정적인 값들이 보이는 것 같습니다.
컴포넌트 외부에 선언해도 좋을 것 같습니다.

iamidlek · 2023-07-27T11:40:42Z

src/pages/calendar/index.tsx

+  return (
+    <div className="flex max-w-[1200px] my-8 mx-auto">
+      {/* 달력 */}
+      <div style={{ flex: 2 }}>


스타일 주는 방식이 다른 것 같습니다.

iamidlek · 2023-07-27T11:43:21Z

src/pages/calendar/index.tsx

+    <div className="flex max-w-[1200px] my-8 mx-auto">
+      {/* 달력 */}
+      <div style={{ flex: 2 }}>
+        <Calendar


로직이 맞는지 확인해 볼 필요가 있을 것 같습니다.
(ex: 다음달로 표시되는 날짜에 현재 달에 쓴 내용이 표기되는 것 같습니다.)
(7월 5일 => 8월 5일에도 표기됨 실제 8월로 가면 표기 없어짐)

iamidlek · 2023-07-27T11:48:07Z

src/pages/index.tsx

+          <Button
+            //
+            htmlType="submit"
+            className="bg-white boder border-gray "
+            onSubmit={addExpense}
+            onClick={addExpense}
+          >


두번씩 생성되는 것 같네요.

iamidlek · 2023-07-27T11:54:47Z

src/utils/renderCalendarCell.tsx

+}
+// 반복문을 외부로 빼줘야함, 미리만든 객체를 먼스 객체로 전달  로딩 관련 훅스 만들어서 처리해야함
+// 훅도 따로빼면 좋음 ... 기능우선
+export const cellRender = (


사용되는 곳이 있을까요?

iamidlek · 2023-07-27T12:16:01Z

src/store/chartStore.ts

+    for (let i = 0; i < categories.length; i++) {
+      categoriesData[i] = { categorie: categories[i], totalAmount: 0 }
+
+      oneMonthCalender.map((data: Expense) => {


map의 리턴된 배열을 사용하지 않는 것 같습니다.
성능상 forEach가 적절할 것 같습니다.

iamidlek · 2023-07-27T12:38:19Z

src/store/chartStore.ts

+    set({ isExpensesLoding: true })
+    const res = await api(`/api/expenses/summary?period=${period}&userId=${userId}`)
+
+    let expenses: { [key in ExpensePeriod]?: ExpenseSummary[] } = {}


let으로 선언한 이유가 있을까요?

iamidlek · 2023-07-27T13:19:35Z

package.json

+    "@types/chart.js": "^2.9.37",
+    "@types/node": "20.4.0",
+    "@types/react": "18.2.14",
+    "@types/react-chartjs-2": "^2.5.7",
+    "@types/react-dom": "18.2.6",


devDependencies 에 있어야 할 것 같습니다.

peacepiece7 added 2 commits July 23, 2023 23:55

add project to foked repo

ddb8af9

docs : edit readme.md

7b6446f

peacepiece7 changed the title ~~Kdt5 m6 team8~~ 8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) Jul 23, 2023

iamidlek reviewed Jul 27, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) #8

8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) #8

peacepiece7 commented Jul 23, 2023 •

edited

Loading

iamidlek left a comment

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

iamidlek Jul 27, 2023

8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) #8

Are you sure you want to change the base?

8조 과제 제출 (박현준, 정태욱, 백지욱, 김진우) #8

Conversation

peacepiece7 commented Jul 23, 2023 • edited Loading

5 Toy project YOLO Wallet

프로덕트 소개

소개

기간

역할

Link

Technologies & Tools

Front-end

Back-end

Deploy

페이지 구성

다이어그램

회고

백지욱

정태욱

좋았던 점

아쉬웠던 점

박현준

iamidlek left a comment

Choose a reason for hiding this comment

총평

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peacepiece7 commented Jul 23, 2023 •

edited

Loading