Je개발 일지

1. Store Reset 1-1) Pinia 사용 Vue3 프레임워크를 사용할 때 사용하는 중앙 상태 관리 라이브러리는 Pinia 다. Pinia 는 두 가지 방식으로 코드를 작성할 수 있다. 첫 번째는, Optional API 처럼(혹은 이전 중앙 상태 관리 라이브러리였던 Vuex 처럼) 사용하는 방법과 Composition API 처럼 사용하는 방법이다. 아래의 코드가 Optional API(혹은 Vuex) 처럼 사용하는 방법이다. import { defineStore } from 'pinia' export const useStore = defineStore('storeId', { // arrow function recommended for full type inference state: () =>..

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

1. 페이지 루프 기능에 대한 요구사항 이번 프로젝트를 진행하면서 UI/UX 에 대한 고민을 굉장히 많이 했다. 부문장님이 우리 프론트엔드 개발자들에게 기대하셨던 건 "데이터를 어떻게 보여줄 것인가" 였고, 또 회사에는 디자이너가 없어 내가 맡은 페이지는 내가 디자인해야 했기에 UI/UX 에 대한 고민을 많이 할 수밖에 없었다. 그래서 나는 UI/UX 관련 서적 총 4권과 웹 자료 1개를 읽으며 UI/UX 에 대한 지식을 넓혔다. 팀에 UI/UX 공부한 것을 바탕으로 발표하는 시간을 가졌었는데, 그때 부문장님, 팀장님을 비롯해서 가장 호응을 많이 얻은 것이 "페이지 루프" 기능이었다. "페이지 루프" 기능이란 사용자가 A 라는 페이지에서 b 라는 정보가 궁금해졌다면, b 의 정보를 자세하게 다루는 B 페..

[ 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/template-refs.html Template Refs | Vue.js vuejs.org Vue 의 선언적 렌더링은 대부분 직접적인 DOM 작업을 추상적으로 실행하지만(* 간접적으로 실행한다는 의미) 일을 하다 보면 실제 DOM element에 직접 접근해야할 때가 있다. 이런 경우에는 ** ref ** 의 특별한 속성을 사용해서 해결할 수 있다. ** ref ** 는 ** v-for ** 의 ** key ** 속성과 비슷한 특수 속성이다. 특정 DOM element, 혹은 하위 구성 element 인스턴스를 마운트된 이후에 이를 직접 참조할 수 있도록 도와준다. 타사 라이브러리를 초기화할 때도 이런 방법은 유용할..

[ 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..