DEVLOG DEVLOG

Vue 컴포넌트에 재사용 가능한 기능을 사용할 수 있게 해주는 유연한 방법 mixin 객체는 모든 컴포넌트 옵션을 포함할 수 있음 컴포넌트에서 mixin을 사용하면 mixin의 모든 옵셜들은 컴포넌트 고유 옵션에 혼합됨 @Component class TestMixin extends Vue { private name: string = 'Test Mixin' private mounted(): void { console.log(`${this.name}`); } } @Component({ mixins: [TestMixin] }) export default class TestComponent extends Vue { private mounted(): void { console.log('Test Component'..

에러 Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 해결방법 // 기존 코드 TEST // 해결 방법 TEST test('test')}>TEST // 매개변수가 있는 케이스

전역 API Vue.extends(options) 전달인자 {Object} options 사용방법 Vue 생성자의 하위 클래스를 만듦 전달인자는 옵션을 포함하는 객체 Vue.nextTick([callback, context]) 전달인자 {Function} [callback] {Object} [context] 사용방법 다음 DOM 업데이트 사이클 이후 실행하는 콜백을 지연시킴 DOM 업데이트를 기다리기 위해 일부 데이터를 변경한 직후 사용해야함 this.$nextTick(() => { console.log('next tick'); }) this.$nextTick().then(() => { console.log('usage as a promise'); }) Vue.set(targ..

beforeCreate Vue 인스턴스가 초기화 된 직후에 실행 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드도 접근할 수 없음 created 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드에 접근 가능 이벤트 리스너 선언을 하기에 적합 beforeMount 템플릿의 여부를 확인한 후 렌더링하여 가상 DOM이 생성됨 가상 DOM이 실제 DOM에 부착되진 않음 mounted 가상 DOM이 실제 DOM에 부착되고 난 후에 실행됨 this.$el에 접근할 수 있음 자식 컴포넌트가 mount된 이후에 부모 컴포넌트가 mount됨 beforeUpdate 컴포넌트에서 사용되는 데이터의 값이 변해서 DOM에 변경사항을 적용시키기 전에 실..

this는 크게 4가지 정도의 방법으로 사용됨 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별됨 1. 기본 바인딩 (전역 객체) javascript 실행 환경의 전역 객체 (브라우저는 window 객체) this가 전역 객체를 context 객체로 갖음 전역 스코프에서 정의한 변수는 전역 객체에 등록됨 this.test1 = 'Test1'; console.log(this.test1) // 'Test1' const doSomething = () => { this.test2 = 'Test2'; } console.log(this.test1); // 'Test1' console.log(this.test2); // undefined doSomething(); console.log(thi..

vscode extension 설치 npm 모듈 설치 npm i -D eslint-config-airbnb eslint-plugin-prettier eslint-config-prettier 루트에 config 파일 추가 // .eslintrc.js module.exports = { env:{ browser:true, es6:true, node:true, }, extends: ['eslint:recommended','airbnb','plugin:prettier/recommended'], rules:{ 'react/jsx-filename-extension': ['error', {'extensions':[".js",".jsx"] } ] } }; // prettierrc.js module.exports = { ..

엔티티 필드들을 변형할 때 유용 Installation $ npm i --save @nestjs/mapped-types Mapped types PartialType : 모든 필드들을 optional로 구성 PickType : 선택된 필드들을 구성 OmitType : 선택된 필드들을 제외한 나머지 필드들로 구성 IntersectionType : 두 타입을 하나로 합쳐 구성 참조 nestjs/mappled-types

// .vscode/sttings.json { "eslint.validate": [ "vue", "javascript", "javascriptreact", "typescript", "typescriptreact", ], "eslint.alwaysShowStatus": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }