HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기/
🐢
달리팀/
🏆
비드마켓 - 사이코/
♻️
리팩토링
♻️

리팩토링

📌 리팩토링 진행📌 추가할 신규 기능 목록📌 리팩토링 준비 (~8/22 월)📌 리팩토링 스프린트 1차 (8/23 화 ~ 9/5 월)📌 리팩토링 스프린트 2차 (9/6 화 ~ 9/19 월)📌 리팩토링 스프린트 3차 (9/20 화 ~ 10/3 월)📌 리팩토링 스프린트 4차 (10/4 화 ~ 10/17 월)
 

📌 리팩토링 진행

  1. 개인 일정을 고려하여 스프린트 단위(1주일)로 할 일 업무를 할당한다.
      • 내용이 겹치지않도록 하지만, 팀원 의사에 따라 업무를 사이좋게 나눠 진행
      • 구현하는 부분은 겹치지않게 (내용은 겹쳐도 코드작업이 겹치지않도록)
  1. 구현 및 리뷰 (PR : 문제점 → 개선할 내용 → 작업 후 결과)
  1. 매 스프린트마다 Github release-note 작성
 

📌 추가할 신규 기능 목록

  • 댓글 생성, 수정, 삭제 구현
  • 재입찰 구현
  • 입찰 수정, 삭제 구현
  • 게시글 수정, 삭제 구현
  • 재등록시 상품 관련 데이터를 등록 페이지에서 반영하는 작업 구현
  • (리팩토링 준비를 바탕으로 취합하여 필요 시 작성할 예정)
 
 

📌 리팩토링 준비 (~8/22 월)

  • 개선하려는 문제점을 최대한 자세히 작성할수록 좋습니다.
  • 공부가 필요한 부분은 rough하게 작성하셔도 무방합니다.
  • 상위 페이지의 안건 , 임시 목표 작성 페이지 를 참고하시면 작성에 도움되실 겁니다.
 
김재호
  • 꼭 본인이 개선하고 싶은 부분 (필수)
      • 코드
      react-query 관련 Hook 개선
      • api offset, limit 개선
      로그인 오류 및 개선, Refresh Token, access Token 관련
      • Safari 브라우저에서 로그인 했는데 뒤로가기해야 로그인되는 현상 (알아보기)
      페이지에 진입하여 로그인 사용자인지 판단하는 것이 잘못된 것 같다. 페이지 진입 전에 인증, 인가를 확인하도록 하는 방향으로 구조 개선
      달리멘토님 중간점검
      • 단순 page 이동이면 click 이벤트로 router.push하지 말고 next/link를 활용
      • 타입 단언 최대한 제거
      • 색상 좀 더 상수화
      • Type만 가져올때 참고
          • import type { QueryClient } from './queryClient'
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html
      사용자 경험
      뒤로가기로 페이지 전환되었을 때 스크롤 유지 기능
      다크모드 구현 → 샛별님께 디자인 요청
      Error 처리에 대한 사용자 인터렉션 만족도 높히기
      페이지 전환 및 인터렉션에 대한 로딩 처리
      알림 뱃지부분 어떻게 할지 고민
      작은 파트 + 문서
      메인페이지 onChange 개선 → 검색할때만 이벤트 일어날수있도록
      github releaseNote
      Notion 문서 정리 (특히 UI 기능명세서, 회의록 및 안건 관련)
      백엔드에게 요청
      메인, 검색에서 쓰이는 api의 processed false일때 진행중인 상품만 보이도록 변경 요청
  • 공부해서 리팩토링하고 싶은 부분 (선택)
      • 성능
      • 저도 lightHouse 점수 올려보고 싶어요
      • 이미지 가져오는거 무거워 보여요
      • 페이지별 전환이 느린 편이에요 (특히 처음접속하는 기기로는 매우 느린편)
      • 달리멘토님 중간점검
        • Next/Image 와 image태그의 차이 공부하기
        • seo관련 title, description, keyword, og, JsonLd 적용
          • https://studiomeal.com/archives/1103
          • 참고 라이브러리 https://github.com/garmeeh/next-seo
          • https://developers.google.com/search/docs/beginner/seo-starter-guide
      개발
      • S3 관련 프로세스 공부 (송희석님 특강에 의해 주입)
      • Stomp 관련 채팅 프로세스 공부 (송희석님 특강에 의해 주입)
      바탕색을 감지하여 반전된 색상을 구할 순 없을까요 → Header 아이콘 등에 적용예정
  • 참여할 수 있는 리팩토링 기간 (참고: AWS 11/15까지 지원)
    • 리팩토링이 가능한 부분이 있다면 끝까지 참여할 예정
김태욱
  • 꼭 본인이 개선하고 싶은 부분 (필수)
    • 작성
  • 공부해서 리팩토링하고 싶은 부분 (선택)
    • 작성
  • 참여할 수 있는 리팩토링 기간 (참고: AWS 11/15까지 지원)
    • 작성
나호석
  • 꼭 본인이 개선하고 싶은 부분 (필수)
    • 채팅 메세지 날짜에 맞게 분류하기
    • 채팅 헤더 토큰 적용
    • 스피너 분리하기
    • MainHeader 말고 page에 스피너 적용
    • 새로운 채팅이 왔을 때 채팅방 목록 갱신하기 (백엔드와 상의?)
  • 공부해서 리팩토링하고 싶은 부분 (선택)
    • 테스트 코드
    • 포르자 호라이즌5 자동차 경매? (UX, UI 백기선님 리뷰)
  • 참여할 수 있는 리팩토링 기간 (참고: AWS 11/15까지 지원)
    • ( ~ 무제한)
    • 평일: 8시 이후
    • 주말: all time (코테, 약속, 스터디(?) 일정 있을 때 말씀드릴게요)
황수경
  • 꼭 본인이 개선하고 싶은 부분 (필수)
      • 코드
      낙찰/입찰 로직 개선(재입찰, 입찰 취소 등)
      next/link 의 <Link> 태그 사용해서 전체적용
      • 혼자 적용해보았는데 router.push보다 훨씬 렌더링 속도가 빨라짐
      • 이유
          • [Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?
          본 게시글은 nextjs learn course와 공식문서 를 기반으로 작성되었습니다. 회사에서 Next.js를 사용해 프로덕션을 개발하고 있으면서도, 개념에 대해 두루뭉술하게만 알고있어서 누군가가 왜 사용하는지 물어보거나 세부 기능을 물어보면 선뜻 명확히 대답하기가 어려웠다. 공식 사이트에 들어가 여러차례 문서를 읽어 보았지만, 영어로된 딱딱한 문서가 제대로 읽힐리가 없.. 그런데 드디어 구세주 같은 문서를 접하게되었다!!
          [Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?
          https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
          [Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?
      next/Image 사용해서 프로젝트 전체 이미지 적용
      입찰 useForm사용 부분 onChange로 바로 validation 적용하도록 변경
      사용자 경험
      낙찰/입찰 시, 신고하기 로딩 적용
      상세 페이지 스켈레톤 적용(next/image loading처리)
      상세 페이지 상품 판매 지역 추가
      상세 페이지 이미지 색상 감지에 따른 아이콘 색 변경
      새 기능 도입
      댓글 기능 구현
      재입찰 기능 구현
  • 공부해서 리팩토링하고 싶은 부분 (선택)
      • API 사용 부분에 모두 react-query 적용시켜보고 싶음
      알림 실시간 통신!! 해보고 싶어욤
  • 참여할 수 있는 리팩토링 기간 (참고: AWS 11/15까지 지원)
    • 리팩토링이 가능한 부분이 있다면 끝까지 참여할 예정
    • 평일: 매주 목요일 14:00 ~ 17:00 스터디 예정
    • 사이코와 함께라면 평생 하고싶네요
 

📌 리팩토링 스프린트 1차 (8/23 화 ~ 9/5 월)

참고 : 프론트엔드 데브매칭 접수 ~25일 코테 27일
  • 김재호
      • react-query 무한 쿼리 Hook 중복코드 제거
  • 김태욱
    • 쉬려고했는데…
  • 나호석
      • 채팅방 채팅 메세지 위에 해당 날짜들 표시하기
      로그인 페이지 재진입시 로그인 버튼 렌더링 안되는 문제 수정
      채팅방 재접속시 웹소켓 연결 안되는 오류 수정
      Spinner 중복 코드 Loading 컴포넌트로 분리
  • 황수경
 

📌 리팩토링 스프린트 2차 (9/6 화 ~ 9/19 월)

참고 : 데브패스 코딩테스트 18일 14시~17시
  • 김재호
  • 김태욱
  • 나호석
      • 채팅메세지 버튼으로도 전송되도록 수정
      메인헤더 컴포넌트가 아닌 메인페이지에서 로딩 처리하도록 수정
  • 황수경
      • CardProduct와 svg파일 모두 next/image로 변경
      유저, 채팅, 알림, 채팅, 상품 상세, 신고하기 페이지 next/image로 개선
 

📌 리팩토링 스프린트 3차 (9/20 화 ~ 10/3 월)

참고 : 카카오 코딩테스트 25토 14시~19시
  • 김재호
      • svg 상수화 작업 (폴더구조 utils/constants/svg)
  • 김태욱
  • 나호석
  • 황수경
      • 단순 페이지 이동일 경우 router.push를 next/link로 개선
      링크 태그로 변경된 레이아웃 재적용
      App.js에 Loading 추가(상세페이지 로딩 적용)
 

📌 리팩토링 스프린트 4차 (10/4 화 ~ 10/17 월)

참고 : 서버 지원 종료 관련 회의 11월 18일 토요일 23시~24시
참고 : 서버 지원 종료 11월 15일 화요일
  • 김재호
      • Notion 문서 정리 (특히 UI 기능명세서, 회의록 및 안건 관련)
      검색 페이지 무한 렌더링 버그 수정
  • 김태욱
  • 나호석
  • 황수경
      • next/image blurImage 처리