<div id="readability-page-1" class="page"><div><div><h2 id="3cf0">Vue Single-File Component Playground 등</h2><div><a rel="noopener" href="/?source=post_page-----4f600f7d80b4--------------------------------"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/fit/c/56/56/2*5-DkBQYvxo0TLldXjX88Og.png" width="28" height="28"></p></div></a></div></div><h2 id="9cd3"><a href="https://sfc.vuejs.org/" rel="noopener nofollow">Vue Single-File Component Playground</a></h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/5176/1*QtVL5nd5BGuWg-Nd3YGNVQ.png" width="2588" height="554" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*QtVL5nd5BGuWg-Nd3YGNVQ.png?q=20"></p></div></figure><p id="a101">간단히 SFC 코드의 결과를 실시간으로 미리보기 해볼 수 있는 서비스가 생겼다.</p><h2 id="b815"><a href="https://nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/#" rel="noopener nofollow"><strong>JavaScript performance beyond bundle size</strong></a></h2><p id="12aa">자바스크립트 성능 최적화라고 하면 번들 사이즈를 줄이는것에 초점이 맞춰진 경우가 많은데 또 다른 중요한 포인트를 보지 않은 경우가 많다고. 번들사이즈 외에 아래 다섯가지의 포인트를 자세히 짚어주고 있다.</p><ul><li id="0b05"><strong>Runtime CPU cost</strong>: Parse/Compile/Excuation time 세 가지로 구분가능하며 크롬 DevTools의 Performance 탭을 통해 확인할 수 있고 시크릿모드로 열어서 실행해보길 권장. CPU 혹은 Network throttling 있어서 모바일 환경 등을 실험해볼 수 있다. <a href="https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API" rel="noopener nofollow">User Timing API</a> 로이름을 붙여 초기에 비;용이 많이 드는 부분을 집중적으로 살펴볼 수 있다. 그리고 웹펙 플러그인 <code><a href="https://github.com/statianzo/mark-loader" rel="noopener nofollow">mark-loader</a></code> 를 사용하면 각 디펜던시의 runtime cost를 살펴볼 수 있다.</li><li id="456c"><strong>Power usage</strong> : 대부분의 경우 웹 사이트가 과도한 전력을 소비하는 경우 이는 메인 스레드에서 과도한 CPU를 소비하기 때문이다. 마찬가지로 크롬 DevTools의 Performance 탭을 통해 ㅍㅔ이지 로딩ㅣ 끝난 이후에도 <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver" rel="noopener nofollow">IntersectionObserver</a> polyfill 이나 계속해서 돌아가는 로딩 스피너 같은 것이 CPU를 사용하고 있는지 확인할 수 있다. 또 다른 유용한 도구는 <a href="https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor" rel="noopener nofollow">Performance Monitor</a> 탭이다.</li><li id="def7"><strong>Memory usage</strong> : 메모리 사용량은 분석하기가 훨씬 어려웠지만 최근에는 도구가 많이 향상되었다.</li><li id="264a">Disk usage : 디스크 사용량 제한은 웹 애플리케이션 시나리오에서 가장 중요한 요소다. 기기에서 사용 가능한 저장 용량에 따라 브라우저 할당량 제한이 달라진다. 이미지같은 자원뿐 아니라 자바스크립트도 영향을 줄 수 있다.</li></ul><h2 id="30ca"><a href="https://github.com/vuejs/rfcs/blob/ie11/active-rfcs/0038-vue3-ie11-support.md" rel="noopener nofollow">Vue3 IE11 지원계획 중단</a></h2><p id="76b4">Vue3 가 발표되고 안정화되면 IE11을 지원하는 계획이 있었다. Microsoft 365, 워드프레스 등 여러곳에서 IE11지원을 중단하고 있으며 글로벌 점유율도 1퍼센트 아래로 낮아진 반면, 해당 작업의 복잡도를 보았을때 우선순위가 떨어진다고 판단.</p><h2 id="0534"><a href="https://css-tricks.com/platform-news-rounded-outlines-gpu-accelerated-svg-animations-how-css-variables-are-resolved/#svg-animations-are-now-gpu-accelerated-in-chrome" rel="noopener nofollow">SVG animations are now GPU-accelerated in Chrome</a></h2><p id="6e93">최근까지는 CSS를 통해 SVG 요소에 애니메이션을 적용하면<span id="rmm"><span id="rmm"> </span></span>Chromium 기반 브라우저에서 모든 프레임 (일반적으로 초당 60 회)에서 다시 그리기(repaint)가 트리거 되었다. 이러한 지속적인 다시 그리기(repaint)는 애니메이션의 부드러움과 페이지 자체의 성능에 부정적인 영향을 미칠 수 있다.</p><p id="4771">최신 버전의 Chrome은 SVG 애니메이션에 하드웨어 가속을 사용하여 성능 문제를 해결했다. 이는 SVG 애니메이션이 GPU로 오프로드되고 더 이상 메인 스레드에서 실행되지 않음을 의미한다.</p><h2 id="8ef9"><a href="https://anthonynsimon.com/blog/one-man-saas-architecture/" rel="noopener nofollow">1인 기술 스타트업의 아키텍쳐 스택</a></h2><p id="e9c4">via <a href="https://news.hada.io/topic?id=4055&amp;utm_source=weekly&amp;utm_medium=email&amp;utm_campaign=202116" rel="noopener nofollow">Geek News</a></p><p id="9664">과연 이것이 1인 이 모두 할 수 있는 일인가 싶지만 참고 해볼만한 글. 댓글에 xguru님이 남겨주신 링크들도 볼만하다.</p><h2 id="7187">기타 볼만한 글들</h2><p id="f8fd">iOS에서 input의 폰트 사이즈를 16이상으로 하면 자동으로 줌되는 것을 막을 수 있다.</p><p id="64fa">Pinia is an intuitive, type safe Vue store that you may consider using as an alternative to Vuex.</p></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

Vue Single-File Component Playground 등
Vue Single-File Component Playground
간단히 SFC 코드의 결과를 실시간으로 미리보기 해볼 수 있는 서비스가 생겼다.
JavaScript performance beyond bundle size
자바스크립트 성능 최적화라고 하면 번들 사이즈를 줄이는것에 초점이 맞춰진 경우가 많은데 또 다른 중요한 포인트를 보지 않은 경우가 많다고. 번들사이즈 외에 아래 다섯가지의 포인트를 자세히 짚어주고 있다.
Runtime CPU cost: Parse/Compile/Excuation time 세 가지로 구분가능하며 크롬 DevTools의 Performance 탭을 통해 확인할 수 있고 시크릿모드로 열어서 실행해보길 권장. CPU 혹은 Network throttling 있어서 모바일 환경 등을 실험해볼 수 있다. User Timing API 로이름을 붙여 초기에 비;용이 많이 드는 부분을 집중적으로 살펴볼 수 있다. 그리고 웹펙 플러그인 mark-loader 를 사용하면 각 디펜던시의 runtime cost를 살펴볼 수 있다.
Power usage : 대부분의 경우 웹 사이트가 과도한 전력을 소비하는 경우 이는 메인 스레드에서 과도한 CPU를 소비하기 때문이다. 마찬가지로 크롬 DevTools의 Performance 탭을 통해 ㅍㅔ이지 로딩ㅣ 끝난 이후에도 IntersectionObserver polyfill 이나 계속해서 돌아가는 로딩 스피너 같은 것이 CPU를 사용하고 있는지 확인할 수 있다. 또 다른 유용한 도구는 Performance Monitor 탭이다.
Memory usage : 메모리 사용량은 분석하기가 훨씬 어려웠지만 최근에는 도구가 많이 향상되었다.
Disk usage : 디스크 사용량 제한은 웹 애플리케이션 시나리오에서 가장 중요한 요소다. 기기에서 사용 가능한 저장 용량에 따라 브라우저 할당량 제한이 달라진다. 이미지같은 자원뿐 아니라 자바스크립트도 영향을 줄 수 있다.
Vue3 IE11 지원계획 중단
Vue3 가 발표되고 안정화되면 IE11을 지원하는 계획이 있었다. Microsoft 365, 워드프레스 등 여러곳에서 IE11지원을 중단하고 있으며 글로벌 점유율도 1퍼센트 아래로 낮아진 반면, 해당 작업의 복잡도를 보았을때 우선순위가 떨어진다고 판단.
SVG animations are now GPU-accelerated in Chrome
최근까지는 CSS를 통해 SVG 요소에 애니메이션을 적용하면 Chromium 기반 브라우저에서 모든 프레임 (일반적으로 초당 60 회)에서 다시 그리기(repaint)가 트리거 되었다. 이러한 지속적인 다시 그리기(repaint)는 애니메이션의 부드러움과 페이지 자체의 성능에 부정적인 영향을 미칠 수 있다.
최신 버전의 Chrome은 SVG 애니메이션에 하드웨어 가속을 사용하여 성능 문제를 해결했다. 이는 SVG 애니메이션이 GPU로 오프로드되고 더 이상 메인 스레드에서 실행되지 않음을 의미한다.
1인 기술 스타트업의 아키텍쳐 스택
via Geek News
과연 이것이 1인 이 모두 할 수 있는 일인가 싶지만 참고 해볼만한 글. 댓글에 xguru님이 남겨주신 링크들도 볼만하다.
기타 볼만한 글들
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리
CSS :not(selector) 가상 선택자의 한계 잘 알고 쓰기
16px or Larger Text Prevents iOS Form Zoom | CSS-Tricks
iOS에서 input의 폰트 사이즈를 16이상으로 하면 자동으로 줌되는 것을 막을 수 있다.
Vue Performance Devtool
Pinia 🍍
Pinia is an intuitive, type safe Vue store that you may consider using as an alternative to Vuex.
Vanilla JS에서 SPA 라우팅 시스템 구현하기
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기

2021년 3, 4월에 내가 배운 것들

댓글