Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

프로젝트 전반적으로 리팩토링을 진행한다. #365

Open
compy-ryu opened this issue Sep 7, 2022 · 15 comments · Fixed by #489
Open

프로젝트 전반적으로 리팩토링을 진행한다. #365

compy-ryu opened this issue Sep 7, 2022 · 15 comments · Fixed by #489
Assignees
@DomMorello @compy-ryu
Labels
front-end 프론트엔드 관련 리팩토링 코드 리팩토링

Comments

@compy-ryu
Copy link
Collaborator

  • 프로젝트 전반적으로 리팩토링을 진행한다.
  • 리팩토링은 페어 프로그래밍으로 진행한다.

리팩토링 순서

  • 프로젝트 세팅 (웹팩, TS 등)
  • 범용 컴포넌트
  • 범용 Hooks
  • API 레이어
  • 서비스 Hooks
  • 페이지 컴포넌트
@compy-ryu compy-ryu added front-end 프론트엔드 관련 리팩토링 코드 리팩토링 labels Sep 7, 2022
@compy-ryu
Copy link
Collaborator Author

compy-ryu commented Sep 8, 2022 •
edited
Loading

콤피

  • useDeboundce 리팩토링
  • useEffect 제거 => ErrorBoundary 사용 영역
  • 모킹 필수 값 체크 함수 추가
  • getChildComponent 함수 유틸리티
  • React Query Custom Retry & ErrorBoundary 무한 루프
  • cn('question" 제거
  • Text 컴포넌트 리팩토링
  • Profile Container Children 필수 처리
  • keyPress 주석 제거

돔하디

  • SmallProfileCard 컴포넌트 > Profile 컴포넌트로 전환
  • flex-container column 제거 후 FlexContainer로 변경
  • grid-template: row 45% 45%; 제거
  • 템플릿 API URL 상수 처리
  • FieldSet 컴포넌트 합성 컴포넌트 전환
  • line-height %로 변경
  • 컴포넌트에서 propTypes 일괄 제거
  • 닉네임 변경 쿼리 무효화 처리
  • 닉네임 변경 시 유효성 검사 영역 분리
  • export interface ComponentNameProps 컨벤션 통일

최적화 진행 시

  • 메인 레이아웃 상단 헤더 프로필 이미지 없을 때의 이미지 최적화 처리

@compy-ryu
Copy link
Collaborator Author

  • 페이지 라우팅 처리 부분 리팩토링 진행하기

@compy-ryu
Copy link
Collaborator Author

  • 스토리북 jsx => tsx로 전환하기

@compy-ryu
Copy link
Collaborator Author

  • ModalProvider 리팩토링하기

@compy-ryu
Copy link
Collaborator Author

  • 디렉토리 구조 간소화하기 ❤️

@compy-ryu
Copy link
Collaborator Author

  • 프로젝트 빌드 젠킨스에서 github actions으로 위임

@compy-ryu
Copy link
Collaborator Author

compy-ryu commented Sep 15, 2022 •
edited
Loading

  • 컴포넌트 Container의 className은 component-{컴포넌트 이름}과 같이 지정

브라우저에서 DOM 검사 시, 어떤 컴포넌트의 스타일인지 빠르게 확인할 수 있도록.

@compy-ryu
Copy link
Collaborator Author

compy-ryu commented Sep 15, 2022 •
edited
Loading

  • 테.스.트 코.드 🥸

E2E -> Cypress / Component -> Cypress || React Testing Library

@compy-ryu
Copy link
Collaborator Author

  • 성능 & 로딩 시간 최적화

@compy-ryu
Copy link
Collaborator Author

  • Storybook 오류 해결하기

@DomMorello
Copy link
Collaborator

DomMorello commented Sep 23, 2022 •
edited
Loading

  • 각종 입력값에 대한 프론트엔드 web 표준 일괄 적용 및 validator 함수 적용

@DomMorello
Copy link
Collaborator

DomMorello commented Sep 23, 2022 •
edited
Loading

  • 반복되는 Item 렌더링 memo 적용해서 렌더링 최적화

@DomMorello
Copy link
Collaborator

  • useEffect 사용시 첫번째 매개변수 콜백함수를 function somefunc() {}와 같이 유명함수로 컨벤션 통일 -> 무슨 일을 하는 함수인지 명시적으로 하기 위해

@compy-ryu
Copy link
Collaborator Author

  • 반복문 들어가는 값 memo 처리

@compy-ryu
Copy link
Collaborator Author

  • Optimistic Update 처리 커스텀훅 분리

@DomMorello DomMorello linked a pull request Sep 29, 2022 that will close this issue
ReviewFormEditorPage 합성 컴포넌트로 리팩토링 #489
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DomMorello DomMorello

@compy-ryu compy-ryu

Labels
front-end 프론트엔드 관련 리팩토링 코드 리팩토링
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

ReviewFormEditorPage 합성 컴포넌트로 리팩토링 woowacourse-teams/2022-review-duck
2 participants
@DomMorello @compy-ryu