Develop Note by J.S.

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

import.meta.env 객체의 값은 Vite 개발 서버가 런타임 환경에서 동적으로 생성합니다. import.meta.env로 생성된 객체는 빌드 시점에 포함되지 않으며, 브라우저에서 접근 가능한 코드에서만 사용할 수 있습니다. build 시점에는 환경변수의 할당된 값이 번들링에 포함됩니다. import.meta.env는 브라우저 환경에서 개발 중에 환경 변수 값을 확인하고 활용하기 위한 목적을 위한 기능이기 때문에 보안적인 측면은 고려되지 않았습니다. 또한 VITE_ 접두사로 정의한 환경 변수만 노출 되기 때문에 그 외 다른 환경변수는 노출되지 않습니다. process.env는 Node.js 환경에서 사용되는 환경 변수 객체입니다. Node.js 환경은 서버 사이드에서 실행되며, 런타임 환경에서는 ..

아래와 같은 TS2345 Error 발생 시 1. cypress/global.d.ts 생성 // ./cypress/global.d.ts declare namespace Cypress { interface Chainable { dataCy(dataTestAttribute: string): Chainable } } 2. tsconfig.json // tsconfig.json cypress 경로 추가 "include": ["cypress/**/*.ts" ,"src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],

1. TS2339 Error Vite에서 환경변수 import.meta.env 사용 시 TS2339 Error 발생 2. 조치 방법 tsconfig.json compilerOptions.types에 "vite/client"를 추가하면 해결됩니다. //tsconfig.json "compilerOptions": { ... "types": ["node", "vite/client"], }

npm trends https://npmtrends.com/ag-grid-community-vs-datatables.net-vs-handsontable-vs-jsgrid-vs-tui-grid 비교 Datagrid 대상은 npm download 횟수 기준으로 선정하였습니다. 1. ag-grid - https://www.ag-grid.com/ 유연하고 고성능의 다양한 기능을 제공합니다. (정렬, 필터링, 페이징 및, 차트, 그룹화, 열고정, 체커보드 테이블 등) Vue3, typescript 개발 환경의 가이드를 제공합니다. 유/무료 라이선스가 제공 됩니다. (community는 상용에도 무료, enterprise는 Trial용도만 무료로 가능) 대량 데이터 처리, 빠른 렌더링 및 고급 기능 필요 시 적합합..

1. GIT 트리(3단계) - GIT은 아래 3개의 트리(파일의 묶음)를 관리하는 시스템입니다. 1) HEAD : 현재 브랜치를 가리키는 포인터이며, 브랜치의 마지막 commit을 가리킵니다. 2) Index : Staging Area라고도 하며 git add 명령어로 stage에 작업한 파일이 올라가는 가상의 공간 3) Working Directory : 내용이 수정된 파일이 존재하는 공간 (Untracked files) * Untracked files - 이력 추적 대상이 아닌 파일, git add로 Index에 올리면 추적 대상으로 등록됩니다. 2. Work Flow 1) 파일생성 or 수정(Working Directory) 2) git add [files] (Index) 3) git commit ..

[속도느림/ 구현단순] 1. 선택정렬 : 0부터 n번째 자리에 순서대로 최솟값을 찾아 앞에 배치 2. 삽입정렬 : 배열의 두번째 index부터 시작하여 앞 index값과 비교해 더 작은 수일 경우 지속적으로 swap하여 앞으로 끌어오는 정렬 3. 버블정렬 : 배열([0,1], [1,2], [2,3])앞뒤 두 index를 비교하며 swap [속도빠름/ 구현복잡] 1. 합병정렬 : 배열 중앙기준 지속적으로 반으로 나눈 후 새로운 배열을 할당한 뒤 기존 나뉜 쌍으로 부분배열의 값 중 작은값을 채워넣는 방식 2. 셀 정렬 : 배열길이/2 만큼의 간격을 늘리고 간격수만큼 배열을 나눈뒤 각 배열을 삽입정렬한다. 이후 기존 간격/2하여 동일하게 반복 3. 퀵 정렬 : 분할, 정복, 결합 3단계로 나뉜다. 0 inde..

Vite로 Vue Project 생성 시 아래와 같은 에러가 발생합니다 . 이때 ./src/ 하위에 shims-vue.d.ts 타입 추론 파일을 생성 한 뒤 아래 코드를 입력해주시면 에러가 발생되지 않습니다. declare module '*.vue' { import type { DefineComponent } from 'vue'; const component: DefineComponent; export default component; } declare module '*.scss'; //scss 사용 시