본문 바로가기
반응형

DEVLOG88

[프로젝트 추천 #1] Todo 앱 만들기는 그만! 재미있고 효과적으로 학습할 수 있는 프로젝트 NOTES APP HTML, JavaScript, CSS 부터 React, Angular, Vue까지 프론트엔드 공부를 할 때 보면 튜토리얼처럼 Todo App을 만드는 일이 많습니다. 하지만 Todo App이 어렵다! 혹은 지겹다! 하는 분들에게 좀 더 재밌고 점진적으로 학습할 수 있는 15개의 App Ideas를 소개합니다. 이 앱은 : 코딩 스킬을 향상시키기에 효과적입니다. 새로운 기술을 경험하기에 좋습니다. 취업/이직을 고려중이라면 포트폴리오로 쓰기에 좋습니다. 튜토리얼의 예제로 사용하기에 좋습니다. 비교적 쉽게 완성할 수 있고, 새로운 기능을 붙일수도 있습니다. 각 프로젝트의 스펙은 다음을 포함하고 있습니다. 분명한 목적이 있습니다. To-Do앱과 같이 틀에 갇힌 가이드라인이 아니라, 보다 자유롭습니다. 기초 프.. 2019. 5. 9.
Vue 클래스와 스타일 바인딩 - #14 HTML 클래스 바인딩하기 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 우리는 표현식으로 최종 문자열을 계산하면 됩니다. 그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다. 이러한 이유로, Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 위 구문은 active 클래스의 존재 여부가 데이터 속성 isActive 의 참 속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토.. 2019. 5. 8.
Vue computed와 watch - #13 watch 속성 대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있습니다. 그래서 Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다. 예제 입니다. yes/no 질문을 물어보세요: {{ answer }} 이 경우 watch 옵션을 사용하면 비동기 연산 (API 엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. 계산된 속성은 이러한 기능을 수행할 수 없습니다. watch 옵션 외에도 명령형 vm.$watch API를 사용할 수 있습니다. 2019. 5. 8.
Vue computed와 watch - #12 computed 속성 템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 아래의 예를 봅시다. {{ message.split('').reverse().join('') }} 이 템플릿은 더 이상 간단하고 명료하지 않습니다. message를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 하겠죠. 템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는 더 악화될 것입니다. 복잡한 로직이라면 반드시 computed 속성 을 사용해야 하는 이유입니다. 기본 예제 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: .. 2019. 5. 8.
반응형

티스토리툴바