Electron의 IPC 모듈과 IPC 통신의 개념을 파악하고 IPC 모듈을 사용하여 어떻게 통신을 하는지 알아보자. IPC 모듈에는 ipcMain과 ipcRenderer 프로세스 두 가지가 있다. ipcMain은 electron 메인 프로세스로 백엔드로 볼 수 있으며, ipcRenderer는 electron의 renderer 프로세스로 프론트엔드로 볼 수 있다.

Continue reading

Mono-Repo를 생성할 수 있는 도구인 Lerna에서 CHANGELOG를 생성하는 방법에 대하여 알아보자. lerna를 사용하여 직접 Mono-Repo 구조를 생성하고 수정과 commit, 그리고 push를 통하여 Git에 반영 후 CHANGELOG를 생성하는 방법을 배워보자. Mono-Repo 구조에서는 패키지가 다르기 때문에 서로 다른 CHANGELOG를 생성해야한다. 이를 위해서 lerna의 명령어인 lerna version을 사용하여 생성할 수 있다. 물론 이를 더 쉽게 생성해 줄 수 있는 lerna-changelog라는 훌륭한 오픈 소스가 있지만 이번 포스트에서 순수하게 lerna version을 사용하여 내 입맛대로 릴리즈 노트를 작성하는 방법에 대해 말해보려한다.

Continue reading

이번 포스트에서는 오픈 소스(Open-Source)를 만들기 위한 구조와 오픈 소스(Open-Source) 개발에 필요한 모듈을 정의해보려 한다. 개발자라면 한 번쯤은 오픈 소스(Open-Source)를 만들어 공유나 배포를 해보았을 것이다. 본인들이 사용하는 각종 모듈과 기술들이 있다면 그대로 사용하면 되지만 보통 오픈 소스(Open-Source)를 만들기 시작할 때 어떤 구조와 형태로 만들어야 하는지 감이 잡히질 않는다.

Continue reading

이번 포스팅에서는 Vanilla js를 사용하여 vur-router, react-router와 같은 SPA(Single Page Application)의 라우팅 시스템의 개념을 배워보고 실제로 구현해보도록하자. Vanilla js를 추구하는 반면 많은 사람이 vue, react, angular와 같은 프레임워크를 많이 사용한다.이번 포스팅에서는 이런 경험을 바탕으로 앞으로 같은 문제를 겪는 개발자에게 도움이 되고자 Vanilla js를 사용하여 SPA (Single Page Application)에서 Routing 시스템을 구현하는 방법을 적어보자 한다.

Continue reading

불꽃 튀게 빠르고 설정이 필요 없는 zero-configuration이며, 웹 애플리케이션 번들러인 Parcel에 대해 개념을 잡아보자.Parcel은 2017년에 나온 번들러로 릴리즈 된 지는 별로 되지 않았지만, 설정이 필요 없다는 강력한 장점이 있다. 그렇기 때문에 반대로 설정이 복잡한 Webpack과 비교 대상이 되기도 한다. 우리는 Parcel의 깊은 사용법보다는 먼저 이 포스트에서 Parcel에 대한 개념과 무엇이 Webpack과 다른지 먼저 알아보고 간단하게 Parcel을 설치하는 방법을 알아보자.
Parcel에 대해 알아가기 전 먼저 Webpack에 대해 알고 싶다면 Webpack 개념잡기Webpack 완전정복하기!! 포스트를 참고하도록 하자.

Continue reading

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에서 다른 문제를 야기했기에 더 높은 버전을 사용해야 하는 불편한 점이 많았다.

Continue reading

이번 섹션에서는 npm scope에 대해서 알아보고 이 scope 패키지를 통해서 어떻게 npm registry에 배포하는지 파악해보고 npm 패키지를 실제로 배포까지 해보도록하자.npm에는 scope라는 개념이 존재한다.
npm의 scope 개념은 조직 또는 그룹이다. 우리는 이 scope를 통해서 협업이 가능하며, 여러개의 분산된 패키지를 하나의 조직으로 관리 또는 배포 할 수 있다.

Continue reading

예제를 통하여 npm 패키지를 생성하고 생성된 npm 패키지를 NPM Repostory에 배포까지 배움으로 인해 오픈소스로서 NPM 생태계에 기여하는 방법을 배워보자.이번 포스팅에서는 npm 모듈 혹은 npm 패키지를 생성하여 실제로 NPM Registry에 업로드까지 하여 오픈소스로서 NPM 생태계에 기여하는 방법을 배워보자.
우리가 오픈 소스를 만들고 싶거나 관리를 하고 싶다면 git hub에 오픈소스를 올리는 것에는 한계가 있다. 우리가 오픈 소스를 만드는 목적은 공유제공이라 생각한다. 내가 만든 것을 남에게 공유하고 이런 오픈 소스가 필요한 사람에게는 쉽게 접해서 사용할 수 있게끔 하는 것이다. 그렇기 때문에 git hub에 올리는 것을 넘어서 npm 패키지로 모듈화하여 NPM Registry에 올리는 것이 필요하다. 지금부터 npm 패키지를 만들고 배포하는 방법을 배워보자.

Continue reading

이전 섹션인 Lerna를 활용한 Mono-Repo 구축 완벽 가이드 - 개념 정리 에서 LernaMono-Repo에 대한 개념을 파악하였다. 이번 섹션에서는 실제로 lerna를 활용하여 간단하게 log를 출력하는 패키지를 Mono-Repo로 구성해 보고 NPM Registry에 배포까지 해보자.예제는 CLI를 통해 간단한 로그를 출력하는 패키지Lerna를 활용한 Mono-Repo 구조로 구축, 개발, 배포까지 진행할 것이다.

Continue reading

mono-repo 구축을 위한 가이드! mono-repomulti-repo의 차이를 알아보고 mono-repo 구축을 위한 도구인 lerna를 살펴보자.먼저 mono-repo에 대한 개념을 다지고 mono-repo의 장단점을 면밀히 살펴본 후 lerna를 파악해보자. 이 후 섹션에서는 Lerna를 활용한 Mono-Repo 구축 완벽 가이드 - 예제를 통한 완벽 파악을 통해 lerna의 사용법을 예제를 통해서 정확하게 알아보자.

Continue reading
Author's picture

Dev. DY

Web Front-End Technology Lab


Front-End Developer


Republic of Korea, Seoul