Develop Note by J.S.

아래와 같은 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"], }

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 사용 시

Typescript로 개발할 때 tsconfig.json에서 주로 사용되는 속성에 관하여 정리해보았습니다. 1. CompilerOptions { "compilerOptions": { "target": "es5", "module": "commonjs", "allowJs": true, "composite": true, "noImplicitAny": true, "removeComments": true, "baseUrl": "./" "paths": { "@/*": ["./src/*"] } "outFile": "./", "outDir": "./", "rootDir": "./", } } target : Compile시에 Typescript 코드를 어떤 버전의 javascript 코드로 변경할지에 대한 설정 modu..

1. Prototype이란? Prototype은 Class가 없는 Javascript에서 객체 기반 프로그래밍을 구현할 수 있도록 객체의 원형을 뜻하는 prototype 객체를 뜻합니다. 기존의 객체를 복사하여 새로운 객체를 생성할 수 있으며 복사된 객체는 기존 객체의 원형인 proptotype 객체를 참조합니다. 참조된 prototype 객체는 __proto__ 프로퍼티에서 확인 할 수 있습니다. 2. 함수의 prototype 예를들어 test라는 이름의 함수를 정의하면 test의 prototype 속성은 javascript의 function기능이 제공하는 객체 원형인 prototype 객체를 참조합니다. 또한 함수를 정의하면 함수 객체로 표현할 수 있으며, 해당 함수 객체의 prototype 프로퍼티..

This란? Javascript의 this 키워드는 함수를 호출한 방법에 따라 this가 가리키는 객체가 변경됩니다. 일반적으로 this는 브라우저에서는 window 전역객체를 가리키고, Node에서는 global 전역객체를 가리킵니다. // 브라우저 this === window; // true // Node.js this === global; // true this 값 할당 전역 범위내에서의 this는 전역객체를 가리키는데 Custom한 객체 내의 프로퍼티 Value로 정의한 함수내에서의 this는 자신이 속한 Custom 객체를 가리킵니다. var Obj = { whatsThis : function () { return this; } } Obj.whatsThis() === Obj // true 또한 ..

Javascript 언어의 가장 중요한 개념 중 실행 컨텍스트를 다뤄보겠습니다. 1. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 뜻합니다. 각 환경에 있는 정보를 모아놓은 실행 컨텍스트가 콜스택에 쌓여 실행이 되기 때문에 실행되는 코드의 환경정보와 순서를 보장할 수 있게 합니다. 실행 컨텍스트가 활성화 될 때 호이스팅, 환경정보 구성, this 값이 설정됩니다. 2. 실행 컨텍스트의 구성 1) 변수객체 (variable environment) 현재 컨텍스트 내부에서 사용하는 식별자(변수) 들의 대한 정보가 생성되며, 외부 환경 정보 및 선언 시점의 렉시컬 환경(Lexical Environment)의 스냅샷 정보를 담습니다. 렉시컬 환경이란 변수객체에 호이스팅된 변수 및 함수들의..

1. CSS in CSS 일반적으로 CSS 코드를 작성하는 것으로 내부 스타일시트, 외부 스타일시트, 인라인 스타일 방법으로 작성 할 수 있습니다. 내부 스타일 시트 ... 외부 스타일 시트 //외부에 작성된 style.css 파일을 .html 에서 호출 인라인 스타일 This is a heading 2. CSS in JS 자바스크립트 코드에서 CSS를 작성하는 것을 말하며 CSS를 작성할 때 발생되는 문제점들을 해결하기 위한 기능입니다. 예를들어 선택자의 네이밍이 복잡해지는 부분, 상속에 따른 독립성 문제 및 의존관계를 해결할 수 있습니다. 대표적인 CSS in JS 라이브러리로는 'Styled Components'가 있습니다. // myComponent.vue import styled from "st..