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

CSS pre-processor로 CSS의 한계와 단점을 보완하여 가독성과 재사용성을 향상 시켜줌 CSS Preprocessor란? CSS가 동작하기 전에 사용하는 기능 CSS보다 간단한 표기법으로 CSS를 구조화하여 표현할 수 있음 CSS에서 제공하지 않는 Mixin 등의 기능을 활용하여 유지보수 편의성을 높여줌 SASS와 SCSS의 차이 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 Superset 선택자의 유효 범위를SASS는 '들여 쓰기'로 구분하고 SCSS는 {}으로 구분 Mixin은 SASS는=로 SCSS는 @mixin으로 선언 Include은 SASS는+로 SCSS는 @include으로 선언

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

트래픽이 많은 웹사이트의 확장성을 위해 설계된 Event Driven 구조의 경량 웹서버 클라이언트의 요청을 받았을 때 요청에 맞는 정적 파일을 응답해주는 HTTP Web Server로 사용 WAS의 부하를 줄일 수 있는 로드 밸런서로 사용 Apache와의 차이점 Apache 쓰레드 / 프로세스 구조로 request 1개를 쓰레드 1개가 처리하는 구조 사용자가 많으면 많은 쓰레드가 생성됨 (메모리, CPU 낭비가 큼) 쓰레드 1개 = 클라이언트 1개 Nginx Event Driven 구조 한 개 또는 고정된 프로세스만 생성해서 사용 (새로운 요청이 들어와도 새로운 프로세스와 쓰레드를 생성하지 않음) 비동기 방식으로 request를 Concurrency하게 처리할 수 있음 즉 적은 자원으로 효율적인 운용을..