첫번째 포스트를 출간하고 나서, 어떤 주제를 두번째 포스트로 출간할지 고민이 많았습니다.
처음에는, 모달에 관해서 작성해볼까 생각했지만, 처음 시리즈를 기획하면서 문법적인 내용은 잘 작성된 포스트들이 많아서그분들만큼 잘 쓸 자신이 없어서, 문법적인 부분외에 필요한 부분을 작성하고자 했던 기억이 났습니다.
그래서 이번에는 개발하면서 자주 사용한 NPM들을 정리하여 공유하고자 합니다.
⌛bundler
현대 프론트엔드 프로젝트는 다양한 모듈로 구성되는데, 이를 모듈 간의 의존성 관계를 고려하여 프로젝트를 하나 또는 여러개의 bundle(묶음)으로 생성해주는 것이 bundler입니다.
- webpack: 태동기의 bundler 중에 비교적 성능이 우수하여, 큰 커뮤니티를 가지고 있습니다.
- vite: vue3와 함께 공개된 vite는 RollUp 방식을 사용하여 webpack과 비교하여 보다 빠른 빌드 속도를 자랑합니다.
✔convention
여러 사람이 함께 프로그래밍을 하다보면, 코딩 스타일이 달라 가독성이 떨어질 수 있습니다. 컨벤션 문서를 작성해서 지키는 것도 좋은 방법이지만, 도구의 도움을 빌려 자동화하는 것도 좋은 방법입니다.
- eslint: ES+Lint 로, JavaScript로 작성된 코드에 대해 실시간으로 하이라이팅을 통해 코딩 스타일 가이드나 에러를 검출해줍니다. autofix 등 다양한 편리한 기능과 특정 룰을 제외하거나 선택할 수 있습니다.
- prettier: Code Formatter로 보다 강력하게 코딩 스타일을 따르도록 코드를 변환해줍니다. JS 외에도 다양한 언어를 지원하며 eslint와 함께 사용할 수도 있습니다. 다만 eslint보다 보다 강제적인 가이드를 하여 역설적이게도 인기가 있습니다.
🛠test
코드를 작성하고 나면 의도한 바대로 동작을 하는지 검증하는 과정을 테스트라고 합니다. 이를 위한 수많은 기법과 라이브러리들이 있습니다. 목적에 따라 unit test, e2e test 등이 있으며, 자동화하여 CI/CD의 일부로 사용하기도 합니다.
- jest: Testing Framework라는 소개할 정도로 테스팅에 대하여 다양한 기능을 제공합니다. FE 이외의 JS 프로젝트를 테스트 할 때도 사용되고 있습니다.
- nightwatch: e2e test를 수행하고자 할때 사용되는 라이브러리입니다. 브라우저 기반의 selenium을 이용하여 웹 브라우저에서 테스트를 수행합니다.
TDD: 소프트웨어 방법론으로, 테스트 주도 개발을 하는 것을 말합니다. 반복된 테스트를 통한 짧은 개발 주기를 반복하는 개발 프로세스이며, Kent Beck에 의해 널리 퍼졌습니다. 실패하는 테스트 코드를 작성한 후(Red), 실제 코드를 작성하여 테스트를 성공시킵니다(Green). 이후 리팩토링을 수행합니다(Yellow). 초기에 테스트를 위한 시간이 소요되며, 모든 케이스를 방지할 수 없다고 생각될 수 있으나 결국 이후의 안정성이나 유지보수를 고려하면 더 나은 방법이 될 수 있습니다.
📚documentation
- storybook: UI 컴포넌트 개발 도구나 테스팅, 문서화 등을 지원하는 도구로, UI 라이브러리를 독립적인 웹에서 내부나 외부에 공개하기 위한 플랫폼으로 사용할 수 있습니다.
🌈development
- axios: 보다 편리하게 http 요청을 할 수 있도록 지원해주는 promise 기반의 http client 입니다.
- day.js: 다루기 어려운 시간 또는 날짜 데이터를 보다 쉽게 제어할 수 있게 해줍니다. 이전에는 moment.js가 널리 사용되었으나, 프로젝트가 deprecated 되었습니다.
📘Components
- swiper: Swiper계의 끝판왕
- ckeditor: 깔끔한 UI를 가진 텍스트 에디터로 많은 기능을 포함한 유료 모델도 있습니다.
- vue-js-modal: modal에 관한 깊은 고민의 끝!
ㄱH발자