먼저, 리팩토링이 무엇이고 왜 필요한지에 대해 정리해보았습니다.

리팩토링?

• 외부 동작에 변화없이 SW 내부 구조를 개선하는 과정.
• 기능 추가가 아닌 오로지 코드 구조 개선에 집중.
• SW를 더 이해하기 쉽고 수정하기 용이하게 개선.
• 모든 것을 미리 생각하기보단 개발하며 지속적으로 좋은 디자인으로 개선.

리팩토링 필요성

• 디자인 개선: 중복 코드나 불필요한 임시 변수, 사용하지 않는 코드 등을 제거하고 정돈하면 유지 보수성이 향상됨.
• 가독성 향상: 코드를 이해하기 쉽게, 내부 구조를 명확하게 만들면 가독성이 향상됨.
• 버그 검출: 리펙토링 과정 중 숨겨진 버그를 발견할 수 있어 보다 코드가 견고해짐.
• 개발 속도 향상: 코드의 구조가 명확하고 간결해지면 협업이 원활해질 뿐만아니라 코드 수정 및 변경이 용이해져서 개발 속도가 향상됨.

리팩토링 필요 시기

• 삼진 규칙: 동일한 문제가 3번 반복된다면 리팩토링이 필요!
• 기능 추가: 코드 구조가 명확하지 않아 기능 추가가 어려운 구조라면 리팩토링으로 구조 개선이 필요!
• 버그 수정: 자주 발견되는 특정 버그를 파악하기 힘들다면?! 코드 구조가 복잡하다는 뜻으로 리팩토링이 필요!
• 코드 리뷰: 코드 리뷰 전 리팩토링을 통해 구조를 명확하게 만들면 보다 정확한 코드 리뷰가 가능함!

😫 현재 프로젝트 코드의 문제점 및 개선 사항

리팩토링 진행에 앞서 현재 코드의 문제점과 리팩토링을 통해 얻을 수 있는 점이 무엇인지 파악하는 것은 중요하고, 현재 프로젝트 결과 코드가 지닌 문제점을 리팩토링 필요성 측면에서 정리하였습니다.

디자인 개선

1. 사용하지 않는 코드

   프로젝트 진행 초기 해당 api가 지원하는 다양한 검사들을 추가하려고 확장용 코드를 작성했지만, 실제 직업 가치관 검사와 다른 검사들은 결과 페이지 형식에 큰 차이가 있어 시간관계상 중단하였고 현재 사용되지 않는 코드 잔재들이 그대로 남아있음.

   // TODO: 요걸로 타입별 파싱!(모든 검사 확장할 때...)
   export const getParsedResult = (questionSeq, result) => {
     switch (questionSeq) {
       case TEST_TYPE.JOB_INTEREST_KM:
       case TEST_TYPE.JOB_INTEREST_KH:
       case TEST_TYPE.CAREER_DEVELOPMENT_READINESS:
             // ...긴 관계로 생략
   

2. 중복되고 혼잡한 스타일 코드

   특정 기준없이 스타일 코드를 작성하다보니 일관성이 없고 스타일 코드가 혼잡하게 작성되어 아래와 같은 비슷한 스타일 코드를 중복하여 작성됨.

   

• 개선 시 이점

  불필요한 코드들을 제거하고 중복되는 스타일 코드를 재사용 가능한 코드로 변경하면 코드의 가독성과 유지보수성이 더 향상될 수 있다고 생각.

가독성 향상

1. 포함관계가 명확하지 않은 태그

   예를 들어 결과 페이지를 구성하는 대략적인 태그 구조는 아래와 같고, 태그 간 포함관계를 살펴보면 용도에 맞지 않는 어색한 포함관계를 지님.

   

• 개선 시 이점

  스크린 리더와 같은 보조 기술의 동작 방식을 고려해 사용 목적에 부합하는 올바른 태그 포함관계를 구성하면 코드 해석이 용이해질 뿐만아니라 사용자 접근성도 개선될 것으로 생각.

버그 검출

1. Store 초기화 중 오류 검출

   결과 페이지 내 ''다시 검사 하기'' 버튼을 클릭 후 Store의 모든 정보를 초기화할 때 현재 페이지의 컴포넌트들이 리랜더링되는 과정에서 표시할 정보들이 사라져 페이지에 오류가 발생했던 것으로 보임.

   현재 각 Reducer의 state 초기화 순서를 조정하여 오류 발생은 보이지 않지만, 좀 더 확실한 예외 처리가 필요할 것으로 생각.

   

• 개선 시 이점

  추후 발생 가능성이 있는 오류에 대해 예외 처리를 추가함으로써 코드를 더욱 견고하게 만들 수 있다고 생각.

• 그 외 추가 개선하고 싶은 사항

  1. 프로젝트 완성도를 높힐 세부적인 기능 추가
     • 데이터 로드 중 로딩 문구나 실패 시 실패 알림 표시
     • 페이지 내 반복되는 문항 설명은 한번만 표시하고 선택지에 대한 부가 설명을 각 문항에 표시
     • API 응답 데이터 유효성 검사 시 좀 더 매끄러운 예외 처리(예를 들어 interceptors, alert 함수화, saga에서 처리 등...)
     • 검사일 Parsing 시 dayjs를 적용하여 깔끔한 코드 작성
     • 스크롤 발생 시 문항을 클릭하면 다음 문항이 현재 문항 위치로 스크롤되도록 변경!
  2. 디자인 요소 개선
     • fullpage.js를 적용하여 트랜디하고 다양한 모바일 기기에서도 어색하지 않은 반응형 디자인으로 개선! => 비효율적인 부분이 있어 제거.
  3. 기존 동작을 유지하며 더 간결하게 처리할 수 있는 기술 도입
     • 비동기 상태 처리를 위한 Redux 미들웨어 도입(Redux saga)
       • 적용 가능한 부분: API 처리 과정, 사용자 이름 입력 처리(현재 debounce로 처리), store 초기화 처리 등.
       • React Router & React Redux 연동하기!
  4. 부가 기능 추가
     • Kakao, Facebook, Instagram 등과 같은 OAuth 인증 추가 및 검사 결과 공유 기능

📆 리펙토링 계획

새로 변경 예정인 디자인

1차 목표: 기존 코드 문제점 개선 및 완성도 향상

이전 작업 내역

• 사용하지 않는 코드 제거
• 태그 구조화(포함관계가 명확하지 않은 태그)
• fullpage.js 적용해서 구조 만들기

완료 작업

• 데이터 로드 중 로딩 문구나 실패 시 실패 알림 표시
• 선택지에 대한 부가 설명을 각 문항에 표시
• API 응답 데이터 유효성 검사 시 좀 더 매끄러운 예외 처리(react-toast을 통한 에러 문구 표시 및 saga에서 비즈니스 로직 처리)
• Redux-Persist를 이용해서 새로고침 시에도 작성 데이터가 유지되도록!
• 다시 검사하기 초기화 로직에 Redux-Reset 적용

현재 남아있는 작업

• 검사일 Parsing 시 dayjs를 적용하여 깔끔한 코드 작성
• 스크롤 발생 시 문항을 클릭하면 다음 문항이 현재 문항 위치로 스크롤되도록 변경!