📝뷰(Vue.js) 미니 프로젝트 Todo List App 만들기 1. 프로젝트 생성 vue create todo 2. 기본 디렉토리에 있는 HelloWorld 컴포넌트 지우고, index.html에 부트스트랩 CDN 추가 3. App.vue 코드 작성 Todo App

🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..

🔍부모로부터 props를 받는 자식 컴포넌트 작성 자주 사용하는 스타일을 별도 자식 컴포넌트 InputField.vue로 분류하였다. 🤍부모 컴포넌트 Home.vue InputField를 불러오고 자신의 data인 name을 name 속성으로 (:name) 바인딩하여 props로 내려줌. 🤍자식 컴포넌트 InputField.vue props로 name을 받아와서 input의 value 속성으로 바인딩. => 부모 컴포넌트로부터 props로 받아온 name 값은 input의 value 값으로 지정되지만, 사용자가 input box에 입력한 값은 props.name 값으로 지정되지 않음. 이를 해결하기 위해서 @input 속성을 사용할 수 있다. 🤍@input @input을 이용하며 input 태그에 입력되..

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다. 개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다. 1. 컴포넌트란 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다. 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식..

🔍반복문, 리스트 렌더링 Vue.js에서 반복문 렌더링으로 제공하는 디렉티브는 v-for 구문이다. 배열을 기반으로 리스트를 렌더링할 수 있다. v-for item in items 🔍예제 people로 데이터를 선언하고 각각 다른 name, age를 주고 싶을 때 아래와 같은 코드를 작성할 수 있으나, 여기서 더 많은 데이터가 추가될 경우 코드가 복잡해질 수 있다. 이런 경우 v-for 구문을 활용할 수 있다. 실행 결과 반복문에 사용될 태그에 v-for 구문을 삽입해 주면 된다. 실행해 보면 동일한 결과가 출력되고 있다. 그리고 v-for 구문에는 index값을 사용할 수 있다. index를 추가해 주면 아래와 같이 index가 붙어 출력되는 것을 확인할 수 있다. 💡공식문서를 살펴보면 2.2.0 이상..

🔍조건부 렌더링 Vue.js에서도 if문을 제공한다. Vje.js에서 조건부 렌더링 시에 사용하는 디렉티브는 v-if, v-show가 있다. 🔍예제 show에 false를 주었기 때문에 브라우저 화면에 아무 것도 나타나지 않는다. 이번에는 토글 버튼을 추가하는 코드를 작성해 보았다. true로 주었기 때문에 토글 버튼 클릭 시 Yes 메시지가 나타난다. 여러 개의 div 태그에 조건부 렌더링을 하고 싶다면 template 태그로 묶어서 사용하면 된다. 아래와 같이 v-if와 @click을 같이 줄 수도 있다. 버튼 클릭 시 숫자가 1씩 증가하는 것을 확인할 수 있다. 그렇다면 v-if와 v-show의 차이점은 무엇일까? 아래의 개발자도구에서 확인해 보면 알 수 있듯이, v-if는 조건에 따라 컴포넌트가 ..

🔍데이터 양방향 바인딩 지금까지는 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 값을 확인했다. => 단방향 데이터 바인딩 두 방향 모두 데이터에 접근할 수 있도록 하는 것을 양방향 데이터 바인딩이라고 한다. 🔍폼 입력 바인딩 양방향 데이터 바인딩이 자주 사용되는 대표적인 예. v-model v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성함. 입력 유형에 따라 엘리먼트를 업데이트하는 올바른 방법으로 자동 선택함. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함. 🔍예제 텍스트박스에 입력하는 글자가 실시간으로 보여지도록 하고 싶을 때, 양방향 데이터 바인딩..

🔍Vue.js 이벤트 핸들링 기존 Javascript의 'addEventListener' 메서드, jQuery의 '.on' 메서드와 같이 이벤트를 연결하여 사용하는 기능 'v-on' 디렉티브, '@' 2가지를 사용해서 이벤트 핸들링 처리함. 🔍메서드 이벤트 핸들러 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하여 처리 click 이벤트 핸들링의 기본적인 예제를 해보기 전에 기존에 자바스크립트에서 사용했던 onclick 이벤트를 적용시켜보면 버튼을 누르면 설정해둔 alert창이 잘 뜬다. v-on:을 붙여서 이벤트 핸들러를 적용시켜도 동일하게 잘 뜬다. 이번에는 함수를 통해 처리해보았다. 더하기 버튼, 빼기 버튼이 잘 동작한다. submit에도 적용시킬 수가 있다. 입력 후 버튼을 누르면..