마음같아서는 기존 졸업작품 코드를 싹 다 갈아엎고싶지만,
아직 미완성인 프로젝트이며 매주 개발과 테스트를 진행해야 하는 상황이랍니다.

따라서 저는 새로운 Repo를 만들고 개발 환경 구축을 시작하였습니다.

(이게 리팩토링이 맞나요?)

---

npm -> yarn

저는 항상 npm만을 사용해 왔으며 불편함을 느낀적도 없기에,
왜 yarn을 선호하는 사람들이 있는지 찾아보았습니다.

npm vs yarn 을 위해 참고한 글1
npm vs yarn 을 위해 참고한 글2
npm vs yarn 을 위해 참고한 글3

---

여러 글을 찾아보고 제가 내린 결론은

"그게 그거다"

입니다.

속도와 보안에서 yarn이 앞선다는 것도 모두 옛날이야기 입니다.

차이가 아예 없다는 것은 아니지만,
npm을 잘 사용하던 개발자가 yarn으로 갈아엎거나 할 일은 거의 없을 것 같다는 얘기입니다.

그냥 자신이 사용하던 것, 주변 환경이 사용하는 것, 팀의 선호도에 맞춰 바꿔가며 사용하면 될 것 같습니다.

이외에도 pnpm, yarn bery 등의 패키지 매니저들이 npm과 yarn의 단점을 극복하려고 꾸준히 개발되고 있습니다만,
제가 현재 고려할 상황은 아닌 것 같아 추후에 도전해 보기로 결심하고 과감하게 넘어갔습니다.

저는 회사 개발환경에 맞춰 yarn을 설치하였습니다.

Webpack -> Vite

Vite는 정말 놀라운 녀석입니다.

기존 CRA로 만든 프로젝트와 빌드 속도가 정말 차이가 많이 납니다.

그 이유를 찾아보니,
예전 브라우저는 ESM을 지원해 주지 않았기 때문에 Webpack, Rollup 같은 기존의 빌드 도구들은 번들링 과정을 거쳐야 했습니다.

여러 파일을 하나로 묶은 번들을 브라우저가 로드하면 네트워크 요청 횟수를 줄일 수 있어 성능이 향상되기 때문이지요.

하지만 브라우저에 ESM이 도입되어 번들링 과정을 생략하고 각 모듈을 브라우저가 직접 가져올 수 있게 되었습니다.

Vite는 이 점을 이용해 번들링 과정을 생략하여 빌드 속도를 향상시킨 것입니다!

또한, 코드가 변경되었을 때도 번들링 없이 필요한 모듈만 다시 로드하게 되어 화면에 반영되는 속도 또한 올라갔습니다!

저는 앞으로 프로젝트를 진행할 때, Vite만 사용할 것 같네요ㅎㅎ

JavaScript -> TypeScript

사실 타입스크립트는 안 쓸 이유가 없지요.

타입 작성이 귀찮긴 하지만 그로 인한 장점이 너무 많기 때문에 꼭 사용해 줍시다.

마치며

드디어 환경 구축이 끝났습니다!

글로 작성하기 위해 이것저것 알아보다 보니, 빌드 도구와 패키지 매니저에 대해 더 깊이 있게 공부할 수 있는 좋은 기회가 되었습니다.

다시 한번 느끼지만, 끊임없이 변화하는 개발 트렌드를 주시해야 하며, 새로운 기술 도입에 두려움을 느끼는 순간 뒤처지기 쉬운 것 같습니다.

모두들 새로운 기술을 배우고 적용하는 데 주저하지 않고, 지속적으로 발전하는 멋진 개발자가 됩시다ㅎㅎ