<div id="readability-page-1" class="page"><div><div><a rel="noopener" href="/?source=post_page-----f8cae4de514d--------------------------------"><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><p id="5383">Vue3 관련</p><p id="d4c4">Vue3의 가상 돔(Vertual DOM)에 대해 자세히 알아보는 글이다. Vue는 가상 돔을 통해 컴포넌트 계층 구조를 표현하며 변경들이 일어나면(예를들면 props) 무엇을 업데이트 해야하는지 찾아내고 새로운 표현(representation)을 계산하여 돔에 반영한다. 이 글은 가상돔을 탐색해서 특정 컴포넌트를 찾는 함수를 만드는 과정을 통해 Vue의 가상 돔 처리에 대해 깊이 들여다보는 것을 목표로 한다. 글쓴이 <a href="https://lmiller1990.github.io/" rel="noopener nofollow">Lachlan Miller</a>는 Vue.js 팀의 멤버이며 <a href="https://www.cypress.io/" rel="noopener nofollow">Cypress</a>에서 일하고 있다.</p><h2 id="fd86">Vuex가 정말 필요한가?</h2><p id="dbe3">이글에서 말하는 Vuex가 필요한 상황은 결론적으로 아래 세가지 케이스이다.</p><ul><li id="4e46">앱의 규모가 커질때</li><li id="08d6">데이터 흐름이 복잡해졌을때</li><li id="5da7">컴포넌트 구조가 복잡해졌을때</li></ul><p id="7d73">아무 생각없이 도입하기 보다는 왜 필요한지 알고 도입하라는 것을 강조하고 있다. 더불어 Vuex외에도 상태관리 라이브러리들을 추천하고 있다. 장황한 코드를 만들어내는 Vuex가 좀 성가시다면 다른 라이브러리도 검토해볼 만한것 같다.</p><h2 id="dde4">Vue3 새기능 Teleport 사용법</h2><p id="1942">Vue<span id="rmm"><span id="rmm">2</span></span>에서 모달 컴포넌트를 만들고, 그것을 사용한다고 상상해보자. 모달 컴포넌트는 그것의 사용자인 부모 컴포넌트 안에서 구현될 수 밖에 없었다. 모달은 항상 모든 요소의 상위 레아웃에 위치하여야 하는데 레이아웃이 복잡해지면 제어하기가 힘든 상황이 벌어질 수 있다. Vue3의 Teleport는 내가 원하는 위치(예컨대 미리 만들어 놓은 #app 밖의 별도 요소)에 렌더링 되도록 할 수 있다. (물론 Vue2에서도 별도의 라이브러리를 설치하여 구현가능하긴 했다) 이 글에서 자세한 사용법을 안내하고 있다.</p><h2 id="3d38">스터디</h2><p id="949a">2020년 12월부터 사내에서 세미나를 통해 공부하고 있는 책들이다. 두 책이 겹치는 내용이 꽤 된다. You Don’t Know JS는 중급자 이상이면 볼만한 책인것 같다. 타입과 문법 부분을 보고 있는데 자바스크립트의 타입에 대한 내용이 꽤 자세하게 다뤄지고 있다. 예컨대 명세에서 정의된 추상연산(ToPrimitive, ToString 등)의 로직을 설명해주고 어떻게 암시적인 타입변환이 이루어지는지 이해할 수 있도록 안내한다.</p><p id="f70d">Deep JavaScript도 타입변환(type coercion)에 대해 자세히 다루는데, 이 책에서는 추상연산을 자바스트립트 언어로 구현하여 좀 더 자세히 추상연산의 로직을 이해할 수 있도록 안내한다. 한글판이 없기 때문에 시간이 많이 들어가는 관계로 한글 책먼저 선행을 하기로 했다. <a href="https://exploringjs.com/deep-js/" rel="noopener nofollow">웹으로는 무료</a>로 볼 수 있다.</p><p id="a9d3">당연히도 일주일에 한번 화상회의 도구를 통해 하고 있고 한사람씩 돌아가면서 발제를 한다. 발제라는것이 거창해 보이는데 따로 문서나 장표를 준비할 필요는 없고 자신이 책에 메모한것을 그대로 공유하면서 말로 설명한다. 가끔 필요하면 코딩도 실시간으로 보여준다.</p><p id="5006">원격으로 하다보니 이북으로 이렇게 진행하게 될 수 밖에 없는데 오히려 종이책으로 하는것 보다 장점이 더 많은것 같다고 느껴졌다. 나중에 오프라인으로 하더라도 노트북으로 이북과 코딩화면을 실시간으로 공유(대형화면으로 함께 보던 각자 노트북으로 보던)하면서 진행하면 좋을것 같다.</p><h2 id="c13b">기타 읽어볼만한 글들</h2></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

Vue3 관련
Diving into the Vue 3’s Virtual DOM
Vue3의 가상 돔(Vertual DOM)에 대해 자세히 알아보는 글이다. Vue는 가상 돔을 통해 컴포넌트 계층 구조를 표현하며 변경들이 일어나면(예를들면 props) 무엇을 업데이트 해야하는지 찾아내고 새로운 표현(representation)을 계산하여 돔에 반영한다. 이 글은 가상돔을 탐색해서 특정 컴포넌트를 찾는 함수를 만드는 과정을 통해 Vue의 가상 돔 처리에 대해 깊이 들여다보는 것을 목표로 한다. 글쓴이 Lachlan Miller는 Vue.js 팀의 멤버이며 Cypress에서 일하고 있다.
Vuex가 정말 필요한가?
Do you really need Vuex? - LogRocket Blog
이글에서 말하는 Vuex가 필요한 상황은 결론적으로 아래 세가지 케이스이다.
앱의 규모가 커질때
데이터 흐름이 복잡해졌을때
컴포넌트 구조가 복잡해졌을때
아무 생각없이 도입하기 보다는 왜 필요한지 알고 도입하라는 것을 강조하고 있다. 더불어 Vuex외에도 상태관리 라이브러리들을 추천하고 있다. 장황한 코드를 만들어내는 Vuex가 좀 성가시다면 다른 라이브러리도 검토해볼 만한것 같다.
Vue3 새기능 Teleport 사용법
What is Teleport Component in Vue.js 3? | Qirolab
Vue2에서 모달 컴포넌트를 만들고, 그것을 사용한다고 상상해보자. 모달 컴포넌트는 그것의 사용자인 부모 컴포넌트 안에서 구현될 수 밖에 없었다. 모달은 항상 모든 요소의 상위 레아웃에 위치하여야 하는데 레이아웃이 복잡해지면 제어하기가 힘든 상황이 벌어질 수 있다. Vue3의 Teleport는 내가 원하는 위치(예컨대 미리 만들어 놓은 #app 밖의 별도 요소)에 렌더링 되도록 할 수 있다. (물론 Vue2에서도 별도의 라이브러리를 설치하여 구현가능하긴 했다) 이 글에서 자세한 사용법을 안내하고 있다.
스터디
Deep JavaScript: Theory and techniques
You Don't Know JS : 타입과 문법, 스코프와 클로저
2020년 12월부터 사내에서 세미나를 통해 공부하고 있는 책들이다. 두 책이 겹치는 내용이 꽤 된다. You Don’t Know JS는 중급자 이상이면 볼만한 책인것 같다. 타입과 문법 부분을 보고 있는데 자바스크립트의 타입에 대한 내용이 꽤 자세하게 다뤄지고 있다. 예컨대 명세에서 정의된 추상연산(ToPrimitive, ToString 등)의 로직을 설명해주고 어떻게 암시적인 타입변환이 이루어지는지 이해할 수 있도록 안내한다.
Deep JavaScript도 타입변환(type coercion)에 대해 자세히 다루는데, 이 책에서는 추상연산을 자바스트립트 언어로 구현하여 좀 더 자세히 추상연산의 로직을 이해할 수 있도록 안내한다. 한글판이 없기 때문에 시간이 많이 들어가는 관계로 한글 책먼저 선행을 하기로 했다. 웹으로는 무료로 볼 수 있다.
당연히도 일주일에 한번 화상회의 도구를 통해 하고 있고 한사람씩 돌아가면서 발제를 한다. 발제라는것이 거창해 보이는데 따로 문서나 장표를 준비할 필요는 없고 자신이 책에 메모한것을 그대로 공유하면서 말로 설명한다. 가끔 필요하면 코딩도 실시간으로 보여준다.
원격으로 하다보니 이북으로 이렇게 진행하게 될 수 밖에 없는데 오히려 종이책으로 하는것 보다 장점이 더 많은것 같다고 느껴졌다. 나중에 오프라인으로 하더라도 노트북으로 이북과 코딩화면을 실시간으로 공유(대형화면으로 함께 보던 각자 노트북으로 보던)하면서 진행하면 좋을것 같다.
기타 읽어볼만한 글들
browserslist 쾌속 가이드
자바스크립트 개발자를 위한 ReasonML
[영상 후기] 리팩토링의 작업 흐름 - 마틴 파울러
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이),
이메일로 소식을 받아보고 싶으시다면 이메일 구독하기

12월에 내가 배운 것들

댓글