본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section3] 44. 데이터목록 렌더링 여러개의 요소가 있는 배열 goals를 출력하는 기능이 Vue에 있다. 목록으로 된 컨텐츠를 출력하는 작업은 앱에서 흔히 하는 동작 중 하나. 상품목록, 사용자의 'to do list'와 같은 list는 웹앱의 어디서나 찾을 수 있다. 요소를 반복적으로 작성하여 모든 goals를 출력하려고 한다. → v-for # v-for v-if는 JavaScript의 if문, v-for는 JavaScript의 for문과 같은 역할. for문처럼 반복된 코드를 처리한다. v-for에 값을 설정하면 되는데, 다른 Vue 기능처럼 큰 따옴표 안에 JavaScript 표현식을 입력한다. ""안에 goals를 입력하여 data 프로퍼티인 배열 goals를 가리킨다. JS에서는 "const goal of goals" 라고 f..
[Udemy Vue 완벽가이드 Section3] 43. v-if 대신 v-show 사용하기 v-if의 대안을 살펴보자. v-if에는 전혀 문제가 없지만, v-show를 사용할 수도 있다. # v-show v-show는 v-else 또는 v-else-if와 함께 작동되지 않고, 독립형으로만 실행된다. 여러 대안이 필요하다면, v-show를 여러번 사용해야한다. 이게 v-if와의 차이점. v-show가 뭘까? v-if와 동작에 중요한 차이점이 있다. 새로고침을 하면, v-if와 동일하게 실행된다. 큰 차이가 없다. 하지만 개발자도구를 보면, 차이점이 보인다. style="display: none;"이 추가된 것을 볼 수 있다. v-if는 실제로 DOM에서 요소를 제거하고 추가한다. 즉, DOM의 일부가 되는 요소가 무엇인지를 결정한다. 반면 v-show는 CSS를 통해 항목을 숨기거나 표시한다. ..
[Udemy Vue 완벽가이드 Section3] 42. v-if, v-else 및 v-else-if v-if에서 알아두면 좋은 내용이 몇 가지 있다. 참(truthy)과 거짓(falsy)값을 처리하는 표현식을 쓸 수 있다. 일반적인 if문과 같다. if(true) { .. } 위 true 부분에서 검사할 수 있고, JS에 의해 truthy나 falsy로 처리된다. &&(and)나 ||(or) 등으로 조건을 결합할 수도 있다. computed 프로퍼티, data 프로퍼티를 가리킬 수 있고, truthy나 falsy값을 반환하는 method를 실행할 수도 있다. 뿐만 아니라, 도 조건부로 출력해야한다. goal이 있을 때만 이 출력되게 해보자. 에도 v-if를 추가하고, goals.length > 0 이렇게 검사를 한다. No goals.. 위와 같이 작성해도 되지만, 이 경우 에 v-else를 써도 된다..
[Udemy Vue 완벽가이드 Section3] 41. 콘텐츠 조건부 렌더링 goals가 없을 때(즉, goals 배열이 비어있는 경우), 를 출력하려고 한다. 조건부로 렌더링되어야하는 요소에 적용할 수 있는 Vue 디렉티브 → v-if JavaScript의 if문과 기본적으로 같다. 특정 조건을 검사해서 조건을 충족하면 코드가 실행된다. ""큰 따옴표 사이에 특정한 조건을 전달하는데, Vue 디렉티브가 항상 그렇듯, 이런 큰따옴표 사이에는 JavaScript 표현식을 사용할 수 있으며, data, methods, computed 프로퍼티 등을 참조할 수도 있다. goals.length가 0인지 검사해보자. goals는 배열이므로, length 프로퍼티를 가진다. length가 0이면 goals가 없다는 뜻. No goals have been added yet - please s..
[Udemy Vue 완벽가이드 Section3] 40. 문제 이해하기 먼저 이 프로젝트의 목표는 'Goal'을 추가하는 것이다. 입력란에 'Finish the course!'같은 문구를 작성하여 'Add Goal'버튼을 클릭하면, 아래 list에 추가되는 식으로 goal이 추가되어야 한다. 또한, 출력된 list에서 goal을 클릭하면 list에서 삭제할 수도 있어야 한다. 먼저, 다른 것부터 해보자. index.html My course goals Add Goal No goals have been added yet - please start adding some! Goal app.js const app = Vue.createApp({ data() { return { goals: [] }; }, }); app.mount('#user-goals'); data프로퍼티의 goa..
[Udemy Vue 완벽가이드 Section2] 37. 섹션 요약 Vue에서 알아야 할 중요한 기본사항을 살펴보았다. [ DOM & Templates ] DOM과 상호작용하는 방법 및 Vue가 템플릿을 관리하여 특정 Vue 기능을 실제 페이지에 반영하는 방법을 배웠다. 1/ Vue can be used to define the goal instead of the steps (→ declarative approach ) Vue의 핵심개념은 개별단계를 정의하는게 아니라, 목표를 정의함으로써 선언형 접근 방식을 따르는 것. 즉, 페이지의 모습을 정의하고, 페이지에서 동적인 부분을 정하면 Vue가 그 목표에 도달하는 방법을 알아낸다. 2/ Connect Vue to HTML via "mount" : Vue then renders the real DOM based on the ..
[코딩테스트 ALL IN ONE] 자료구조와 메모리구조 이해하기 자료구조 : 데이터를 저장하고 관리하는 방식 그렇다면, 데이터를 저장하는 곳은? → 메모리 메모리는 크게 하드디스크와 RAM 메모리가 있다. 우리가 코딩을 하고 저장하면 코드들이 하드디스크에 저장된다. 저장된 코드들을 실행하면 RAM 메모리에 데이터가 올라가게 된다. 우리의 관심사는 RAM 메모리에 있다. 만약 비효율적인 자료구조를 사용하면 RAM 메모리 낭비를 초래하고 프로그램 성능 저하의 원인이 된다. 그래서 용도와 상황에 맞는 자료구조를 잘 선택해야한다. 나중에 배울 자료구조 중, LIST를 잠깐 보자. LIST: 숫자나 문자와 같은 데이터를 순차적으로 나열해 놓은 집합 L,I,S,T를 각각 하나의 문자형 데이터라고 생각하자. L,I,S,T를 Array로 구현한다면 데이터가 메모리상에 연속되게 저장..
[Udemy Vue 완벽가이드 Section2] 36. 동적 클래스 : 배열구문 여러 개의 동적 클래스 속성을 가질 수 있게 Vue가 지원하는 기능들 중, 객체 구문 외에 한 가지 더 있다. 바로, '배열'! 어떤 클래스를 추가할지 구성하는 '객체'가 '배열'의 한 요소가 될 수 있다. 위와 같이, 배열구문을 사용하면 동적으로 생길 수 있는 여러 class들을 같은 에 추가할 수 있다. ** :style에도 배열([]) 사용 가능하다! 동적으로 클래스/스타일속성을 추가할 경우, 객체, 배열 등 여러 옵션이 있으므로 선호에 따라 작성하면 된다. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.

티스토리툴바