이 글은 캐싱에 대해 공부한 것 정리 + 삽질 기록입니다.. 정확하지 않을 수 있습니다. 얼마 전에 성능 최적화와 관련해서 cache-control이라는 것에 대해 알게 되었다. 이것을 이용하면 한 번 요청했던 리소스를 다시 요청할 필요가 없으니 프로젝트의 성능 개선에 도움이 될 것 같았다. 일단 프로젝트에 적용하기 전에 캐시가 무엇인지 공부하는 시간을 가졌다. HTTP 캐시 HTTP 캐시는 리소스에 대한 특정 요청의 응답을 저장하고, 이를 재사용하는 것을 이야기한다. 따라서 이후에 동일한 요청이 발생했을 때 서버에 직접 요청을 보낼 필요 없이 캐시 된 응답을 반환하면 되므로 클라이언트 입장에서는 응답을 빠르게 받을 수 있고, 서버 입장에서는 트래픽을 줄일 수 있다는 이점이 있다. (성능 측면에서 효율적..

Netlify Serverless Functions 보안을 위해 API_KEY와 같은 민감한 정보들이 노출되지 않도록 서버리스 함수를 적용해보자. Netllify 서버를 통해 배포를 하지 않고도 배포 결과를 확인할 수 있도록 명령(script)를 등록한다. // package.json "scripts": { "dev": "webpack-dev-server --mode development", "dev:netlify": "netlify dev", "build": "webpack --mode production" }, 해당 명령을 사용하려면 Netlify CLI를 설치해야 한다. npm i -D netlify-cli Get started with Netlify CLI Install our CLI (comma..

Vue Router 기초 Vue Router를 이용해서 SPA를 만드는 것은 매우 쉽다. 다음 명령어를 통해 vue router를 설치한다. npm i vue-router@next // main.js import { createApp } from 'vue' import App from '~/App' import router from '~/routes' const app = createApp(App) app.use(router) app.mount('#app') 라우터를 구성해서 플러그인으로 연결하면 $route와 $router 객체를 접근해서 사용할 수 있다. $route 객체는 현재 그 라우트 객체가 사용되는 컴포넌트의 페이지에 대한 정보를 가지고 있다. $router 객체는 페이지에 대한 조작을 할 수..

Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달할 때 props를 사용한다. 만일 조상 요소에서 후손 요소로 데이터를 전달할 때 props로 일일이 전달한다면 굉장히 복잡해질 것이다. 이럴 때 사용할 수 있는 것이 provide와 inject이다. 부모 컴포넌트는 데이터 제공을 위해 provide(제공)옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject(주입) 옵션을 사용한다. Child {{ msg }} 하지만 provide와 inject를 사용해서 전달된 데이터는 반응형 데이터가 아니다. 반응형 작업 상위 컴포넌트의 변경사항에 반응하게 하려면 computed 함수를 사용한다. Child {{ msg.value }} computed 함수를 사용하게 되면 계산된..

컴포넌트 Slots 컴포넌트 태그 사이에 콘텐츠을 입력하면 slot 태그 위치에 작성된다. 만일 작성된 콘텐츠가 없다면 slot 태그 사이에 작성한 내용이 출력되는데 이를 Fallback 콘텐츠라고 한다. {{ msg }} Hello Vue? Hello 이름을 가지는 슬롯 slot에는 이름을 부여할 수도 있다. 상위 컴포넌트에서 v-slot 디렉티브로 접근이 가능하다. v-slot 디렉티브는 #의 약어를 사용할 수 있다. ABC 범위를 가지는 슬롯 slot은 범위를 가질 수 있다. 범위는 해당 슬롯이 사용되는 구간을 의미한다. Hello {{ slotProps.hello }} Hello {{ hello }} 슬롯의 이름은 동적으로 관리할 수도 있다. 동적 컴포넌트 컴포넌트를 동적으로 전환하는 것은 is라..