<div id="readability-page-1" class="page"><div><figure><p><img alt="" src="https://miro.medium.com/max/1360/1*z5VGc9m5ZPFpNuqMI3L__w.jpeg" width="680" height="680" role="presentation"></p><figcaption>#SaveMyammar</figcaption></figure><h2 id="57bf"><a href="https://yceffort.kr/2020/08/commonjs-esmodules" rel="noopener nofollow">CommonJS와 ES Modules은 왜 함께 할 수 없는가?</a></h2><p id="2a38">두 모듈 방식의 사용법 정도의 차이만 알고 있었는데 Nodejs에 ES Modules도입을 고려해보면서 두 모듈이 뭐가 다른건지 궁금해서 알아보다가 발견한 글.</p><h2 id="9e09"><a href="https://blog.hyeonsulee.com/how-does-sentry-work-in-javascript" rel="noopener nofollow">자바스크립트 센트리는 어떻게 동작할까?</a></h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2048/1*jHoe2diXfbeZ45T_d33EFQ.jpeg" width="1024" height="512" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*jHoe2diXfbeZ45T_d33EFQ.jpeg?q=20"></p></div></figure><p id="96ef">우리팀도 일부 자바스크립트 프로젝트에 <a href="https://sentry.io/" rel="noopener nofollow">센트리</a>를 사용하고 있어서 재미있게 본 글이다. 센트리는 에러 탐지 및 관리를 용이하게 해주는 도구이다. 특히 자바스크립트 에러의 상당부분은 사용자의 브라우저의 엔진에서 실행 시 일어나기 때문에 이 에러를 추적하는 것은 테스트만으로는 커버하기 어려운데 센트리같은 도구가 매우 유용하다. 기본적으로 에러를 탐지하는 기능 말고도 관련된 기능들이 많다(슬랙,깃헙과의 통합이라든지..).이 글은 센트리의 자바스크립트 코드를 직접 뜯어보고 센트리가 어떤 방식으로 에러를 후킹하는지 설명한다.</p><h2 id="7ec0"><a href="https://itnext.io/how-to-structure-my-vue-js-project-e4468db005ac" rel="noopener nofollow">How to structure my Vue.js project</a></h2><p id="2ac3">큰 스케일의 Vue.js 프로젝트에서 유용한 폴더구조 사례이다. 모듈(modules)과 뷰(views)로 분리한 부분이 눈여겨볼 만 하다.</p><h2 id="e7a7"><a href="https://medium.com/swlh/simplified-micro-frontends-in-vue-8c74b40eecf1" rel="noopener">Simplified Micro-Frontends in Vue</a></h2><p id="2eb5">웹펙5의 <a href="https://webpack.js.org/concepts/module-federation/" rel="noopener nofollow"><span id="rmm"><span id="rmm">M</span></span>odule Federation</a> 을 사용한 매우 심플하게 구현한 마이크로 프론트엔드 예제를 보여주고 있다. Vue3 + TypeScript 기반의 설명이다. 실제 프로젝트에 적용하기 까지는 아마도 쉽지 않을 수 있다. 상태관리나 여타의 의존성들을 어떻게 공유할지, 리모트 접근 보안을 어떻해 할지 등등.</p><h2 id="ad30"><a href="https://medium.com/js-dojo/has-vite-made-vue-cli-obsolete-17868d59bed8" rel="noopener">Vite가 Vue CLI를 쓸모없게 만들었나?</a></h2><p id="dddc">둘 모두 기본 프로젝트를 빠르게 생성하고 개발서버 및 빌드 기능을 제공하는 도구이다. Vite는 Vue CLI와 다르게 Webpack을 기반으로하지 않으며 브라우저에서 네이티브 ES 모듈을 활용하는 자체 개발 서버를 가지고 있다. 이 아키텍처는 Webpack의 개발 서버보다 훨씬 더 빠른 속도를 제공하며 빌드를 위해 Rollup을 사용한다는 점도 빠른 속도에 한 몫 한다.</p><figure><div><p><img alt="" src="https://miro.medium.com/max/598/1*n39wNTHS4EnWNBDCaiJJTw.png" width="299" height="168" sizes="299px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*n39wNTHS4EnWNBDCaiJJTw.png?q=20"></p></div></figure><p id="4606">그러나 Vite 도 단점이 존재하는데 다른 점은 크게 중요한가 싶고 Vue3에서만 가능하다는 것이 큰 단점. 새로 시작하는 프로젝트나 개인 프로젝트가 아니고서야 Vue3를 도입할 수 있는 기회가 얼마나 있을까 싶다. 그러니까 대부분의 기존 Vue프로젝트는 Vue CLI를 유지할 수 밖에 없을듯 하다.</p><p id="cfea">더불어<a href="https://dev.to/yyx990803/announcing-vite-2-0-2f0a" rel="noopener nofollow"> Vite 2.0 이 릴리즈 되었다는 소식</a>도 들려왔다. 주목할 만한 점은 <a href="https://github.com/vitejs/vite/tree/main/packages/create-app" rel="noopener nofollow">Vue3</a> 뿐 아니라 <a href="https://github.com/vitejs/vite/tree/main/packages/create-app" rel="noopener nofollow">React, Preact, Lit Element</a> 등에서도 통합할 수 있도록 지원한다고 한다.</p><h2 id="4156"><a href="https://yceffort.kr/2021/02/logging-in-nodejs" rel="noopener nofollow">Nodejs에서 로깅하기</a></h2><p id="66e6">내가 맡고 있는 Nodejs 프로젝트가 여럿있는데 로깅 관련해서 고민을 많이 하지 못했다가 이번에 조금씩 자료를 찾아보고 있는데 이 글은 그 중 하나. 중요한것은 <code>console.log</code> 사용을 지양하고 좀 더 일관되고 체계적이고 보기 좋은 로깅을 하는것.</p><h2 id="17eb"><a href="https://github.com/vuejs/vuex/releases/tag/v4.0.0" rel="noopener nofollow">Vuex 4 Release</a></h2><p id="9543">Vue.js의 상태관리 라이브러리 Vuex 4 가 릴리즈 되었다. 핵심 내용은 vue3 지원이다.</p></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

#SaveMyanmar ✊🏾 2021년 2월에 내가 배운 것들
Vite가 Vue CLI를 쓸모없게 만들었나 등
CommonJS와 ES Modules은 왜 함께 할 수 없는가?
두 모듈 방식의 사용법 정도의 차이만 알고 있었는데 Nodejs에 ES Modules도입을 고려해보면서 두 모듈이 뭐가 다른건지 궁금해서 알아보다가 발견한 글.
자바스크립트 센트리는 어떻게 동작할까?
우리팀도 일부 자바스크립트 프로젝트에 센트리를 사용하고 있어서 재미있게 본 글이다. 센트리는 에러 탐지 및 관리를 용이하게 해주는 도구이다. 특히 자바스크립트 에러의 상당부분은 사용자의 브라우저의 엔진에서 실행 시 일어나기 때문에 이 에러를 추적하는 것은 테스트만으로는 커버하기 어려운데 센트리같은 도구가 매우 유용하다. 기본적으로 에러를 탐지하는 기능 말고도 관련된 기능들이 많다(슬랙,깃헙과의 통합이라든지..).이 글은 센트리의 자바스크립트 코드를 직접 뜯어보고 센트리가 어떤 방식으로 에러를 후킹하는지 설명한다.
How to structure my Vue.js project
큰 스케일의 Vue.js 프로젝트에서 유용한 폴더구조 사례이다. 모듈(modules)과 뷰(views)로 분리한 부분이 눈여겨볼 만 하다.
Simplified Micro-Frontends in Vue
웹펙5의 Module Federation 을 사용한 매우 심플하게 구현한 마이크로 프론트엔드 예제를 보여주고 있다. Vue3 + TypeScript 기반의 설명이다. 실제 프로젝트에 적용하기 까지는 아마도 쉽지 않을 수 있다. 상태관리나 여타의 의존성들을 어떻게 공유할지, 리모트 접근 보안을 어떻해 할지 등등.
Vite가 Vue CLI를 쓸모없게 만들었나?
둘 모두 기본 프로젝트를 빠르게 생성하고 개발서버 및 빌드 기능을 제공하는 도구이다. Vite는 Vue CLI와 다르게 Webpack을 기반으로하지 않으며 브라우저에서 네이티브 ES 모듈을 활용하는 자체 개발 서버를 가지고 있다. 이 아키텍처는 Webpack의 개발 서버보다 훨씬 더 빠른 속도를 제공하며 빌드를 위해 Rollup을 사용한다는 점도 빠른 속도에 한 몫 한다.
그러나 Vite 도 단점이 존재하는데 다른 점은 크게 중요한가 싶고 Vue3에서만 가능하다는 것이 큰 단점. 새로 시작하는 프로젝트나 개인 프로젝트가 아니고서야 Vue3를 도입할 수 있는 기회가 얼마나 있을까 싶다. 그러니까 대부분의 기존 Vue프로젝트는 Vue CLI를 유지할 수 밖에 없을듯 하다.
더불어 Vite 2.0 이 릴리즈 되었다는 소식도 들려왔다. 주목할 만한 점은 Vue3 뿐 아니라 React, Preact, Lit Element 등에서도 통합할 수 있도록 지원한다고 한다.
Nodejs에서 로깅하기
내가 맡고 있는 Nodejs 프로젝트가 여럿있는데 로깅 관련해서 고민을 많이 하지 못했다가 이번에 조금씩 자료를 찾아보고 있는데 이 글은 그 중 하나. 중요한것은 console.log 사용을 지양하고 좀 더 일관되고 체계적이고 보기 좋은 로깅을 하는것.
Vuex 4 Release
Vue.js의 상태관리 라이브러리 Vuex 4 가 릴리즈 되었다. 핵심 내용은 vue3 지원이다.
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기

2021년 2월에 내가 배운 것들

댓글