본문 바로가기

framework(Vue_Nuxt)

 (11)
infinite scroll(무한 스크롤)만들기 infinite scroll이란? 위와 같이 무한하게 데이터의 끝까지 스크롤이 가능하게 하여, 사용자편의(UX)를 높이는 기능이다. 현재 만들고 있는 토이프로젝트에 인피니트 스크롤기능을 구현해보려고 한다. 현재 PostCard를 구현중인 홈화면이다. 백엔드구현이 아직 안되어서 랜덤함수를 이용하여 store에 mutation으로 FakeUserData를 넣어줬다. const fakePosts = Array(diff > limit ? limit : diff) .fill() .map(v => ({ id: Math.random().toString(), User: { id: 1, nickname: "test" }, content: `Hello scroll ${Math.random()}`, Comments: [],..
routing middleware(Vue) middleware란? 원래 미들웨어는 컴퓨터 프로그램 사이에서 중간 처리를 하는 프로그램을 의미한다. Nuxt.js는 middleware디렉토리 내에 존재하는 javascript 파일을 컴포넌트, 레이아웃 라우터에서 미들웨어로써 활용할 수 있도록 지원해준다. 쉽게 풀어서 말하자면 웹사이트에서 로그인을 했는데 회원가입을 들어갈리가 없고, 반대로 비로그인 상태에서 프로필화면에 들어갈 수 없다. 이와같이 route를 변경할때 그 사이에서 걸러주었으면 하는 역할이나 예외처리를 해야할 것들, 아니면 어떤 페이지를 접속시마다 특정 기능이 실행되었으면 하겠다 하는 기능을 모두 이 middleware에서 처리하고 있다. 예제 기존에 만들던 페이지에서 로그인 상태임에도 불구하고 회원가입 페이지에 계속 머물러 있었기 때..
vuetify Grind System Grid System이란? - 12Point Grid System - 내용물들의 레이아웃 설정을 위해 flex-box를 사용하여 구현됨. - 특정 스크린 사이즈나 배치에 따라 5가지 유형의 미디어 BreackPoint가 포함되어 있음. Usage -v-container는 fluid 속성으로 full 너비로 확장하여 중앙에 focus된 페이지로 사용할 수 있음. -v-layout은 v-flex를 사용하여 구별된 섹션으로 사용된다. 따라서 다음과 같은 구조로 사용됨 : v-container >> v-layout >> v-flex v-flex는 자동으로 자식들을 flex : 1 1 auto로 설정된다. -property를 자동으로 class로 변경하기 때문에 property로 값을 주면 됨. -v-spacer..
vuex component, mutation&action 실습 followlist예제 위와 같이 내 프로필에서 팔로잉,팔로워리스트를 보여주고, 해당 리스트에서 원하는 타겟을 지우는 기능을 구현해보았다다. 팔로잉 팔로워 먼저 위와 같이 Follow.vue Components를 구성하였다. {{ item.name }} mdi-minus-circle-outline 그 다음v-list-item(버전 변경에 따라 v-list-tile에서 이름이 바뀌었다)에 팔로워, 팔로잉 리스트를 추가 해주고, 아이콘에 리스트삭제 클릭 이벤트를 걸어주었다. 또한 메소드에 dispatch를 통해 store(users)의 action에 값을 넘겨주었다. export const state = () => ({ me: null, followerList: [ { value: 1, name: "팔로워1" }, { value:..
Vuex란? Vuex란 Vuex란 Vuejs 프레임워크에 사용할 수 있는 상태 관리 패턴이다. Vuex를 사용할 때의 장점은 두가지 이다. 첫번재는 Vuex를 사용하면 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 한다. 예를 들어 SPA(Single Page Application) 방식의 어플리케이션의 경우, 컴퍼넌트 방식으로 잘게 쪼개서 사용한다. 하나의 어플리케이션, 하나의 화면에는 실제 수많은 컴포넌트로 설계 되어 구성되어져 있다. 이러한 컴포넌트들 간에는 부모 컴포넌트와 자식 컴포넌트의 관계가 존재한다. 우리가 하나 알아야 할 것은 컴포넌트 관계에서 자식 컴포넌트는 부모 컴포넌트의 state를 직접 변경 할 수 없다는 것이다. 만약 자식 컴포넌트에서 부모 컴포넌트의 state를 변경하려..
Vue.js 화면 구성하기, 기본 문법 기본 문법 Vue.js 사용하기전에 알아야한 vue 에서 제공하는 문법들을 알아야만 한다. vue.js 문법은 jquery 보다도 단순하다 생각한다. 그리고 html 자체내에서 사용가능한 문법들이 있어 익히는데 쉽다! 보간법 {{ value }} DOM 에 데이터를 바인딩하는 방법이다. 저런식으로 선언할경우 간단하게 html 내부에 DOM 에 데이터 바인딩이 이루어진다. 보간법으로 바인딩 된 데이터는 순수 텍스트 속성을 띈다. 약어 - v-html v-html: 보간법을 사용하여 표시할경우 단순 텍스트 속성으로 밖에 표현이 안된다. 그렇기 때문에 html 기능을 사용하고 싶을땐 v-html 을 선언하여 이부분에 html 문법을 작성하여 사용이 가능하다. 줄바꿈이나 공백등을 표현할때 요긴하게 사용했다. -..
서버사이드렌더링, 싱글페이지렌더링(클라이언트사이드렌더링) 렌더링이란? 어떠한 웹 페이지를 접속하려 할때, 그 페이지를 화면에 구성해주는 것. 뷰와 넉스트는 렌더링방식에서 차이가 난다. Server Side Rendering 서버사이드렌더링이란 요청시마다 새로고침(깜빡거림)이 일어나며 이때, view가 어떻게 보여질지 또한 서버에서 보내주는데 이러한 방식을 서버사이드 렌더링이라고 한다. (서버측에서 HTML&View를 생성하여 응답하는 방식) Single Page Rendering 싱글페이지렌더링, 클라이언트사이드렌더링은 한개의 빈페이지만 서버에서 구성해놓은 뒤, View는 클라이언트에서 스크립트를 통해 렌더링하는 방식이다. 각 렌더링의 장단점 비교 클라이언트 사이드 렌더링의 경우, 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하..
Vue 라이프 사이클 이해하기 라이프사이클이란? 어떤 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(lifecycle)이라 한다. 곧 Vue 인스턴스가 생성된 후 우리 눈에서 사라지기까지의 단계를 일컫는 말이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 이 과정에서 Vue는 각각의 단계에서, Vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공한다. 크게 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있다. ..

티스토리툴바