캘린더 라이브러리를 쓰다가 문득 직접 만들어 보고 싶어서 vue3로 커스텀 캘린더를 만들었습니다. 뭔가 옛날스런 느낌으로 만들고 싶었기에 조악한 디자인... 을 갖고 있지만ㅋㅋㅋㅋㅋㅋ 소스코드 시작: {{ option }} {{ option }} {{ option }} ~ 끝: {{ option }} {{ option }} {{ option }} 생각보다 소스코드가 긴데 간단합니다. 기본적으로 Date() 객체를 사용하여 핸들링 했으며 윤년처리, 시작과 끝 날짜 에러 처리, 날짜 스트링 처리 등의 코드로 양만 많은 것이므로 쫄 것 없이 읽어보면 쉽게 이해됩니다.
HTML
루트 폴더에 data.js 파일을 아래와 같이 만들어줍니다. 그리고 pages 디렉토리를 만든 후 안에 index.vue 파일을 만들어줍니다. 참고로 vuetify에선 class에 ma-3과 같은 이름을 추가함으로써 마진과 패딩을 줄 수 있습니다. 참고: https://vuetifyjs.com/en/styles/spacing/ CSS Spacing helpers Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5. vuetifyjs.com 홈페이지와 투두 페이지를 나눠주기 위해서 NuxtLink를 사용해 라우팅을 해줍니다. 넉스트에서는 자체적으로 vue-router를 사용해서 ..
완전히 새로운 스택들로 새 프로젝트를 시작할 일이 생겨서 배웠던 내용을 정리하기 위해 todolist강의를 제작하게 되었습니다. 사전 학습 목록 vue3.js javascript typescript 사전 설치 목록 node.js yarn node.js는 최신 lts 버전을 설치해주세요. Nuxt3 설치 npx nuxi init nuxt3-vuetify3-pinia cd nuxt3-vuetify3-pinia yarn install 위 코드를 실행하면 기본 라이브러리가 모두 설치됩니다. pinia와 vuetify3 설치 yarn add vuetify@3.0.0-alpha.12 sass pinia 설치가 완료되고 나면 아래와 같이 plugins 폴더 아래에 파일을 생성해주세요. 두 파일을 생성했으면 각 내용을..
내용 지속적으로 추가 예정입니다! 자바스크립트 버전 2009: ES5 2015: ES6 2016: ES7 2015년부터 2015 → ES6과 같은 방식으로 1씩 올라가는 네이밍을 하기 시작했다. Console.log() 자바스크립트에는 console이라는 콘솔 출력을 위한 객체가 있다. 나중에 다루겠지만 변수를 디버그 하는데 있어서 가장 기본적인 요소이므로 시작에서 다루고 넘어간다. console.log(0) // console창에 0 출력 Strict 모드 사용 변수 선언자 없이 변수 선언을 하면 에러를 발생하게 해준다. // 맨 위에 'use strict'; 명시 'use strict'; var a = 1 // ok a = 1 // error 1. 기본문법 1.1 변수 특성/변수명 CONST VAR ..
티스토리에 광고를 넣고 싶어 구글 애드센스를 찾아봐도 아래와 같이 뜨는 경우가 있다. 구글 애드센스에 들어가서 회원가입/로그인후 받은 코드를 직접 삽입하는 방법이 있다.(회원가입/로그인은 알아서 하도록 하자.) 중앙축 위에서 편집을 누른다. 우측 위의 html편집 버튼을 누른다. 여기서 주의할 점은 ...태그 사이에 넣어야 구글 애드센스가 읽을 수 있다는 것이다. 이걸 몰라서 헤메는 사람이 많으니 매우 주의할 것
