HoneyPot 프로젝트에서 구독목록 리스트를 보여줘야 하는 과정이 있었는데 처음으로 해본 페이지네이션 구현하기를 남겨보려고 한다. 우선 완성본 근데 이제 미완성을 곁들인 .. [HTML 코드] //여기에는 카드에 들어갈 내용들을 작성 //pagination 버튼 생성 이전 {{ currentPage }} 다음 [script 코드] 1. 우선 data의 return 에 현재 페이지 수와 페이지 당 보여줄 카드 개수를 적어 준다. 2. computed에 현재 페이지에 표시할 카드 목록을 추출할 계산 된 속성을 입력 해준다. startIndex 변수에는 현재 페이지의 첫 번째 카드의 인덱스를 계산하고, endIndex 변수에는 현재 페이지의 마지막 카드 다음 카드의 인덱스를 계산한다. 즉, startInde..

vue에 폰트를 적용하기 위해서 CDN 방식을 이용하는 가장 간편한 방식이 있다. 근데 만약에 CND 을 찾지 못한다면 ? 어떻게 해야 할까 ㅠㅠ 프로젝트를 하는데 글씨체가 ttf 형식만 있어서 vue에 적용 해보려고 한다. [ TTF 파일 넣기 ] 우선 src -> assets -> fonts (폴더생성) 후 그 안에 ttf 폰트 파일을 넣어준다. [ App.vue ] 그 후 App.vue 로 가서 아래와 같이 적어준다. 이렇게 하면 전역적으로 사용할 수 있는 font를 생성해 준 것이다. 대신 단점.. 모든 ttf 파일을 하나씩 아래와 같이 쳐주어야한다... 내가 지금 가진 글씨체가 무려 9개니까 그걸 다 적어줘야한다는건 저 세상 귀찮은 일이다... (아직도 못했음) @font-face { font-..

[학습배경] 프로젝트를 하는데 오늘 날짜 이전과 오늘 날짜 이후만 선택하게 하고 싶었다. 예전에 이클립스에서 날짜제약 조건 하는 것을 JavaScript로 해봤는데 그것도 같이 정리하면서 Vue.js에서는 dayjs를 이용하여 더욱 간편하게 사용할 수 있는 방법을 포스팅해보려고 한다. [기존] 직접 입력 정해진 원하는 날짜가 있을 때는 min 과 max를 이용하여 직접 날짜 입력이 가능하다. 물론 min 만 작성하거나 max만 작성해도 된다. min과 max 제한이 있는 날짜 선택 min 제한만 있는 날짜 선택 JavaScript 하지만 위와 같이 정해진 날짜에 제약을 거는 것이 쓰이는 것은 굉장히 흔치 않다. 날짜를 직접 입력하게 되면 일회성 느낌이 너무 강한 코드 같달까. 그래서 오늘을 기준으로 날짜..

v-on v-bind와 마찬가지로 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. @는 v-on:의 축약표현, v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있다. 클릭 클릭 [v-on] : input v-on:input 은 키다운 개수를 카운트 한다. cnt2:{{cnt2}} [v-on] : v-for에 v-on 사용 {{img.title}} return 초기 이미지 값(initimg)을 설정해 주고 v-on:click="initImg=img.url" 란 {{img.title}} 을 클릭할 때 초기 이미지로 주었던 값을 v-for="img in imgs" 에 있는 img.url 로 바꿔 달라는 의미이다. {{msg + ': ..