프로젝트 시작과 후 함께 고민해야 할 것들

그룹웨어 리뉴얼을 위한 프로젝트를 진행하면서 1차 개발에서 아쉬웠던 점을 보완하고자 했다. 개발 기한이 짧다는 이유로 일단 우다다 개발하는 방법이 결국엔 수정과 보완에 시간을 더 쓴다는 것을 경험하고, 2차에서는 시간이 걸리더라도 개발 스펙을 협의하고 수정 방향(리팩토링)도 방향성에 대한 논의가 필요하다고 생각했다.

주요 라이브러리

프로젝트의 특성, 러닝 커브, 유지보수 등을 고려해 사용할 라이브러리를 선택한다. 라이브러리의 특징을 정확하게 알고 다른 것과 비교하여 선택한 이유가 분명해야 한다.

*AntD: 관리자 페이지의 table, form 등에 일부 사용“*MUI: 이모티콘 사용 |

리팩토링 항목

프로젝트 개발 후에는 리팩토링이 필요하다. 프로젝트의 일관성과 향후 유지보수를 위해 항목별 체크리스트를 만들어 각자 맡은 부분에 대한 수정을 진행한다.

• 폴더 구조

  • 공통 컴포넌트(함수)는 2군데 이상 사용하는 컴포넌트(함수) 일 경우를 나타냄

      - assets
          - styles // 공통 스타일 선언
          - images
      - components
          - common // 공통 컴포넌트
          - Layout // 공통 레이아웃
          - ...
      - domain
          - Deli
            - comonents // 도메인 관련 컴포넌트
            - hooks // react-query hook
            - Deli.tsx
          - ...
          - index.ts
      - store // recoil
          - ui 관련(클라이언트) 상태만 관리
      - hooks // react-query 공통 함수
      - utils // 공통 함수
      - constants // 상수
      - pages // router 연결
      - types // 타입 선언
    

• 도메인 전용 컴포넌트는 도메인 안에 컴포넌트 폴더에 추가한다.(응집도를 높이기 위해)

• Naming Conventions

  • 컴포넌트의 이름은 Pascal Case를 사용하여 작성한다.

  • 컴포넌트가 아닌 것들은 Camel Case를 사용하여 작성한다.

  • style 파일 이름은 컴포넌트 이름과 동일해야 한다.

  • string props에는 Curly Braces를 사용하지 않는다.

  • JSX에서 Javascript Code를 제거한다.

      // Bad
      return (
        <ul>
          {posts.map((post) => (
            <li
              onClick={(event) => {
                console.log(event.target, "clicked!");
              }}
              key={post.id}
            >
              {post.title}
            </li>
          ))}
        </ul>
      );
    
      // Good
      return (
        <ul>
          {posts.map((post) => (
            <li onClick={onClickHandler} key={post.id}>
              {" "}
              {post.title}{" "}
            </li>
          ))}
        </ul>
      );
    

  • 컴포넌트에 Chidren이 없는 경우 자체 닫기 태그를 사용한다. 가독성을 높여준다.

• Bug Avoidance

  • undefined나 null 체크는 Optional Chaining을 사용한다.

  • 비동기 호출 등의 이유로 아직 값이 넘어오지 않았을 때 구조분해할당 하는 경우 에러가 발생할 수 있다.

      // Bad
      const content = undefined;
      const { item } = content; // Uncaught TypeError: Cannot destructure property 'item' of 'content' as it is undefined.
    
      // Good
      const content = undefined;
      const { item } = content || {};
      console.log(item); // undefined
    
      const content = undefined;
      const { item } = { ...content };
      console.log(item); // undefine
    

  • 불필요한 console.log()를 제거한다.

• 함수 사용

  • 화살표 함수, 함수 표현식 사용 이 부분은 협의가 필요할듯

  • 서버호출함수나 리액트 쿼리 네이밍 통일하기

  • 순수함수

• 상태관리

  • 불필요한 State Lifting과 Props Drilling을 피한다. 부모 컴포넌트에서 비동기 로직을 굳이 처리해줄 필요없다.

• import/export

  • import 순서 지정

  • export할 각 폴더에 대해 index.ts 사용(가져올 때 이름이 반복되지 않음)

• 공통 컴포넌트 만들기

  • modal 상태 및 callback함수를 props driling을 사용하지 않도록 개발

  • antd에서 에러 유발하는 컴포넌트가 어떤 것들이 있을까요?

• Typescript

  • any타입으로 되어있는 것 타입 지정하기

• 로직

  • 등록이나 수정, 삭제는 서버에 사이드 이펙트를 발생시키는 기능은 Alert팝업을 띄워서 확인 작업을 한다.

  • 폼 등록이나 수정의 경우 유효성 검사를 추가한다.

• datePicker

  • ant-design 의 datePicker은 moment를 사용하고 있으므로, dayJs를 사용하여 커스텀 한 컴포넌트를 적용한다.

    • moment - 지원 종료 및 패키지 용량이 큼

    • dayjs - 패키지 용량 작음 계속 지원 중