Framework5 상태관리, useState에 관하여 state란 상태라는 뜻이며 React, Vue 와 같은 SPA를 쉽게 만들도록 도와주는 웹 프레임워크, 라이브러리에서는 화면을 리렌더링하는 시점, 상황을 쉽게 개발자가 컨트롤 하기 위해 변수 형태로 사용을 합니다. 예를들어, 버튼을 눌렀을 때 화면에 나타나 있는 숫자 값이 증가하는 페이지가 있습니다. 이 때, 버튼을 눌러도 화면에 나타나 있는 숫자 값은 변하지 않습니다. 이미 html파일을 불러온 상태이므로 변수값이 바뀌어 콘솔창에는 증가하는 값이 찍히더라도 화면은 바뀌지 않아야합니다. 동적인 웹 이라는 개념이 생긴 web2가 나타난지 20년 가까이 됐습니다. 그렇기에 사용자들은 내 행동에 따라 응답이 없는 페이지를 기대하고 접속하지 않습니다. 사용자 동작에 맞게 화면을 다시 그리는 행위(리렌더링)를.. 2023. 3. 27. 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. 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 다음
