URURL 리팩토링의 서막

개발자 초기 사이드프로젝트로 진행했던 URURL 프로젝트가 있다. 

이 프로젝트는 완전 주니어 시절 react를 배우고자 접했던 프로젝트이다. 1년이 조금 넘는 기간동안 이어지다가 결국 종료가 되어버린 프로젝트이다.

 

시작 날짜 2024.03.22(금)

 

갑자기 프로젝트를 꺼낸 이유?

리팩토링, 버전 업데이트, 테스트와 같은 작업을 하기에 매우 좋은 상태라고 생각한다. 

처음에는 새로운 사이드프로젝트를 진행할까 고민하다. 그것보다는 과거에 내가 했었던 코드를 보면 되돌아보고, 개선해나아가는게 큰 도움이 될 것이라고 생각했다. 

단순이 만드는 것에 초점을 맞추는 것이 아니라, 개선하고, 업그레이드에 초점에 맞춰 진행하고자 했다. 

 

기간은 얼마나 잡나?

완전 뜯어 고치며, 내가 해보지 못했던 것들을 공부하고 적용해 나갈 예정이기에 최소 1년을 잡을 예정이다. 

 

작업내용은 무엇인가?

 

1. React 버전 업데이트 

기존에는 17버전이었지만, 18버전으로 업데이트 할 예정이다. 

전반적으로 사용하던 라이브러리르 다 업데이트 할 예정이다. 이 이유는 리팩토링의 목표도 있지만, 최신의 성능과 기능에 대해 접해보는 경험을 쌓고자하기 때문이다.

 

2. Next.js

11 => 14 버전 업데이트. 많은 메이저 버전이 업데이트가 되었다.

next.js에서 버전업에 따라 빌드시간이 매우 단축됐다고 하였다. 이를 살짝 비교해보았다.

프로젝트의 14버전은 동일하지만, 빌드 방식을 달리했다. 기존의 babel, terser와 같은 빌드 도구를 활용하기 위해 next/preset을 통해 빌드하였고, 또 다른 방식으로는 swc을 통해 빌드를 진행시켰다.

확실히 swc가 빨랐다. 하지만 next에서 공시했던 만큼은 아니다. 이는 빌드환경의 영향도 존재한다고 한다. 이에 대한 내용은 swc에 대한 글에 있다.

 

3. Mockoon을 통해 MockAPI 활용

서버는 따로 두지 않을 것이기 때문에 가짜 데이터를 활용하여 작업을 진행할 것이다.

Mockoon를 선택한 이유와 Mockoon에 대한 내용은 별도 글에서 정리할 예정이다.

 

4. 전체적인 코드 리팩토링

코드가 아주 엉망이다. 최대한 깔끔하고, 성능 최적화 작을하며, next.js를 잘 활용하며 업데이트할 예정이다.

 

5. Test Code

가장 부족한 부분이다. test code를 도입해야지 라는 생각만 가지고 있다 한번도 해본적이 없다. 부끄럽지만 지금이라도 제대로 시도해보고자한다.

 

6. StoryBook 

이는 요즘 많이 사용하고 있어 한번 사용해보고 싶어서 도입해보고자한다.

 

이 이외에도 추가적으로 진행할게 생기면 진행할 예정이다. 

많은 내용이 존재하며, 그 만큼 오래걸릴 예정이다.

 

Refactoring git : https://github.com/SangWonyy/ururl-refactoring

GitHub - SangWonyy/ururl-refactoring

 

legacy git : https://github.com/SangWonyy/ururl-legacy

GitHub - SangWonyy/ururl-legacy