grace's dev_note

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가지 과정을 거치게 됩니다. 종속성 ..

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입과 객체 타입은 근본적으로 다르다는 의미입니다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다릅니다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값입니다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값입니다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됩니다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됩니다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됩니다. 이를 값에 의한 전달이라 합니다. 이에 비해..

객체란 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체입니다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체입니다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 도는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조입니다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값입니다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됩니다. 자바스크립트에서 가용할 수 있는 모든 값는 프로퍼티 값이 될 수 있습니다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있습니다. 따라서 함수도 프로퍼티 값으로 사용할 ..

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

타입 변환이란? 자바스크립트의 모든 값은 타입이 있습니다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있습니다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 합니다. const x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅합니다. const str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아닙니다. console.log(typeof x, x); // number 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 합니다 .이를 암묵적 타입 변환 또는 타입 강제 변..

프로덕션 버전으로 빌드하고자 한다면 vite build 명령을 실행해주세요. 빌드 시 기본적으로 /index.html 파일이 빌드를 위한 엔드 포인트로 사용되며, 정적 호스팅을 위한 형태로 진행됩니다. 브라우저 지원 현황 빌드된 프로덕션 버전의 경우 모던 Javascript를 지원하는 브라우저에서 동작한다고 가정합니다. 빌드된 프로덕션 버전은 모던 Javascript를 지원하는 환경에서 동작한다고 가정합니다. 따라서 Vite는 기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.meta를 지원하는 브라우저를 타깃으로 하고 있습니다. 만약 자바스크립트 타깃을 지정하고자 한다면, build.target 설정을 이용해주세요. 다만 버전은 최소한 es2015 이상이어야 합니..

MSW 사용 방법 MSW 설치하기 npm install msw --save-dev # or yarn add msw --dev 먼저 MSW 패키지를 설치합니다. 패키지를 설치하고 나면 프로젝트에 MSW를 세팅합니다. Service Worker를 제공하기 위해 사용하고자 하는 프로젝트의 directory를 지정해서 실행해줍니다. npx msw init ./public --save 다음을 실행하고나면 public 디렉토리에 service worker가 만들어지고 package.json에 다음과 같이 표시됩니다 { "name": "your-app", "msw": { "workerDirectory": "public" } } Define Mocks 이제 Mocking 할 API를 핸들링할 핸들러를 만들어주어야 합니..