전체 글

GIT 설치 깃 다운로드: https://git-scm.com/downloads 각 OS에 맞는 install 버전을 다운로드 받아주세요. (예: 64-bit Git for Windows Portable.) 설치 화면이 뜨면 다른 설정 만질 것 없이 그냥 다음만 누르고 설치해주시면 됩니다. 이제 window키 + s 를 누른 후 cmd를 실행하고 명령어 창에 git -v를 입력해주세요. 위와 같은 화면이 나오면 성공입니다! Github Desktop 설치 깃을 이용하는 GUI 툴에는 SourceTree GitHub Desktop GitKraken Git Extensions TortoiseGit vscode extension - git graph 등이 있습니다. 출처: https://m.blog.naver..

캘린더 라이브러리를 쓰다가 문득 직접 만들어 보고 싶어서 vue3로 커스텀 캘린더를 만들었습니다. 뭔가 옛날스런 느낌으로 만들고 싶었기에 조악한 디자인... 을 갖고 있지만ㅋㅋㅋㅋㅋㅋ 소스코드 시작: {{ option }} {{ option }} {{ option }} ~ 끝: {{ option }} {{ option }} {{ option }} 생각보다 소스코드가 긴데 간단합니다. 기본적으로 Date() 객체를 사용하여 핸들링 했으며 윤년처리, 시작과 끝 날짜 에러 처리, 날짜 스트링 처리 등의 코드로 양만 많은 것이므로 쫄 것 없이 읽어보면 쉽게 이해됩니다.

저번 시간에 todo 페이지를 만들었으니 이번엔 todo 페이지를 꾸며봅시다. 첫 번째 게시글에서 vuetify를 설치했으니 사용해봐야겠죠? todos.vue에 아래와 같이 적어줍니다. 투두 리스트 임시 카드 1번 투두에요 1번 내용이에요 그럼 아래와 같은 화면을 볼 수 있습니다. 우리의 예쁜 투두리스트의 첫 카드가 만들어졌네요! v-container는 vuetify에서 div와 같이 자식 태그들을 담을 공간을 의미합니다. v-card는 vuetify의 카드 컨테이너입니다. 위와 같이 예쁜 카드를 자동으로 만들어줍니다. v-card-title, v-card-subtitlek, v-card-text는 카드 안의 내용을 채우는 태그입니다. 카드에 어울리게 텍스트가 꾸며져 있습니다. 아래와 같이 assets/..

루트 폴더에 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 ..