Portfolio

💻 프로젝트 기획 및 요구사항 일치 여부

요구사항이 조금 애매한(?) 것들이 있어서, 프로젝트에 맞게 잘 녹여내고 있다.

예시) 사용자는 가입자 목록을 볼 수 있습니다. > 사용자를 검색하고, 팔로잉을 하고, 팔로잉을 하면 관련 사용자를 볼 수 있또록

전체적으로 요구사항에 맞는 페이지들과 UI를 잘 구현해주셨다.

🧐 코드 구조 및 품질

메모이제이션 적극 활용해보기

https://yceffort.kr/2022/04/deep-dive-in-react-rendering

컴포넌트의 역할을 최소화 하기

custom hook을 최대한 많이 만들어서 써보는 것도 좋은 방법 중에 하나


const useTime = (timestamp: Post['createdAt']) => {
  return useMemo(() => {
    const currentTime = dayjs();
    const createdAt = dayjs(timestamp);

    const daysDiff = currentTime.diff(createdAt, 'day');
    const hoursDiff = currentTime.diff(createdAt, 'hour');
    const minutesDiff = currentTime.diff(createdAt, 'minute');
    const secondsDiff = currentTime.diff(createdAt, 'second');

    if (daysDiff > 0) {
      return `${daysDiff}일 전`;
    } else if (hoursDiff > 0) {
      return `${hoursDiff}시간 전`;
    } else if (minutesDiff > 0) {
      return `${minutesDiff}분 전`;
    }

    return `${secondsDiff}초 전`;
  }, [timestamp]);
};

타입 적극적으로 만들어서 사용해보기

나중에 코드를 한 번에 바꿀 때 편리하다.

React-Query 관련

잘 하고 있는 것 같음.
로그인 / 로그아웃 / 새로고침 했을 때 어떻게 인증할 것인지 정도만 고려해보면 될 것 같음

🛠️ 기능 구현 및 특징

지금은 기능이 구현 되었다기보단, 주로 UI만 만들어놓은 상태라서 특별한건 딱히 안 보임

😃 사용자 경험 (UI/UX)

캐로셀에 여백 신경쓰기

오른쪽은 여백이 UI를 가리지 않는데, 왼쪽은 가린다.

나머지는 대체로 깔끔하게 잘 되어있음

디자인이 이쁨

🗓️ 일정 관리

gitbub project에서 다양한 항목을 만들어서 관리해보자.

이슈에다 직접 작성할 수도 있지만, 칸반보드에서 한 눈에 확인하기 편하도록 하면 더 좋다.

👥 협업 및 커뮤니케이션

지금 매우 잘 하고 있다고 느껴짐

문서 관리도 잘 하고 있고
커뮤니케이션 규칙도 정해서 잘 하고 있고
칸반보드도 잘 관리하고 있고
코드리뷰도 잘 되고 있고
약간 조금 더 해보면 좋을건, 코드리뷰할 때 데모 영상 같은거 추가해서 컨텍스트를 파악하기 쉽게 전달하기

당사자들이 판단하기를

아직 안 싸웠음 → 잘 하고 있다고 느끼는 중

💡 기타

주기적으로 배포하기

develop 브랜치에 머지가 되면, 자동으로 배포해주기
github actions 활용


name: Deploy to Vercel

on:
  push:
    branches:
      - main # 이 부분을 원하는 브랜치 이름으로 수정

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install -g vercel

      - name: Login to Vercel
        run: vercel login ${{ secrets.VERCEL_TOKEN }} # Vercel 토큰을 GitHub Secrets에 설정해야 합니다.

      - name: Deploy to Vercel
        run: vercel --prod # 원하는 Vercel 배포 옵션으로 변경할 수 있습니다.

PR을 올릴 때, PR 올린 다음에 푸시할 때

type 검사
lint 검사
기타 등등

husky 같은 git hook을 이용해서 commit 컨벤션 등을 검사하기

git에 stage에 있는 파일들을 커밋 할 때 lint, tsc 등 검사하기
커밋 메세지도 검사할 수 잇음

[준일팀] 16주차 커피챗

💻 프로젝트 기획 및 요구사항 일치 여부

🧐 코드 구조 및 품질

🛠️ 기능 구현 및 특징

😃 사용자 경험 (UI/UX)

🗓️ 일정 관리

👥 협업 및 커뮤니케이션

💡 기타