전체 글

서문 GIT이 중요하다… GIT을 이용해 협업해야한다… 도대체 GIT이 뭐길래 그러는 걸까요? 저는 GIT을 이해하지 못하는 이유는 배경 지식이 부족하기 때문이라 생각해요. 기초부터 차근차근 GIT을 함께 파헤쳐봅시다. GIT이란? “GIT을 알아야 회사에서 이쁨 받는다~”, “GIT을 모르면 협업 못해~” 라는 이야기는 수 많이 들어 보셨을테니 잡다한 이야기는 내려놓고 저는 “GIT”이란 것에 대해서만 이야기를 할까 합니다. GIT은 “노드로 구성된 트리를 명령어로 다루는 툴” 입니다. 저는 위 문장을 이해해야 GIT을 정확히 이해할 수 있다고 생각합니다. 위 문장이 이해되지 않는다면 아래 링크를 참고해주세요. 링크드리스트: https://reakwon.tistory.com/25 트리: https://..

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 폴더 아래에 파일을 생성해주세요. 두 파일을 생성했으면 각 내용을..