Develop Note by J.S.

1. Enum - Enum은 열거형 변수를 객체행태로 정의한 상수의 집합을 생성합니다. 임의의 숫자 또는 문자열을 상수화하여 관리하는 기능입니다. // 숫자 타입(열거형) enum Fruit { apple, // 1 banana, // 2 carrot, // 3 } // 문자열 타입 enum Fruit { apple = 'apple', banana = 'banana', carrot = 'carrot' } function setFruit(fruit :Fruit) { // ... } setFruit(Fruit.apple); - 이렇게 편리해보이는 Enum도 3가지 문제로 인해 대부분의 커뮤니티에서는 Enum 대신 Union Type 사용을 권장하고 있습니다. 1) 타입 오염 (Heterogeneous enu..

1. 동적 컴포넌트 동적 컴포넌트 :is 는 선택된 탭에 따라 렌더링되는 컴포넌트 기능 및 권한에 따라 노출되는 컴포넌트 기능 등등, 환경에 따른 동적 컴포넌트 렌더링 기능입니다. 2. 예제코드 동적 컴포넌트 렌더링 방법에 대한 예제 코드 입니다. markRow : 객체를 원시로 표현한 뒤 반환하여 반응형 시스템에서 관찰되지 않아 불필요한 재렌더링을 줄여 애플리케이션의 성능을 최적화함. markRow로 인하여 watch가 동작되지 않을 경우 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); 참고사이트 https..

Cypress의 Custom Commend를 활용한 Login, Logout Test 입니다. 1. Commend 등록 cypress/support/commonds.ts 파일과 cypress/support/index.d.ts 에 사용할 Custom Command를 정의합니다. // cypress/support/commands.ts file // 요소 가져오기 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`); }); // 요소 접근 후 클릭 Cypress.Commands.add('actionClick', (selector) => { return cy.get(`[data-cy=${selector}]`)...

Cypress의 선택자의 경우 아래 이미지와 같은 방법이 있으며, Cypress 공식 문서에 따르면 변화의 가능성이 낮은 방법이 안전하다고 명시되어 있습니다 . Cypress 테스팅 코드 작성 시 자주 사용되는 기능을 Custome Command로 설정하여 코드를 효율적으로 작성 할 수 있습니다. Command 사용법에 대한 간단한 예제입니다. 1. cypress/support/command.ts // cy.get() Command등록 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`) }) 2. cypress/support/e2e.ts import './commands' 3. cypress/suppor..

Vite Tool을 이용하여 Vue3 + Typescript 프로젝트 생성 및 초기 Config File에 대한 설명 입니다. 1. vue 프로젝트 생성 $npm init vue@latest 프로젝트에서 사용할 기능들을 체크하여 생성합니다. 테스트는 Typescript, Vue Router, Pinia, ESLint, Prettier를 선택하여 프로젝트를 생성하였습니다. 모듈 설치 $npm install DevServer 실행 $npm run dev Build $npm run build 2. Vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitej..

Vue3 에서 타입지정 할 때 Vue3의 타입스크립트가 익숙치 않은 경우 타입지정이 까다롭습니다. 주로 사용하는 기능에 대한 타입 지정 방법입니다. 1. ref import { ref } from 'vue' import type { Ref } from 'vue' // 변수에 직접 type을 지정하는 case const year: Ref = ref('2020') year.value = 2020 // ok! // or //ref 함수 호출 시 제네릭으로 타입을 지정하는 case const year = ref('2020') year.value = 2020 // ok! 2. reactive import { reactive } from 'vue' interface Book { title: string year?:..