메로그

svelte.dev svelte 에서 제공하는 간단한 컴퓨팅 환경으로 https://svelte.dev/repl/ 로 들어가면 별도의 설치없이 브라우저에서 스벨트를 경험할 수 있다. 코드를 수정하면, Result 의 결과값이 바로 반영되는 것을 볼 수 있고 자신의 깃허브로 로그인하여 실제로 저장하거나, 깃허브에 fork 까지 할 수 있다. Result 말고도 실제로 js 로 어떤 식으로 파싱되었는지, 어떤 형태인지 전부 알 수 있기 때문에 간단한 컴퓨팅 환경이지만, 유용하게 사용할 수 있으니 스벨트를 처음 시작하는 사람들이라면 한 번 사용해보자.

asyncData lifecycle 에서 asyncData 는 프론트 서버 사이드 렌더링 시점에 발생하며 페이지 로딩 시점에 발생합니다. 또한, 기존 Vue 와 달리 asyncData 를 활용하면 서버사이드에서 처리하기 때문에 SEO 최적화를 할 수 있습니다. nuxt 에서 pages 폴더 아래에 위치하는 컴포넌트에서만 사용할 수 있는 속성으로 페이지 진입전에 호출하고 this 를 사용하지 않음. export default { // params의 id가 1이라고 가정 async asyncData({ params, $http }) { const response = await axios.get(`/users/${params.id}`); const user = response.data; return { use..

nuxt 에서 static 밑에 폴더 헤더정보 보내는 방법 //nuxt.config.js render: { static: { // 여기서 static 폴더 아래에 파일들에 대한 header 정보를 담을 수 있음. setHeaders(res, path, stat) { if (path.indexof('.css') > -1) { res.setHeader('Cache-Control', 'public, max-age=604800') } }

로그인이 되어 있지 않은 경우, 로그인 창으로 보내는 미들웨어 생성 middleware/login.js export default ({ store, route, redirect }) => { // store 에 로그인이 되어 있지 않으면 login 페이지로 리다이렉트함. if (!store.state.isLogin) return redirect('/login') } 해당 미들웨어의 경우, 전역 미들웨어로 nuxt.config.js 에서 router: {middleware: ['login']} 으로 등록해주면 전역으로 사용한다.

웹페이지 성능 개선 방법 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 은 서버에서 사용자에게 보여줄 페이지를 모두 렌더링하여 띄우는 방식으로 요청..