Je개발 일지

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

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