[리팩토링]Next.js 프로젝트 리팩토링 기록 정리

✅ 변수명, 함수명, 컴포넌트명 변경

의미를 더 명확하게 전달할 수 있도록, 중복 가능성이 있거나 헷갈릴 만한 이름을 변경했다.

✅ 에러 핸들링

switch로 감싸 case로 나눔으로써 가독성을 높였다.

그리고 성공인 경우 default를 실행할 수 있도록 했다.

✅ 에러 메세지 상수처리

에러 메세지를 일관성있게 유지하고, 한 곳에 모아 더 편리하게 변경할 수 있도록 src/constants/errorMessages.ts 경로에 파일을 따로 생성했다.

✅ 타입 분리

@types/global 경로에 api를 호출할 때 사용하는 함수들의 타입을 한 곳에 모아 관리하기 위해 각 파일에서 분리하였다.

그리고 interface 이름도 일관성 있게, 더 직관적이게 살짝 변경하였다. 찾고자 하는 함수명으로 검색하면 된다.

✅ 컴포넌트 분리

예) 받은 초대요청 리스트를 출력하는 페이지에서 각각의 초대 요청을 컴포넌트화했다.

이런 식으로 활용해서 페이지 내의 코드를 20%정도 줄일 수 있었다!

✅ 자주 사용되는 코드는 함수로 만들어 분리 & 공통 컴포넌트화

src/utils 경로에 필터링하는 함수를 만들어 따로 저장해놓고 필요할 때마다 불러와 사용했다.

---

버튼 공통 컴포넌트 관련해서도, 중복 코드를 줄이기 위해

이런 함수를 만들어서,

이런 식으로 깔끔하게 정리했다! ....이전 코드 정말...보기안좋네...급하게 일단 짜고 본 티가 난다. ㅠㅠ

✅ 스타일 코드 분리

컴포넌트or페이지명 + Styles -> ts 파일로 만들어 스타일 코드만 분리했다.

해당 컴포넌트or페이지에서는 *로 전체 불러오기 + 별칭 S로 해서 <S.~~/> 이런 식으로 사용했다.

✅ 간단한 주석 달기

헷갈릴 만한 부분이나, 로직이 복잡한 부분, 주의해야하는 부분 등엔 간단한 주석을 달아 누구나 나~~중에 봐도 한 눈에 편하게 알아볼 수 있도록 했다.

✅ 반복문, 리스트 활용으로 중복 제거

프로젝트를 시간에 쫓겨 급하게 진행하며 나중에 리팩토링을 꼭 해야겠다고 생각한 부분들은 이렇게 주석을 달아 표시해놓았다...ㅠㅠ

위 코드는 이런 식으로 리스트와 map 함수를 사용해서 깔끔하게 만들었다.

---

정말....하나하나 수정하기도 힘들고 굉장히 비효율적인 코드...list와 map을 적극적으로 사용하자...!

✅ 상태관리 변경

공통 컴포넌트화를 하면서 로컬 상태관리 -> 전역 상태관리로 변경해서 재사용 가능하도록!

✅ 기타

- image를 Next.js 제공의 Image로 변경

- ? : null 을 &&으로 변경

- 불필요한 코드 및 공백 제거

- 컨벤션 안 맞는 곳 수정

- 폴더 구조 깔끔하게 정리

💡 느낀점

최대한 빠르게 기능을 구현하려다가 프로젝트가 끝난 후 뒤늦게 코드를 다시 보는데...정말 난장판이 따로없네...

이런걸 리팩토링이라고 불러도 되는걸까? 리팩토링이 이런게 맞는건가?

프론트엔드 리팩토링...그리고 클린코드에 대해서 더 깊게 공부해보고 싶다.

그래도 리팩토링을 하는 동안은 하나하나 커밋할 때마다 엄청난 쾌감을 느꼈다...

성능 테스트 같은 것도 해서 수치로 직접 확인하고 비교해보고도 싶다.

그리고 이 과정을 거치면서 없던 버그들이 생긴 적도 꽤 있어서, 그건 조심해야될 것 같다. ㅠㅠ