메로그

웹페이지 성능 개선 방법 Lighthouse 를 기반으로 측정하고 나온 항목들을 구글이 추천하는 개선 방법을 사용하여 웹페이지의 성능 개선을 한다. Lighthouse 웹페이지의 품질을 개선할 수 있도록 도와주는 도구로써 개발자도구에 Lighthouse 탭을 이용하거나 npm 모듈을 설치해서 사용하면 됩니다. 크게 5개의 항목을 기준으로 퍼포먼스가 표시됩니다. 퍼포먼스 말고도 Accessibility, Best Practices, SEO, Progressive Web App 를 볼 수 있습니다. FCP: 콘텐츠가 포함된 첫 페인트는 첫 번째 텍스트 또는 이미지가 표시되는 시간을 나타냅니다. 초기 서버 응답을 줄이는 방법으로 폰트 최적화, CSR => SSR, 코드 경량화. LCP: 최대 콘텐츠 렌더링 시..

Nuxt 란? Vue.js 를 가지고 SSR + CSR 같은 웹을 제작할 수 있도록 해주는 프레임워크입니다. CSR vs SSR 기본적으로 SPA 는 CSR 방식으로 최초 페이지를 로딩한 시점부터 페이지 렌더링 없이 부분부분 만을 렌더링하는 방법이다. react, vue 또는 webpack 에 핫로딩이 있다. 하지만, 서버에서 뷰를 렌더링하는 방식이 아닌, 클라이언트에서 HTML, JS, CSS 등 각종 리소스를 다운받은 이후, 렌더링 작업을 하기 때문에 SSR 보다는 초기 화면이 보이는 시간이 길어진다. 이런 방식 때문에 검색엔진에서는 검색시 빈 페이지로 인식하기 때문에 CSR 을 사용하지 않고 SSR 기법을 사용한다. SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 렌더링하여 띄우는 방식으로 요청..

v-click-outside 외부 클릭 이벤트를 발생시킬 수 있는 라이브러리입니다. 설치 yarn add v-click-outside 사용 import Vue from 'vue' import vco from 'v-click-outside' Vue.use(vco)

시맨틱 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. div 태그를 사용해서 영역을 만드는 것이 아닌, header, main, footer 와 같은 의미가 있는 태그를 이용하는 것을 말한다. 시맨틱 태그를 사용하는 이유 검색엔진 최적화 (SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그런 경우에, 시맨틱 태그를 사용하면 더 정확한 구조로 분석할 수 있도록 도와준다. HTML 구조화 HTML 에 코드가 구조화 되어 가독성 및 유지보수가 향상된다. 종류 header: 헤더 영역에 대한 태그. nav: 네비게이션 영역에 사용하는 태그. section: article 보다 큰 영역을 나타낼 때 사용하는 태그. aside: ..

Mixins 믹스인은 여러 컴포넌트 간에 사용하고 있는 로직, 기능들을 재사용하는 기법. 믹스인에 정의할 수 있는 로직은 data, methods, created 등과 같은 컴포넌트 옵션입니다. 사용법 export const HelloMixins = { data() { return { hello: false } }, methods: { showHello() { this.hello = true; }, closeDialog() { this.hello = false; } } // helloForm.vue import { HelloMixins } from './hello.js'; export default { mixins: [ HelloMixins ], methods: { submitHello()..

.env 파일 .env 파일은 기본적으로 환경 변수를 지정하는 파일로 프로젝트 최상위 루트에 존재합니다. 여기서 선언한 환경변수를 받아와 유지보수 및 보안에 이용합니다. 사용법 프로젝트 루트와 동일한 레벨에 .env 파일을 만듭니다. # Temp VUE_APP_TITLE=VUE TITLE VUE_ 키워드로 선언해주어야 애플리케이션에서 접근이 가능합니다. console.log(process.env.VUE_APP_TITLE); // VUE TITLE 웹팩에서도 했겠지만, 빌드와 데브시에 서로 가지고 있는 기존 값이 다름으로 그 값을 이용해서 제어할 수 있음.