Youbiiin's Blog

Study/Vue

Vue.js를 이용하여 Todo List를 만들어 볼 예정이다. 상태관리는 Vuex를 사용하며, localStorage에 데이터를 저장해보려한다. 1. 화면설계 1) 오늘 날짜 노출 2) 리스트 총 개수와 리스트 완료여부 개수 나타남 3) 인풋 4) 인풋에 텍스트 입력 후 등록 버튼 누르면 리스트 추가 5) 최신순, 오래된 순에 따라 리스트 필터링 6) 전체삭제 버튼을 누르면 리스트 전체 삭제 7) 체크박스 클릭 시 완료된 리스트 8) 등록한 날짜 노출 9) 한개의 리스트 삭제 2. 폴더 구조 폴더 구조는 이러하다. router와, store도 사용할 예정이니 프로젝트 생성할때 옵션을 선택해주자~ 우선 layouts 폴더에 Header, Footer를 만들고 layouts/index.vue에 import..

2021. 5. 10.

Study/Git

먼저 git fork를 사용하는 이유는 뭘까? branch를 따서 작업을 하고 push 하여 merge를 하는 방법도 있지만, 이렇게 하다보면 충돌도 해결해야 하고 남의 소스가 날라가거나 내 소스가 날아가는 일이 빈번하다ㅠㅠ.. 이런 사태를 피하기 위해 fork를 사용하여 안전한 공동작업을 할 수 있다! 먼저, fork를 받으면 나의 repository/오리지널 repository 이렇게 각각의 저장소로 나뉘며 fork받은 내 repository에서 commit, push를 해도 내 repository에만 반영이 되기 때문에 오리지널 repository 소스를 해칠 위험이 없다. 바로 fork 하는 방법에 대해서 알아보자. 1. fork 받고자 하는 repository 우측 상단에 아래와 같이 fork라..

2021. 5. 7.

Study/Git

Git 저장소에서 clone 할때 https와 ssh가 있다. 둘의 차이점이 뭘까?? https 단순하게 사용자의 id, password로 인증하는것 ssh 내 컴퓨터의 있는 퍼블릭 key로 인증하는것

2021. 5. 7.

Study/Vue

v-model 속성은 v-bind와 v-on의 기능을 합쳐놓은 문법입니다. input, checkbox, selectbox, textarea 와 같은 태그에서 value값을 실시간으로 전달해줍니다. {{ text }} 컴포넌트에 v-model 사용하기 VueInput.vue 컴포넌트(자식) App.vue (부모) ID : {{ inputId }}

2021. 5. 6.

Study/Vue

v-bind는 뷰 인스턴스 데이터 속성을 html 태그에 v-bind를 입력하여 간단하게 연결하여 사용할 수 있습니다. v-bind를 쓸수있는 대표적인 속성 v-bind:style //style 데이터 바인딩 v-bind:class //class 데이터 바인딩 v-bind:src //이미지 src 데이터 바인딩 v-bind:href // 링크 데이터 바인딩 v-bind:key // key 데이터 바인딩 v-bind대신 :style, :class 이런식으로 줄여쓸 수도 있습니다!

2021. 5. 6.

Study/Vue

Vue CLI는 Vue 개발환경을 설정할수있게 해주는 도구이며, CLI를 이용하여 쉽게 프로젝트를 셋팅할 수 있게 해줍니다. 1. npm 또는 yarn 이 설치되어 있어야 합니다. npm install -g @vue/cli or yarn global add @vue/cli 2. 설치 후 vue version 확인 했을때 버전이 나오면 정상적으로 설치 된것입니다. vue --version 3. 프로젝트 생성 vue create 프로젝트 이름 4. 필요한 라이브러리로 선택합니다. 5. 설치 완료 후 페이지를 확인합니다. yarn serve 하면 아래와 같이 url이 뜹니다. 클릭한 뒤 들어가 보면 vue.js 페이지가 잘 보이는것을 확인할 수 있습니다! :) issue 랄것도 없는 issue yarn ser..

2021. 5. 6.