FrontEnd (16) 썸네일형 리스트형 Lighthouse First Contentful Paint(FCP) - 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는데 걸리는 시간에 관한 지표 - FCP는 총점을 계산할때, 10%의 가중치를 갖습니다. Speed Index - 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표 Lagest Contentful Paint(LCP) - 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 랜더링 되기까지 걸리는 시간을 나타내는 지표 Time to Interactive(TTI) - 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표 Total Blocking Time - 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간.. node + typescript + batch 간단한 웹 크롤링 성격의 배치성격의 프로젝트를 만들일이 있어 Spring Batch로 만들기는 좀 오버인듯해서 간단히 구축해봤다 node등 기본 설치가 되있다는 전제한다. npm init을 통해 package.json 파일을 생성한다. $ npm init typescript가 설치 되있지 않을경우 타입스크립트를 설치한다. npm install -g typescript typescript를 초기화 한다. tsc --init batch처리를 할수있도록 cron 할수있는 npm 모듈을 설치하고 관련 type 을 install 한다. npm install --save node-cron npm install --save @types/node-cron package.json { "name": "crawler_bat.. Vue3 Migration lazyLoading import { defineAsyncComponent } from 'vue' import ErrorComponent from './components/ErrorComponent.vue' import LoadingComponent from './components/LoadingComponent.vue' // 옵션이 없는 비동기 컴포넌트 const asyncModal = defineAsyncComponent(() => import('./Modal.vue')) // 옵션이 있는 비동기 컴포넌트 const asyncModalWithOptions = defineAsyncComponent({ loader: () => import('./Modal.vue'), delay: 200, timeout: 3000, error.. 외부에서 Router 컴포넌트 접근하기 Vue Transition 정의 Dom 요소의 진입 , 진출 관리 대상요소가 Dom에 추가될때는 enter , 대상요소가 Dom에서 제거될 때는 leave라는 문자를 포함한 클래스가 트랜지션 클래스로 적용된다. Enter Leave v-enter v-enter-to v-leave v-leave-to v-enter-active v-leave-active 트랜지션 클래스의 시점 v-enter : 대상 요소가 Dom에 삽입되기 전에 추가되며, 트랜지션이 종료될 떄 사라진다. Enter 엑티브 상태를 나타낸다. v-enter-to : 트랜지션이 실제로 시작될떄 추가되며,트랜지션이 종료될때 사라진다. Enter 종료 완료를 나타낸다. v-enter-active : 대상 요소가 Dom에 삽입되기 전에 추가되며, 트랜지션이 종료될때 사라진다... composition api Test Code Vue 3.0에서 가장 기대하는 부분은 Typescript 지원도 있지만 개인적으로는 Composition api 이다 그래서 알아보는중 지금 사용하고있는 버전 2.6에서도 사용할수가 있었다 에반유가 리액트 hooks에서 영감을 받아서 만들었다고 한다. 기대하는 이유는 프로젝트에서 개발시 컴포넌트를 잘 세분화 한다하여도 개발을 하다보면 한 콤포넌트 내에 많은 처리가 method , data에 구현하게 된다 이부분을 몬가 구룹화 시키기 위해 많은 고민을 하였고 결국엔 mixin으로 처리를 하였으나 몬가 한구석 이건 아닌데라는 생각이 있었다. 그러던중 react의 hook을 알게되었고 내가 원하는 부분이 리액트의 hook으로 처리가 가능하였다 그래서 vue 3 major 업그레이드에서 리액트 hook에서 영.. dynamic component Injection Plugin 페이지별 Vue Instance 생성하여 작업해야하는 환경에서 Store를 사용할수도 없고 메인 페이지가 없다보니 공통 화면 처리하는 부분이 애매한 부분이 있었다 그렇다고 각 페이지별로 매번 간단한 공통 component를 선언해서 사용하기는 싫었다 그래서 component를 동적으로 주입 할수있는 방안을 검토하였고 아래와같이 구현하였다 아래소스는 custom 공통 alert 창을 각 페이지에서 메소드 호출로만 가능하게 하기 위한 plugin 이다. 주 소스 구조는 각 vue 페이지에서 alert 창 요청시 ex) this.$.alert('TEST'); 해당 common-alert를 동적으로 주입시킨후 해당 alert component를 호출하는 구조이다. 아래와 같은 plugin을 제공해줌으로서 각 페.. [JS] THIS 다른언어에서 this 개념을 접했던 분들이라면 자바스크립트의 this도 같을거란 생각으로 접했다 큰 낭패를 보는 경우가 있다 자바스크립트의 this는 다른언어에서와 같이 this가 그 함수 그자체를 가리키지 않는다. 그예를 들어보겠다 function foo(num){ console.log("foo:" + num); this.count++; } foo.count = 0; for(let i=0; i 5){ foo(i); } } //foo:6 //foo:7 //foo:8 //foo:9 console.log(foo.count);//0 위결과를 보면 최종 foo.count는 4가 아니고 0을 나타낸다 분명 foo 함수에서 호출될때마다 this.count++;을 하였는데 왜 0일까 즉 this가 자기자신을 가리키지.. 이전 1 2 다음
