HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💟
지은팀 Programmers Study
/
🚀
지은 1팀
/
🐳
리팩토링 - 지금은 리팩토링중
🐳

리팩토링 - 지금은 리팩토링중

💡
회의 하는날: 월, 금 밤 10시
 

📍JIRA

 

아젠다


윤호
 
윤
회의록
20220204
Feb 4, 2022
20220205
20220208
 

자료


📑  새로운 API 명세서 by 윤호
📑
Jira 사용법 by 윤

기록


yarn 패키지 버전업
리팩토링 중간 회고

Rules


깃허브 컨벤션
브랜치 : wc-31/refactor/내용
PR : [WC-31] refactor: 내용
 
  • 컴포넌트 리팩토링 시(또는 그냥 가능한 것들 있으면) 족족 새로 만든 컴포넌트 폴더에 이동시킨다
  • 컴포넌트 폴더의 index를 컴포넌트 이름으로 바꾸고, 모아서 export하는 부분에도 변경한다
  • icon사용이 필요한 경우 기존의 icon컴포넌트가 아닌 mui에서 import해서 사용한다
  • HomePage는 리팩토링 들어가기 전에 상의한다 - 겹치지 않도록!
  • merge는 스쿼시머지로 한다
  • 코드는 최대한 컴포넌트로 분리하고 재사용, 리팩토링하기 좋은 클린 코드로 작성한다
  • 컴포넌트는 순수하게 작성한다.
    • 하위 컴포넌트일수록 순수하게 자신의 본연의 기능만 구현한다.
    • 상태와 동작은 상위 컴포넌트에게서 주입받는다.
      • 네트워크 요청은 상위 컴포넌트에서 하도록 한다.
      • 상태는 상위 컴포넌트에서 주입받는다.
  • 컴포넌트 폴더 안에 스토리파일까지 포함한다
 

Todo


0차 스프린트

<윤호>
API 서버 구현
패키지 버전업
디렉토리 구조 변경
타입스크립트로 프로젝트 전환
  • 후반작업
API 모듈 셋업
와플카드 생성 및 수정 모달 리팩토링
채팅카드 재구현
채팅 카드 api재연결 - home 연동
카드생성모달 api 재연결 - home 연동
Spinner 렌더링 지연
  • 굳이 렌더링 지연시킬 필요가 없어보임
 

 
<윤>
지라 문서화
지라 셋팅
지라 셋팅법 추가 문서화
라우팅 관련 리팩토링 - public, private컴포넌트 생성 및 적용 - 모달, 탭에 라우팅x - 상태를 기준으로 렌더링 - 라우팅은 페이지로만(4개)
회원가입 페이지 API 재연결
마이페이지 페이지 API 함수 작성 및 재연결
Home, Tab 컴포넌트 코드 정리 & 리팩토링
 
 
 
 
윤호
윤
홈
로그인
다른거
홈
홈
다른거

1차 스프린트

<윤호>
전역 상태 관리 리팩토링
1차: context
새로고침시 초기화 되는 이슈해결필요
2차: recoil
PlainWaffleCard를 상속받아 BasicWaffleCard 만들도록 코든간결화 시키기
서버에서 와플카드 반환하는 업데이트 순으로 변경하기
서버에서 특정 조건에서 좋아요 삭제 안되는 버그있는것 같은데 확인해보기 (test@test.com)
댓글 컨테이너 스크롤바 있도록 변경하기, 댓글 길이에 따라 댓글 높이 변경되는데 너무 길면 길이가 안맞는 현상 수정하기
새로고침시 와플카드가 유저정보를 인식하기는 하는데 좋아요 토글이 안되는 현상 해결
페이지컴포넌트 index가 아닌 페이지명으로 변경하기
API 명세서 수정하기 - 와플카드 반환, 좋아요 URL 변경
(서버) 유저 이름 변경후 댓글에 유저 이름 정보 변경 되도록 수정하기
(서버) 와플카드 삭제시 관련된 댓글 전부 삭제되도록 수정하기
채팅카드의 작성자 이름 가운데로 안맞는 버그 수정하기
재배포
 
2차 스프린트 (~0220)
윤-카드 슬라이드 애니메이션
3차 스프린트 (~0227)
윤 - 컴포넌트 ts전환
  • Atom
    • Text
  • Molecule
    • Tab
      ScrollGuide
      NoCardGuide
  • Organism
    • Header
      GuideSlider
      NameChangeModal
      PasswordChangeModal
  • Routes
    • PrivateRoute
      PublicRoute
      Router
  • Pages
    • GuidePage
      LoginPage
      SignUpPage
      NotFoundPage
  • Hooks
    • useToggle
      useClickAway
      useSessionStorage

Bugs


댓글 2번 달리는 경우가 있음 (윤호)
날짜도 좀 이상한 것 같다 (윤호)
로그인 안 한 사용자도 좋아요 누를 수 있다(근데 숫자는 안 바뀜) (윤호)
useHistory import시 불러오는 라이브러리에서 오류 (react-router → react-router-dom) (윤)
가이드 페이지 연결(윤)
Modal 외부클릭시 사라지게 수정(윤호)
홈페이지 사이드 여백 안생기도록 수정 (윤)
validator 제거 혹은 로그인 유틸 디렉토리로 변경(윤)
[모바일] 카드 생성 모달 상단부 잘림 (윤호)
이미지
notion image

전역상태관리


user
  • id
  • name
  • email
wafflCards
[모바일] 채팅창 하단부 잘림+상단부 높이 조절 (윤호)
이미지
notion image
[모바일] alert창 잘림 (윤호) → alert 컴포넌트 새로 만들기
이미지
notion image
[모바일] 전반적으로 세로 스크롤이 생김 (윤)
[모바일] 헤더 로고+아이콘과 탭의 폰트 사이즈 밸런스 조절 (윤)
 

Components


컴포넌트 구분 기준
  • atoms
    • 하나의 기능
    • 더 이상 나눠지지 않는 최소 요소
    • 재사용 가능한 것만
    • 하나의 태그
  • molcules
    • 하나의 역할 - 데이터를 표시하고 이벤트를 받을 수 있지만 “하나의 역할”만을 가진다.
    • atom의 그룹
    • 재사용 가능한 것만
  • orginizm
    • 하나의 요구사항 - 사용자에게 의미를 가지는 기능적 요구사항에 포함되는 경우에 해당되는 컴포넌트
    • atom+molcule+orginizm 모두 조합 가능한 섹션
    • 재사용 불가한 atom,mocule범위 내부 컴포넌트 포함
  • template
    • 단순히 레이아웃만
    • ex) Wrapper, Container
  • page
    • template과 orginizm 을 조합해서 구성
    • 서버 요청해 데이터를 받아 자식들에게 넘겨주는 곳
page
  • HomePage
  • SignupPage
  • LoginPage
  • MyPage
 
 
organism
  • WaffleCard
  • CardEditor (구 CardEditModal)
    • HashTagInput
    • EmojiPickerActiveButton
  • ChattingCard
    • CommentList
      • Comment
    • CommentEditor
  • NameChangeModal
  • PasswordChangeModal
  • CardsContainer
  • Header
molecule
  • Card
    • Empty
  • Modal
  • Spinner
  • EditBox
  • ToggleBox
  • ColorPalette
  • Tab
    • TabItem
  • Header
  • ScrollGuide
 
atom
  • Button
  • BackButton
  • Input
  • Spacer
  • Text
  • Icons
  • Portal