[회고] chap-chap

🔗 Links

github
figma

프로젝트 개요

chap-chap 은 다양한 레시피를 검색할 수 있는 사이트입니다

공공 데이터 포털의 OpenApi 식품의약품 안전처 조리식품레시피 와 🥜Peanut님의 백엔드 Api를 활용하였습니다

총 3명이 참여하였고 2024-01-19 ~ 2024-01-30 총 12일 동안 진행하였습니다
나머지 기간에는 배포 과정 중 맞닥뜨린 자잘한 오류들을 수정하였습니다

---

역할 분담 및 목표

역할 분담 방식

♣️ Planning Poker
"내가 이 페이지를 진행한다면 어느 정도의 시간이 걸릴 것인가, 나에겐 어떤 난이도인가"를 두고 가장 적게 배팅한 사람이 해당 프로젝트를 진행

나의 역할

회원 가입 및 로그인 & 검색 페이지

목표

1. 적극적인 협업

• Linear
• github Pull requests + Issues 적극 활용
• JSDocs

2. 완성보다는 "성장"에 집중, 놓고온 부분들 보강!

그 전에 프로젝트를 할 때는 목표가 완성에 치우쳐져서,
시간이 오래 걸릴 거 같은 부분이나 새로운 스택들을 시도하지 못했습니다.
하지만 이번에는 팀원 분들과의 합의 하에 성장과 협업에 초점을 맞춰 프로젝트를 진행하였습니다.

3. 새로운 기술 스택 도입

• react-hook-form + zod
• typescript + react
• react query
• tailwind css
• lottiefiles

---

목표 달성 여부 및 성과

1. 협업 ✅

리니어를 사용하여 백로그, 이슈, 리뷰가 필요한 항목 등 진행사항들을 한 눈에 파악하여 보다 직관적이고 효율적으로 프로젝트를 진행하였습니다

Github Pull Request시 모든 조원들이 리뷰에 적극적으로 참여하는 모습입니다

이 과정을 통해 불필요한 주석을 삭제하거나, 본인이 진행하지 않은 파트나 기능에 대한 내용을 리뷰하며 프로젝트 이해도를 높일 수 있었습니다

일부 내용 캡쳐

PR Template을 활용하여 체계적인 리뷰를 진행하였습니다

JSDocs를 활용하여 직접만든 hook함수를 문서화하였습니다

github issuess를 활용하여 데일리스크럼을 작성하고 댓글로 매일 회고를 하였으며,
조원들과 issue를 공유하고 문서를 통한 간단한 회의도 진행했습니다

2. 성장 ✅

🐣 그 전 프로젝트에서 하고 싶었지만 시간 관계상 하지 않았던 애니메이션, 끝까지 잡고 해봤습니다!

• 회원가입 <-> 로그인 폼전환 애니메이션 및 lottifiles활용한 로딩 애니메이션

• 검색 input 애니메이션

3. 새로운 기술 스택 도입 ✅

- react hook form + zod

typescript를 기반으로하는 강력한 스키마 및 유효성 검사 라이브러리인 zod를 RHF와 결합하여 비동기적으로도 유효성 검사를 할 수 있었습니다

import { z } from 'zod';
import { REGEXP } from './regexp';

export const SignUpSchema = z
    .object({
        nickname: z
            .string()
            .nonempty('별명을 입력해주세요.')
            .min(2, { message: '두 글자 이상 여덟 글자 이하로 입력해주세요' })
            .max(8, { message: '두 글자 이상 여덟 글자 이하로 입력해주세요' }),
        userId: z
            .string()
            .nonempty('아이디를 입력해주세요.')
            .regex(REGEXP.userId, { message: '4자리 이상 10자리 이하의 영문자 또는 숫자로 입력해주세요' }),
        password: z
            .string()
            .nonempty('비밀번호를 입력해주세요.')
            .regex(REGEXP.password, { message: '8자리 이상 16자리 이하의 영문자와 숫자로 입력해주세요' }),
        checkPw: z.string(),
    })
    .refine((data) => data.password === data.checkPw, {
        path: ['checkPw'],
        message: '비밀번호가 일치하지 않습니다',
    });

export type SignUpType = z.infer<typeof SignUpSchema>;

export const SignInSchema = z.object({
    userId: z.string().regex(REGEXP.userId, { message: '4자리 이상 10자리 이하의 영문자 또는 숫자로 입력해주세요' }),
    password: z.string().regex(REGEXP.password, { message: '8자리 이상 16자리 이하의 영문자와 숫자로 입력해주세요' }),
});

export type _SignInType = z.infer<typeof SignInSchema>;

export type SignInType = _SignInType & {
    token: string;
};

z.infer을 통해 정의한 스키마를 바탕으로 간편하게 타입을 추론하고 확장합니다.
테스트하기에듀 용이하고, 오류 메세지도 명확한 라이브러리로 장점이 많습니다!

- react + typescript

타입스크립트를 도입하여 타입 안정성을 높이고 코드를 문서화했습니다
+타입이 잘 정의된 경우엔 리팩토링 과정에서의 런타임 오류가 최소화되는 이점이 있습니다

- react-query

리액트 기반의 상태 및 데이터 관리 라이브러리인 react-query를 활용하여
데이터를 캐싱하고 데이터의 업데이트와 변경을 유연하게 하였습니다
타입스크립트 사용자를 위한 타입 지원이 우수한 리액트 쿼리를 사용하여, 코드의 안정성을 높였습니다
커스텀 훅을 만들어 로직을 모듈화하고 재사용성을 높였습니다

---

어려웠던 점 & 알게 된 점 & 개선 방안

1. 협업하는데 생각보다 많이 들었던 시간

이렇게까지 진심으로 협업하는 것이 처음이라 pr template도 만들고,
리니어 사용법도 익히고, git issues및 pr을 활용하는 것이 익숙치 않았습니다.
jira도 했다가 리니어와 둘 중 하나만 사용하는 게 좋을 거 같아서, 엎기도하고...@

그래서 리소스가 낭비되었고 시간 부족으로 몸이.. 무리를 했습니다

처음이라 익숙치 않아서 그랬던 것이니, 다음에는 더 잘 할 수 있을 거 같습니다.
이렇게 협업을 하면 저도 조원들도 얻어가는 것이 많고, 실제로 버그를 미리 발견하기도 하여 유지보수나 리팩토링하는 시간이 줄어드는 이점이 있어 좋다고 생각합니다.

2. 익숙치 않았던 Api 사용 및 비즈니스 설계 부족

이번 프로젝트를 하는데에 있어서 백엔드 Api에 대한 이해도나 분석이 부족하여,
실제로 개발을 진행하는 데에 구현이 안되는 기능을 구현하려다 시간을 낭비하기도 하였고, 불러오는 과정이 순탄치 않았던 거 같습니다.

함께 작업을 했던 조원 Amy님과 이를 극복하기 위해 다시 한 번 프로젝트를 진행할 예정입니다.
(설계를 아예 하루 날 잡고하여 input과 output을 예상해보는 작업)

---

마무리

좋은 협업문화를 함께 만들어준 조원들에게 너무 감사하고,
처음 사용하는 라이브러리에 익숙해지느라 시간이 걸림을 양해를 구했을 때,
너그러이 받아줘서 고마웠습니다!

같이 밤새고 고민하는 조원들이 있었기에,
막히고 답답했던 순간에도 멘탈을 잡고 할 수 있었던 거 같습니다.

다음 프로젝트 진행 시에는 개선 방안을 세워놨으니 조금 더 탄탄하게 틀을 잡고,
아쉬웠던 점들을 극복하여 한층 더 완성도있는 프로젝트를 만들어내고 성장하고 싶습니다!