Cho's study 웹공부정리

https://github.com/peng-jo/react-metro GitHub - peng-jo/react-metroContribute to peng-jo/react-metro development by creating an account on GitHub.github.com해당프로젝트에서 CRA로 만들었던 프로젝트를 간단하게 VITE로 전환 해보았다.1. vite.config.ts 로 설정파일을 사용한다. envPrefix: "VITE_", -> 접두사 VITE 사용 VITE_API_BASE_URL=http://localhost:3001/metro 사용예) fetch( `${import.meta.env.VITE_API_BASE_URL}/${props.select..

eslint.config 에 rule을 추가하던 도중 rules 속성의 타입이 어떻게 작동하는지 궁금하여 분석타입을 추적하다보면 /* Config.d.ts */type Severity = 0 | 1 | 2;type SeverityString = 'error' | 'off' | 'warn';type RuleLevel = Severity | SeverityString;type RuleLevelAndOptions = [RuleLevel, ...unknown[]];type RuleEntry = RuleLevel | RuleLevelAndOptions;type RulesRecord = Partial>; 이런식으로 rules 속성에 타입이 어떻게 정의되어 있는지 확인 할 수있다.먼저 Partial은 모든 속성을 옵..

'console' is not defined no-undef 에러해결eslint 에서 tseslint  설정 추가를 하던 도중 다음과 같은 에러가 발생하였다. 에러가 난 코드는 다음과 같다.test.tsclass Test { constructor() { console.debug('test'); }}new Test();문제 원인eslint 에서는 console 메서드를 사용하지 않는것을 권장 한다고 한다.공식문서 https://eslint.org/docs/latest/rules/no-console#rule-details해결방법eslint.config 설정 파일에 rules 에 다음과 같이 "no-console" : "off"를 추가하면 된다.경고만 뜨게 하고 싶다면 'warn'을 ..

export default { props: ['foo'], setup(props) { console.log(props.foo) } } props.foo 를 사용하기 위해서는 props 를 "명시적으로" 선언을 해야 한다. title => 정적으로 값이 전달된다. :title => 동적으로 값이 전달된다. export default { props: ['foo'], created() { // ❌ warning, props are readonly! this.foo = 'bar' } } props는 단방향 바인딩을 형성한다. 부모의 data 가 변경되면 자식 컴포넌트의 props.foo가 변경 되어야한다. 그이유는 자식컴포넌트가 부모 컴포넌트의 data 값을 변경하면 데이터 흐름을 이해하기 어려워지기 때문이다...