전체 글 (31) 썸네일형 리스트형 github contributions(깃헙 기여도, 깃헙 기여) 채우기 github contributions github에는 contributions라고 하는 흥미로운 그래프가 있다. 자신이 github에서 얼마나 활동을 했냐에 따라서 작은 사각형이 채워져 1년의 개발결실을 가늠해볼 수 있다. 노드교과서를 쓰신 제로초(zeroCho)님의 github계정의 contribution은 꽉꽉 차있었다. 그에 비해 개발입문자인 난 초라한 수준.. 그런데 2달쯤 전, 이 차트를 채워보자는 마음에 하루에 꼭 1번은 커밋을 했었다. 그러나, 칸이 채워지지 않아서 그냥 속으로 'repositories를 열어야만 차트가 채워지나보다...' 싶어서 유명한 개발자분의 깃헙차트를 확인해보니 나와 비슷하게 되어있는게 아닌가? 그래서 그냥 그런가보다.. 하고 지나갔었다. 지난 3주간 같은 레파지토리에.. 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:.. Eslint란? 정의 ESLint란, 2013년 6월에 Nicholas C. Zakas가 처음 만든 오픈소스 JavaScript Linting 유틸리티이다. 코드 Linting 이란 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다. 또한 협업간에 획일화된 코드스타일을 정립하는데도 기여하고 있다. 대부분의 프로그래밍 언어에는 컴파일하는 과정이 있어서 컴파일시 수행되는 Linter 가 내장되어있다. 그러나 역동적이고 느슨한 언어인 JavaScript는 이러한 Linter 가 존재하지 않는다. JavaScript는 별도의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문이다. 따라서 일반적인 JavaScri.. 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 문법을 작성하여 사용이 가능하다. 줄바꿈이나 공백등을 표현할때 요긴하게 사용했다. -.. 이전 1 2 3 4 다음
