Frontend Development (21) 썸네일형 리스트형 WebPageTest 로 웹 성능 테스트하기 웹 성능을 측정할 때 코어 웹 바이탈 측정치를 가지고 성능을 측정하는것이 대세가 되었다. 코어 웹 바이탈 (Core Web Vitals)은 웹 사이트가 검색 엔진 결과에 표시되는 위치에 영향을 미치는 세 가지 웹 성능 측정값이다. 여기에는 사이트의 전반적인 로딩 속도, 상호작용, 웹페이지의 시각적 안정성, 보안 문제 등 여러 요소를 포함하고 있다. 구글에서는 웹 사이트에 방문하는 유저들의 경험을 좌우하는 여러 요소들 중 가장 기본이자 핵심 지표로 보기 때문에 ‘코어 (Core)’라는 단어를 붙여 부르기도 한다.다시 말해, 코어 웹 바이탈은 웹페이지 유저들의 사용 경험을 측정하는 구글의 표준화된 측정 항목 집합이다. 구글 검색을 효과적으로 활용하고 전체적으로 유저들에게 좋은 환경을 제공하려면 우수한 코어.. [Vue.js] Vite로 Vue.js 3 시작하기 Vue.js 3를 처음 시작할 때 보통 초기 샘플 예제로 실행을 많이 하곤한다. 그중에 Vite 를 이용해 초기 실행 Skeleton을 쉽게 생성할 수 있다. 명령은 아래 내용을 시작하면 초기 Skeleton을 만들기 위한 질의가 시작되고 해당 내용 답변을 하면 내용에 맞게 초기 Stub 코드를 생성해준다.npm init vite 위와 같이 치면.. Project name과 Framework 을 선택하라고 나온다. 적당히 개발 상황과 맞는 내용을 선택한다. 마지막으로 Variant (JavaScript or TypeScript) 여부를 선택하면 초기 프로젝트가 생성이 되고 npm install, npm run dev를 하라고 메세지가 표시된다. 새로 생성한 viet-projeect 로 들어간 후 npm.. [Vue.js] Vue3 개발시 chrome source code 디버깅 Vue3 vue-cli로 기본 프로젝트 생성 후 코드에 debugger로 break를 넣었는데 chrome 브라우저에서 디버깅 동작을 안하는 경우가 있다. 그럴 경우에는 vue.config.js에 아래 내용을 추가해 주면 된다. vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { devtool: 'source-map' => 추가 } }) devtool: 'source-map' 추가 후 npm run dev로 개발 서버를 띄운 후 크롬 개발자 tool에서 보면 debugger 키워드가 정상 도작함.. [Vue.js] Vue Cli 로 Vue3 시작하기 Vue3를 시작하기 전에 node.js가 설치되어 있어야 한다. NVM(Node Version Manager) 을 설치하면 node.js를 편리하게 설치, 관리 할수 있다. 다음 링크에 관련 내용을 작성해 두었다. https://kindloveit.tistory.com/106 node.js가 설치되었으면 Vue Cli(Command Line Interface)를 Global로 설치하도록 한다. $ npm install -g @vue/cli 참고로 Global로 설치를 하면 현재 Local이 아닌 시스템 전역 위치에 설치가 되는데 위치가 궁금할 때가 있다. Global로 설치시 아래 경로에서 설치가 된다. C:\Users\[MyUser]\AppData\Roaming\npm\node_modules 실제로 위.. [Node.js] NVM으로 Node.js 버전 여러개 사용하기 (Windows) 가끔 여러가지 웹 어플리케이션을 하나의 PC에서 개발하다보면 Node 버전이 여러개 필요할 경우가 있다. 억지로 하나의 버전을 맞추자니 어느 한쪽의 수정량이 많거나 수정이 안될수 도 있다. 그럴때는 NVM (Node Version Manager) tool을 사용하여 원하는 시점에 원하는 node 버전으로 switching 을 할 수가 있다. NVM(Windows 버전)은 아래 사이트에서 다운로드 가능하다. https://github.com/coreybutler/nvm-windows/releases/tag/1.1.10 사이트에 진입 후 윈도우즈 설치 바이너리를 다운로드 후에 설치한다. 이미 Node.js가 설치되어 있으면 NVM 설치중에 이미 설치된 버전을 Control 할 것인지를 물어본다. 예를 선택하.. Frontend 서버 webpack, resource download Frontend를 웹서버에 Deploy하고 필요시 webpack 자원과 소스코드를 다운로드 받아야 할 때가 있다. 보통 웹 브라우저로 웹 접속 후 Chrome 개발자 도구에서 sources 항목을 보면 디버그 모드로 deploy된 경우 webpack 소스와 application 소스들이 열람이 가능하다. 개발 중 띄운 Frontend 웹페이지에 접속 하고 크롬 브라우저 F12로 개발자 모드를 열고 Sources 항목에 들어가 보면 좌측에 로딩 되어 있는 소스와 webpack 결과물들이 열람가능함을 볼 수 있다. 로딩되어 있는 소스 파일들을 다운받으려면 chrome 웹 스토어에 있는 Resource Saver라는 확장 프로그램을 설치하면 된다. 크롬 웹 스토어에 진입해서 resource saver로 검색하.. [Vue.js] component ... is, keep-alive 알아보기 component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is props에 의해 결정된다. is props is 속성에는 문자열이나 컴포넌트 이름을 넣는다. keep-alive를 사용하는 동적 컴포넌트 is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다. 그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 엘리먼트로 감싼다. 동적 컴포넌트, Keep-alive 예제 Main.vue Home; Company Home.vue I'm Home Component Company.vue {{getTitle}} add company count.. [Vue.js] Mixin 알아보기 기본 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션들이다. 예제 1) main.vue testmixin.vue 실행결과 Life cyle 훅의 경우 Mixin의 hook이 먼저 실행되고 컴포넌트의 hook이 이어서 실행됨을 볼 수 있다. (created 메소드 참조) 옵션 병합 main.vue export default { name: 'Main', mixins: [testMixin], data() { return { message: 'Hello Main!!', mainData: 'mainData' } }, created: function () .. 이전 1 2 3 다음
