전체 글30 Vite https://vitejs.dev/guide/why.html 문제점 프로젝트가 커지면서 JavaScript 기반의 도구는 성능 병목 현상이 발생. 개발 서버를 동작시키는데 시간이 오래 걸렸다. 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야만 실제 페이지를 제공할 수 있었다. vite의 해결책 몇몇 라이브러리는 몇 백개의 JS 모듈을 가지는 매우 큰 디펜던시에 대한 번들링 과정이 필요했다. vite는 이를 esbuild로 사전 번들링한다. Go로 작성된 esbuild는 기존 번들러(webpack, parcel)에 비해 10-100배 빠르다. vite는 JSX, CSS Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정이 매.. 2022. 12. 1. Vue3 pagination component 페이지네이션이 필요해서 만들까 ui-framework를 사용해서 가져다 쓸까 하다가 지금조차 직접 만들지 않는다면 앞으로는 누가 만든 것을 계속 가져다 쓸 것이고 마음에 안들거나 기능 커스텀이 불가능하거나 스타일 수정이 안되는 등 가져다 쓸 수 없는 상황이 온다면 나는 이 간단한 기능 조차 구현할 수 없을 것만 같다는 생각이 들어 직접 구현했다. vuetify를 사용했어도 됐으나 직접 하고 싶은 마음이 컸다. 많은 사람들이 써줬으면 하는 마음에 코드를 공개하겠습니다. /* Pagination.vue */ {{ text }} {{ text }} {{ data.page + text - (nums+1) }} {{ data.total + text - data.limit }} {{ text }} /* Pagina.. 2022. 11. 29. nuxt 프로젝트에 axios 적용 프로젝트를 생성할때 axios 모듈을 선택한다면 큰 문제는 없지만 기존 프로젝트에 $axios 를 통해 context에 바로 접근하기 위해서는 몇가지 설정이 필요하다. // nuxt.config.js modules: [ "@nuxtjs/axios" ], // nuxt.config.js axios: { // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 baseURL: '/', }, 위와 같이 설정하면 axios 를 import 할 필요없이 $axios로 바로 사용할 수 있지만, 아래와 같은 에러가 발생했다. import axios from 'axi.. 2022. 11. 10. Nuxt란? Nuxt는 직관적인 Vue 프레임워크. 라고 설명하고 있다. https://nuxtjs.org/ The Intuitive Vue Framework Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. nuxtjs.org Nuxt 등장 배경 React의 Next.js와 같이 SSR 프레임워크 중 하나로서 Vue 버전의 SSR 프레임워크이다. CSR(Client Side Rendering) SPA는 일반적으로 자바스크립트 기반 비동기 모델의 CSR 방식으로 동작한다. 검색엔진 크롤링 봇들은 CSR 동작 웹사이트를 크롤링할때 js.. 2022. 11. 9. robots.txt / sitemap.xml 이란? 검색엔진 최적화(SEO, Search Engine Optimization)란 구글, 네이버와 같은 검색엔진의 검색 결과 상위에 랭크되어 많은 사람들이 방문할 수 있도록 하는 것입니다. 검색엔진이 웹사이트를 쉽게 찾아 크롤링하고 색인할 수 있게 해줘야하는데 이때 robots.txt와 sitemap.xml이 필요합니다. robots.txt 란? robots.txt 는 웹사이트에 대한 검색엔진 로봇들의 접근을 조절해주고 제어해주는 역할, 그리고 로봇들에게 웹사이트의 사이트맵이 어디 있는지 알려주는 역할을 합니다. 만약 웹사이트 내 특정 페이지가 검색엔진에 노출되지 않기를 바란다면 robots.txt파일을 설정하여 이를 제어할 수 있습니다. robots.txt 는 일반 텍스트파일로 작성하고 사이트의 루트 디렉토.. 2022. 10. 26. Lit / Lit-element 프론트엔드 작업을 시작하면서 다양한 웹 컴포넌트 프레임워크가 있었다. React / Vue / Angular 등등 요즘은 Svelte가 좀 핫하다. Next.js, Nuxt 같은 SvelteKit도 나왔으니 한번쯤 사용해 볼 법 하다. 내가 만든 서비스 banpick.kr / ggscrim.com 둘 다 'Lit' 을 사용했다. lit.dev Lit Simple. Fast. Web Components. lit.dev https://github.com/lit/lit/ GitHub - lit/lit: Lit is a simple library for building fast, lightweight web components. Lit is a simple library for building fast, lig.. 2022. 9. 15. 이전 1 2 3 4 5 다음
