grace's dev_note

Computed 템플릿 문법({{ }})은 간단히 사용하면 매우 편리합니다. 하지만 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 예를 들어 아래와 같이 객체가 있는경우: const teacher = reactive({ name: '짐코딩', lectures: [ 'HTML/CSS', 'JavaScript', 'Vue3' ] }) 그리고 에 author가 책을 갖고 있는지 없는지 여부를 표시하고 싶을 경우: 강의가 존재 합니까?: {{ teacher.lectures.length > 0 ? 'Yes' : 'No' }} 이 시점에서 템플릿 표현식은 복잡해지며 선언적이지 않습니다. 또 이러한 코드를 여러곳에서 반복적으로 사용해야 한다면 더더욱 비효율 적일 것입니다. ..

Setup setup() 함수(hook)는 Composition API 사용을 위한 진입점 역할을 합니다. 그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다. 기본 사용 반응형 API(Reactivity API)를 사용하여 반응형 상태를 선언하고 script setup에서 객체를 반환하여 에 노출할 수 있습니다. setup() 함수를 사용할 수 있지만 SFC와 Composition API를 함께 사용하는 경우 script setup을 사용하는 것을 권장하고 있기에, script setup 사용 기준으로 설명하겠습니다. 반환된 객체의 속성은 구성 요소 인스턴스에서도 사용할 수 있습니다(다른 옵션이 사용되는 경우): {{ count }} Props 접근 setup 함수의 첫 번째 매개변수..

Vue3에서 발표한 Composition API에는 크게 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입이 있습니다. API(Reactivity API) ref(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watcher(감시자)와 같은 것들을 만들 수 있습니다. 반응형 {{ reactiveMessage }} Add message 일반 {{ normalMessage }} Add message Vue 인스턴스는 크게 생성(create)되고 DOM에 부착(mount)되고, 업데이터(update)되며, 없어지는(destroy) 4가지 과정을 거치게 됩니다. 종속성 ..

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 표방하고 있지만 코어 라이브러리는 ViewModel에 집중되어 있습니다. 코드의 재활용성이나 속도에 큰 장점이 있는 단일 페이지 어플리케이션(SPA: Single Page Application)을 개발할 때 Router와 같은 공식 라이브러리를 이용할 수 있으며, 여러 컴포넌트들이 상태를 유지하고 데이터를 공유하기 위해서 Vuex와 같은 라이브러리를 이용할 수 있습니다. Vue는 가상노드(VNode)를 생성하는 해당 노드에 먼저 모든 DOM을 구성한 후 브라우저에게 최종 DOM 엘리먼트 변경을 통지함으로써 속도 저하를 방지했습니다. 하지만, 개발이 지속되면서 코드의 길이가 길어져 가독성이 떨어지고, 수많은 컴포넌트들이 공유하는 데이터 ..

지난 게시글에 이어 진행됩니다. 두 가지 에러를 모두 핸들링 해주고 났는데도 불구하고 또 다른 에러가 저의 테스트를 막습니다(...) 제발 테스트 하게 해줘! TypeError: Cannot set properties of undefined (setting 'hasOwnProperty') 이번에 만난 에러는 이런 에러입니다. 각 컴포넌트를 가져오려고하는데 가져오지 못하는걸까? shallowMount 에서 에러가 발생했는데 컴포넌트가 undefined 인 것 처럼 보여서 뭔가 컴포넌트를 인식을 못하는걸까? 해서 틸드 기호로 가져오던 import 도 상대 경로로 수정해보고 파일 확장자를 지정해주지 않아서일까 해서 파일 확장자도 지정해주었는데도 불구하고 에러가 계속해서 발생했습니다. 여러 구글링을 진행해본 결..

지난 게시글에 이어 발생한 jest 에러입니다. 지난 에러를 해결한 후 다시 실행했더니 아래와 같은 에러가 발생했습니다. ReferenceError: location is not defined / ReferenceError: document is not defined The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined 사실 이 에러는 에러 메세지를 읽어보시면 아실 수 있을 ..

react, next에 찌든 뇌를 세탁해서 더 넓은 시야로 프로젝트를 보기 위해 요즘 vue3를 공부하면서 프로젝트를 진행 중입니다. 어느정도 프로젝트가 완성되고 unit 테스트를 위해 jest를 연결 중인데 계속 해서 에러가 나서 이틀 정도 고생했던 것 같습니다. 다른 분들이 저와 같은 문제로 너무 오랜 기간 고민하지 않으셨으면 하는 바램에서 에러 일지를 작성합니다 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to su..