Mono-Repo
를 생성할 수 있는 도구인 Lerna
에서 CHANGELOG
를 생성하는 방법에 대하여 알아보자. lerna를 사용하여 직접 Mono-Repo 구조를 생성하고 수정과 commit, 그리고 push를 통하여 Git에 반영 후 CHANGELOG를 생성하는 방법을 배워보자. Mono-Repo 구조에서는 패키지가 다르기 때문에 서로 다른 CHANGELOG를 생성해야한다. 이를 위해서 lerna의 명령어인 lerna version
을 사용하여 생성할 수 있다. 물론 이를 더 쉽게 생성해 줄 수 있는 lerna-changelog라는 훌륭한 오픈 소스가 있지만 이번 포스트에서 순수하게 lerna version
을 사용하여 내 입맛대로 릴리즈 노트를 작성하는 방법에 대해 말해보려한다.
vue.js에서 provide/inject
api는 보통 많이 사용하지는 않는다. 핵심적인 요소 간주하기에는 무언가 부족하기 때문이기도 하며, Vue.js 공식 문서에는 provide/inject
는 일반 애플리케이션 코드에 사용하지 않는 것이 좋다고 명시되어있기 때문이다. 하지만 모르는 것보다 아는 것이 이득이며 때로는 이 provide/inject
가 도움이 되기 때문에 이번 포스팅에서 언급하였으며, 몇 가지 얘기해 보려 한다.
이번 포스트에서는 오픈 소스(Open-Source)를 만들기 위한 구조와 오픈 소스(Open-Source) 개발에 필요한 모듈을 정의해보려 한다. 개발자라면 한 번쯤은 오픈 소스(Open-Source)를 만들어 공유나 배포를 해보았을 것이다. 본인들이 사용하는 각종 모듈과 기술들이 있다면 그대로 사용하면 되지만 보통 오픈 소스(Open-Source)를 만들기 시작할 때 어떤 구조와 형태로 만들어야 하는지 감이 잡히질 않는다.
이번 포스팅에서는 Vanilla js를 사용하여 vur-router, react-router와 같은 SPA(Single Page Application)의 라우팅 시스템의 개념을 배워보고 실제로 구현해보도록하자. Vanilla js를 추구하는 반면 많은 사람이 vue, react, angular와 같은 프레임워크를 많이 사용한다.이번 포스팅에서는 이런 경험을 바탕으로 앞으로 같은 문제를 겪는 개발자에게 도움이 되고자 Vanilla js를 사용하여 SPA (Single Page Application)에서 Routing 시스템을 구현하는 방법을 적어보자 한다.
불꽃 튀게 빠르고 설정이 필요 없는 zero-configuration
이며, 웹 애플리케이션 번들러인 Parcel
에 대해 개념을 잡아보자.Parcel
은 2017년에 나온 번들러로 릴리즈 된 지는 별로 되지 않았지만, 설정이 필요 없다는 강력한 장점이 있다. 그렇기 때문에 반대로 설정이 복잡한 Webpack
과 비교 대상이 되기도 한다. 우리는 Parcel
의 깊은 사용법보다는 먼저 이 포스트에서 Parcel
에 대한 개념과 무엇이 Webpack
과 다른지 먼저 알아보고 간단하게 Parcel
을 설치하는 방법을 알아보자.
Parcel에 대해 알아가기 전 먼저 Webpack에 대해 알고 싶다면 Webpack 개념잡기과 Webpack 완전정복하기!! 포스트를 참고하도록 하자.
NVM을 사용하여 Windows 환경에서도 Node.js의 버전을 관리하고, 개발 환경에 따라 Node.js 버전을 변경하는 방법을 배워보자.NVM 은 Node Version Manager로써 Node.js의 도구이며 여러 Node.js를 설치하여 상황에 따라 버전을 변경해 가면서 사용하는 것을 말한다.
개발 환경에 따라 Node.js의 버전을 변경해야 하는 상황이 한 번쯤은 꼭 온다. 이런 환경에서 그때마다 Node.js를 재설치 및 삭제하는 방법으로는 한계가 있고 불편할뿐더러 잡아먹는 시간도 아깝다. 이런 상황에서 Node.js 버전을 상황에 따라 변경해 가면서 사용하게끔 도와주는 것이 NVM
, 즉 Node Version Manager
이다.
글쓴이의 경우에도 Hexo 기반의 블로그를 VuePress 기반의 블로그로 변경하려고 하였는데 Hexo
의 경우 Node.js Version 12.0.0
보다 높으면 일부 문제가 발생하기 때문에 Node.js Version 12.0.0
을 사용해야 하는데 VuePress
의 경우 12.0.0에서 다른 문제를 야기했기에 더 높은 버전을 사용해야 하는 불편한 점이 많았다.
이번 섹션에서는 npm scope
에 대해서 알아보고 이 scope 패키지를 통해서 어떻게 npm registry
에 배포하는지 파악해보고 npm 패키지를 실제로 배포까지 해보도록하자.npm에는 scope라는 개념이 존재한다.
npm의 scope 개념은 조직 또는 그룹이다. 우리는 이 scope를 통해서 협업이 가능하며, 여러개의 분산된 패키지를 하나의 조직으로 관리 또는 배포 할 수 있다.
예제를 통하여 npm
패키지를 생성하고 생성된 npm
패키지를 NPM Repostory에 배포까지 배움으로 인해 오픈소스로서 NPM 생태계에 기여하는 방법을 배워보자.이번 포스팅에서는 npm
모듈 혹은 npm
패키지를 생성하여 실제로 NPM Registry에 업로드까지 하여 오픈소스로서 NPM 생태계에 기여하는 방법을 배워보자.
우리가 오픈 소스를 만들고 싶거나 관리를 하고 싶다면 git hub
에 오픈소스를 올리는 것에는 한계가 있다. 우리가 오픈 소스를 만드는 목적은 공유
와 제공
이라 생각한다. 내가 만든 것을 남에게 공유하고 이런 오픈 소스가 필요한 사람에게는 쉽게 접해서 사용할 수 있게끔 하는 것이다. 그렇기 때문에 git hub
에 올리는 것을 넘어서 npm
패키지로 모듈화하여 NPM Registry
에 올리는 것이 필요하다. 지금부터 npm
패키지를 만들고 배포하는 방법을 배워보자.
이전 섹션인 Lerna를 활용한 Mono-Repo 구축 완벽 가이드 - 개념 정리 에서 Lerna
와 Mono-Repo
에 대한 개념을 파악하였다. 이번 섹션에서는 실제로 lerna를 활용하여 간단하게 log를 출력하는 패키지를 Mono-Repo
로 구성해 보고 NPM Registry에 배포까지 해보자.예제는 CLI를 통해 간단한 로그를 출력하는 패키지로 Lerna
를 활용한 Mono-Repo
구조로 구축, 개발, 배포까지 진행할 것이다.
mono-repo
구축을 위한 가이드! mono-repo
와 multi-repo
의 차이를 알아보고 mono-repo
구축을 위한 도구인 lerna
를 살펴보자.먼저 mono-repo
에 대한 개념을 다지고 mono-repo
의 장단점을 면밀히 살펴본 후 lerna
를 파악해보자. 이 후 섹션에서는 Lerna를 활용한 Mono-Repo 구축 완벽 가이드 - 예제를 통한 완벽 파악을 통해 lerna
의 사용법을 예제를 통해서 정확하게 알아보자.