Je개발 일지

1. 배경 L 프로젝트는 Vue3 프레임워크를 기반으로 만들었다. 해당 도메인은 굉장히 방대한 양의 데이터(10초마다 데이터를 수집 후 저장)를 활용해 정보를 제공한다. 이는 화면에서 그려야할 게 많다는 것을 의미하기도 한다. 예를 들어, 우리 도메인 중에는 10초 단위의 데이터를 하루치 보여준다거나, 1분 단위의 데이터를 한 달 ~ 두 달의 기간으로 보여주기도 한다. 이게 단순히 tick 을 계산하면 10 * 6 * 1440 개, 1440 * 30 개 정도의 데이터지만, 이는 단순히 Tick 일뿐, 그려야 하는 범례나 데이터의 depth 도 존재해서 우리가 Max Range 를 걸어주지 않으면, 데이터를 받아와서 그리다가 브라우저가 다운되는 경우가 있었다. 부문장님은 "컨텐츠가 좋으면 느리게 렌더링되더..

[ Reference ] https://vuejs.org/guide/essentials/component-basics.html 컴포넌트는 UI 를 독립적이고 재사용 가능한 방향으로 사용할 수 있도록 도와준다. App 을 구성할 때 컴포넌트를 중첩해서 사용하는 것은 일반적인 형태다 컴포넌트를 중첨ㅂ해서 사용하는 것은 일반 HTML 을 사용하는 것과 유사해 보인다. 하지만 Vue 는 독자적인 컴포넌트 모델을 사용하고 있으며 개발자가 작성한 컨텐츠나 로직을 각 컴포넌트에서 캡슐화할 수 있다. 1. Defining a Component build 의 과정을 거친다면, 우리는 보통 ** .vue ** 확장자(이 확장자가 SFC 를 의미) 를 사용해서 Vue 컴포넌트를 만들 것이다. You clicked me {{..

[ Reference ] https://vuejs.org/guide/essentials/watchers.html Watchers | Vue.js vuejs.org 1. Basic Example Vue 에서는 ** computed ** 를 이용해서 값을 선언적으로 계산할 수 있다. 하지만 상태 변화에 따라 발생하는 사이드 이펙트를 다뤄야하는 상황이 발생하기도 한다. 예를 들어서 DOM 을 조작한다고 할 때, 혹은 비동기 연산의 결과에 따라 다른 상태를 변경해야하는 것 등이 있다. 이런 경우 Composition API 의 watch 함수를 사용하면 반응성 있는 상태가 변경될 때마다 콜백 함수를 실행할 수 있다. Ask a yes/no question: {{ answer }} (* 위의 예제 코드를 잠깐 해..

[ Reference ] https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org https://vuejs.org/api/composition-api-lifecycle.html Composition API: Lifecycle Hooks | Vue.js vuejs.org 원래는 Essentials 의 내용만을 적고 상세한 내용들은 다음에 옮기려고 했으나 이번에는 이 두 가지를 한 번에 같이 하는 것이 더 효율적이라는 생각이 들어서 함께 사용하기로 했다. !! 주의점: 여기에서 설명하는 라이플 사이클 hook은 모두 Composition API 에서만 사용하는 것들입니다. Options API 의 라이플 사이클 훅..

[ Reference ] https://vuejs.org/guide/essentials/forms.html Form Input Bindings | Vue.js vuejs.org 1. Basic Usage Text Message is: {{ message }} ** v-model ** 을 사용할 때 주의할 점은 IME 가 필요한 언어, 즉 한글은 작성하고 있는 중에 업데이트 되지 않는다. 쉽게 설명하면 한 글자로 업데이트가 되며, 키를 입력하는 자음, 모음 각각 하나에 반응해서 업데이트 되지 않다는 말이다. 그렇기에 한글을 사용할 때 사용자의 경험을 제대로 주고 싶다면 input 태그에 이벤트를 발생시켜서 이벤트 핸들러로 데이터를 바인딩 하는 방식이 필요하다. {{ msg3 }} Multiline Text..

[ Reference ] https://vuejs.org/guide/essentials/event-handling.html Event Handling | Vue.js vuejs.org 1. Listening to Events 이벤트를 실행하기 위해서 ** v-on ** 이라는 디렉티브를 사용할 수 있다. ** v-bind ** 를 ** : ** 로 축약할 수 있듯이 ** v-on ** 은 축약형으로 ** @ ** 을 사용할 수 있다. 이벤트 핸들러를 사용하는데는 두 가지의 방법이 있다. 첫 번째는 Inline, 두 번째는 Method 다. 2. Inline Handlers Inline handler 는 굉장히 간단하고 전형적인 방식이다. const count = ref(0) Add 1 Count is: ..

[ Reference ] https://vuejs.org/guide/essentials/list.html List Rendering | Vue.js vuejs.org 1. v-for ** v-for ** 디렉티브는 배열에서 item들을 렌더링할 때 사용할 수 있다. ** v-for ** 디렉티브는 ** item in items ** 라는특별한 구문을 필요로 한다. 여기서 items 는 array 를 의미하고 item 은 각 array 의 요소 별칭이다. const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) {{ item.message }} ** v-for ** 는 상위 범위 속성에 모두 접근할 수 있고, 내부에서 만들 수 있는 두 번째 별칭은 inde..

[ Reference ] https://vuejs.org/guide/essentials/conditional.html Conditional Rendering | Vue.js vuejs.org 1. v-if directive 중의 하나인 ** v-if ** 는 블록에서 조건부 렌더링하고 싶을 때 사용한다. 해당 블록은 디렉티브의 표현식이 true 값을 반환될 때만 렌더링된다. Vue is awesome! 2. v-else ** v-else ** 는 ** v-if ** 의 else 블록이다. ** v-else ** 에리먼트는 반드시 ** v-if ** 나 ** v-else-if ** element 뒤에 따라가야 하며 그렇지 않은 경우 인식되지 못한다. Toggle Vue is awesome! Oh no 😢 ..

[ Reference ] https://vuejs.org/guide/essentials/class-and-style.html Class and Style Bindings | Vue.js vuejs.org 데이터 바인딩이 필요한 일반적인 이유는 Element 의 클래스와 인라인 Style 을 조작하기 위함이다. 둘 다 속성(attribute) 이기 때문에 ** v-bind ** 를 이용해서 조작할 수 있다. 식을 사용해 마지막 문자열만 계산만 하면 된다. 하지만, 문자열만 가지고 계산하는 과정에서 생기는 간섭은 귀찮고 에러를 쉽게 유발한다. 이런 이유들로 Vue 에서는 ** v-bind ** 를 class 와 style 에 접목시킬 때 특별한 기능을 추가했다.문자열 뿐만 아니라 ** v-bind ** 로 ..

[ Reference ] https://vuejs.org/guide/essentials/computed.html Computed Properties | Vue.js vuejs.org 1. Basic Example Template 표현 방식은 매우 편리하지만 그만큼 간단한 작동을 위한 것이라는 의미도 내포한다. 너무 많은 로직을 Template 안에 넣게 되면 무거워지면서 유지하기가 어려워진다. 반응형 데이터를 포함하는 복잡한 논리의 경우 계산된 속성을 사용하는 것이 권장된다. Has published books: {{ publishedBooksMessage }} 여기에서 계산된 속성을 ** publishedBooksMessage ** 로 선언했다. ** computed( ) ** 함수는 getter 함수..