현재 Front-End 생태계에서 패키지 관리는 중요한 요소 중 하나가 되었다. 과거 웹 애플리케이션에서는 모듈이라는 개념이 크진 않았지만, 현재는 애플리케이션의 규모가 커지면서 모듈이라는 개념이 중요해졌으며, 이를 관리하는 패키지 매니저 역시 중요해졌다. 이번 포스팅에서는 패키지 매니저가 무엇인지와 왜 패키지 매니저가 발전하는지 알아보고 최근 주목받고 있는 패키지 매니저인 PNPM을 알아보도록 하자.
이번 포스팅에서는 Firebase의 간단한 개념과 PWA(Progressive Web App)에 대한 개념을 알아야하지만, 이런 개념보다는 실제로 PWA 애플리케이션을 만들고, 외부 CI와 연동하여 자동으로 빌드하고, 배포 및 호스팅까지 할수 있는 Firebase와 PWA(Progressive Web App)을 바로 사용할 수 있는 방법을 중점으로 포스팅하겠다.
Node.js 개발자인 Ryan Dahl은 2018년도 JSConf EU에서 Node.js 설계 당시의 문제점들을 지적했고 이를 보완하는 새로운 Runtime인 Deno를 개발하기 시작하였다. 현재 Deno는 V1.18.2로 활발한 개발과 성장을 해 나아가고 있다. 우리는 이번 포스트에서 Deno에 대한 기초적 내용을 살펴보도록 하자.
Electron의 IPC 모듈과 IPC 통신의 개념을 파악하고 IPC 모듈을 사용하여 어떻게 통신을 하는지 알아보자. IPC 모듈에는 ipcMain과 ipcRenderer 프로세스 두 가지가 있다. ipcMain은 electron 메인 프로세스로 백엔드로 볼 수 있으며, ipcRenderer는 electron의 renderer 프로세스로 프론트엔드로 볼 수 있다.
이번 포스트에서는 오픈 소스(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 패키지를 만들고 배포하는 방법을 배워보자.
