프론트엔드 개발은 라이브러리가 풍부해서 좋아한다. 빠르게 변화한다고 말로만은 알고 있었지만, 체감은 하지 못했었다. 하지만 이번에 1년이 넘어간 프로젝트를 리팩토링하게 되면서 몸으로 체득하게 되었다.

프리미티브 프로젝트는 작년에 동아리 홍보를 진행하기 위해서 수행한 프로젝트이다. 이 프로젝트는 프리미티브 동아리를 홍보하기도 하고(주목적), 동아리원들이 프로젝트 공유를 할 수 있는 플랫폼으로 만드는 것을 원했다.

작년에 만든 기능들을 간단하게 말해보면 홍보 페이지, 동아리 입부 신청서 다운로드 기능, 진행한 프로젝트 전시 기능, 어드민 승인 기반 회원가입 기능 등 많은 기능을 만들었었다.

해당 프로젝트는 한 번의 대규모 리팩토링을 겪은 프로젝트이다. 처음에는 JavaScript + Webpack 프로젝트로 시작해서, 프로젝트 시작 후 4~5개월 후 TypeScript + Vite로 마이그레이션을 진행하며 이 시기에 프로젝트 업로드 기능을 구현했다.

프리미티브 공식 홈페이지

왜 실행이 안돼..? (dependency 패키지 문제)

글 작성 시점 기준 1년이 넘어가는 현재 시점 2025년의 프리미티브에 맞게 프로젝트를 리팩토링하게 되었다. 리팩토링하려고 묵혀둔 github repository를 clone해서 열어봤을 때 바로 다시 노트북을 덮게 만든 요소가 있다. 바로 아래와 같은 장문의 에러메시지였다. npm install 명령을 실행했을 때의 결과이다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: primitive@0.1.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.3.1" from react-dom@18.3.1
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^18.2.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/jeongwoo/.npm/_logs/2025-01-29T17_03_36_111Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/jeongwoo/.npm/_logs/2025-01-29T17_03_36_111Z-debug-0.log

사실 이전에 프로젝트 업로드 기능을 만들때, 에디터를 외부 라이브러리를 사용했다. 이 라이브러리는 그때 당시 최신 리액트를 지원하지 않기도 하고 여러 라이브러리랑 버전 충돌이 일어났었다. 하지만 그때는 잘 몰랐기도 했고, 빠르게 만드는 것이 모토였기 때문에 그냥 감행했던 기억이 난다.

일단 프로젝트를 실행하기 위한 의존성 설치에서 막혀서 이걸 해결해야했다. 찾아보니 vite도 메이저 버전이 올라가기도 하고, react는 2단계나 메이저 버전이 올라가있었다.

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4.17.4",
    "@types/react-dom": "^18.3.0",
    "dompurify": "^3.2.3",
    "firebase": "^10.12.0",
    "lodash": "^4.17.21",
    "postcss-nesting": "^12.1.5",
    "quill": "^2.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.0.1",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.21.1",
    "react-spring": "^9.7.3",
    "styled-components": "^6.1.11",
    "web-vitals": "^2.1.4",
    "zustand": "^4.5.2"
  },

html태그를 안전하게 inject해주는 용도로 사용했던 domfurify도 작년까지만 해도 @types/domfurify 라는 타입패키지를 별도로 설치했어야 했다. 이제는 domfurify 라이브러리에 내장되어서 필요없어졌다고 한다.

작년 네이버 부스트캠프를 하면서 pnpm의 장점을 많이 느껴서 pnpm으로 바꾸기 위해 package-lock 도 삭제하고, npm을 사용하지 않게 되었다. pnpm outdated 명령을 치면 아래처럼 깔끔하게 새로운 버전이 나온 패키지를 명시해준다. 일부는 이미 업데이트해서 아래에는 나오지 않지만, 필요에 따라 업데이트해볼 예정이다.

image.png

코드 품질

이전에는 사실 코드 분리에 대해 필요성을 크게 느끼지 못했다. 생각해보면 파일 단위로 이동하는게 귀찮았던 것도 같고, 몰랐기 때문이라고 생각한다.

프미 프로젝트 이후 몇번의 프로젝트를 해보고, 특히 네부캠 그룹 프로젝트 이후 파일 단위로 분리하는게 더 관리하기 편하고, 무엇보다 은근 나누는게 재미있었기 때문에 습관적으로 폴더 단위로 나누게 되었다.

하지만 이 프로젝트는 그 이전이기 때문에 아래처럼 Components 폴더 아래 다 들어가있다……. 이걸 분리하는 것부터 시작해야할 것 같다.

image.png

이 당시에만 해도 커스텀 훅의 장점을 몰랐기 때문에 잘 안썼었는데, 일부 로직들은 훅으로 분리해서 재사용해보는 것도 이번 리팩토링의 목표이다.

1년이 지나 다시보니 정말 새로운 기분이다. 확실히 가독성 부분에서 업데이트가 많이 필요해보인다고 느꼈다.

이번에 리팩토링한 것은

이번에는 2025년에 입학하는 신입생들을 위한 새로운 자료를 업데이트하고, 코드레벨 단위로 리팩토링을 진행했다.

느낀 점

이번에 리팩토링을 하면서 느낀 것은 지난 1년간 코드레벨 차원에서 많이 성장한게 느껴졌다는 점이었다. 이전에는 코드 분리라던지 폴더구조에 대해 고민을 전혀 안했었는데, 이후 프로젝트를 해보면서 많이 고민했었고, 이제는 어느 정도 가독성 좋은 코드를 작성할 수 있게 된 것 같아서 좋았다.

사실 이 프로젝트는 아직 끝이 아니라 어느정도 추가해보고 싶은 기능이나 디자인 개선 등 여러 개선의 여지가 있는 프로젝트이다. 2월 중으로 차근차근 개선해보고 싶다.