리팩토링, 그게 뭔데?
기존에 만들었던 프로젝트들이 주로 학술제 / 대회 용이라 기간이 한정되어 있었다.
한정된 기간이다 보니 일단 '완성' 하는 것에 초점을 맞추다보니
매우 지저분하고,,, 내가 이해하지도 못한 코드를 긁어오는 경우도 많았다.
그래서 전체적으로 내 프로젝트들을 전부 *리뉴얼* 하려고 한다!
소위 말하는 '리팩토링'이라는 작업을 하려고 하는데,
해본 적이 있어야지...
어디를 어떻게 고쳐야할지 엄두가 안났다
그래서 '좋은 리팩토링을 위한 방법'에 대해서 여기저기 찾아보았고,
블로그에 정리해둔 후, 이를 토대로 리팩토링을 진행하려고 한다
처음부터 다 뜯어고쳐야 한다면?
1. 기존 코드 분석
- 현재 코드의 구조를 이해하고, 어떤 기능이 어떻게 동작하는지 살펴보기
- 전체적인 흐름을 간략하게 문서화(메모라도)해두면 이후에 도움이 된다.
- "이 기능은 왜 이렇게 구현됐을까?"라는 질문을 던져보면서 직접 구현할 방법을 고민해보기
2. 핵심 기능 목록 정리
- 웹사이트의 핵심 기능을 리스트업해.
- 예를 들어, 회원가입/로그인, 게시판, API 연동 등.
- 각 기능별로 "이 기능을 어떻게 구현할까?" 고민해보고, 필요한 기술 스택을 정리해.
3. 새로운 설계 방향 정하기
- 프레임워크/라이브러리 선정: React, Next.js, Express, Django 중 어떤 걸 쓸 건지 고민.
- 폴더 구조 정리: 프로젝트 구조를 어떻게 정리할지 구상해. (ex: components/, pages/, hooks/ 등)
- 상태 관리 방식: useState로 할지, Redux 같은 상태 관리 라이브러리를 쓸지 정해.
4. 기능별로 직접 구현하며 진행
- 작은 단위부터 직접 구현해보고, 기능을 하나씩 완성해.
- 예를 들어, UI부터 시작해서 상태 관리, API 연결 순으로 작업할 수도 있어.
- 하나씩 만들면서 이해가 안 가는 부분은 다시 학습하거나, 작은 실험 프로젝트를 만들어볼 수도 있어.
5. 리팩토링과 문서화
- 코드가 완성되면 리팩토링하면서 유지보수하기 쉽게 정리해.
- 함수나 컴포넌트가 너무 크면 작은 단위로 나누고, 네이밍도 명확하게 정리해.
- 직접 작성한 코드이기 때문에, 필요한 경우 주석도 추가해두면 나중에 보기 좋을 거야.
6. 테스트와 배포
- 기능이 어느 정도 완성되면, 테스트 코드를 작성해보는 것도 추천해.
- 배포 방식도 미리 고민해서 GitHub Actions, Vercel, Netlify 같은 배포 도구를 이용하면 좋아.