본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section8] 96. 지원되는 props 값 일반적으로 다음 공식 무넛에서 props 유효성 검사에 대한 모든 것을 배울 수 있다. → https://v3.vuejs.org/guide/component-props.html Props | Vue.js vuejs.org type 프로퍼티는 아래 타입들이 지원된다. 문자열 (String) 숫자 (Number) 불리언 (Boolean) 배열(Array) 객체 (Object) 날짜 (Date) 함수 (Function) 심볼 (Symbol) 생성자 함수(Date와 같은 내장된 함수 또는 커스텀 함수)도 타입이 될 수 있다. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
[Udemy Vue 완벽가이드 Section8] 95. props 검증하기 # 기본 props 프로퍼티 작성법 - 배열 지금까지는 props 프로퍼티를 배열에 전부 문자열로 쭉 나열하는 방식으로 작성했다. 얻게될 props가 무엇인지만 알려주고, 그 외 다른 정보는 Vue에 제공하지 않았다. props: ["name", "phoneNumber", "emailAddress", "isFavorite"], 간단한 앱이나 컴포넌트라면 이 정도도 괜찮다. 하지만 더 복잡한 컴포넌트거나, 팀으로 작업하는 경우에는 props에 대한 정보를 더 많이 공유해야 할 수도 있다. 컴포넌트에 잘못된 데이터를 전달하거나, 필요한 props를 빼먹었을 때 Vue가 우리에게 이 부분을 알려주도록 하기 위해서. 이를 위해, props 프로퍼티를 배열이 아닌, '객체'로 대체할 수 있다. # 새로운 prop..
[Udemy Vue 완벽가이드 Section8] 94. props 작동 방식 및 props 변경하기 props는 매우 중요하다. 부모-자식간의 통신에서 props가 사용된다. - 위 코드에서 부모 컴포넌트는 App.vue(메인 앱)이 된다. 부모 컴포넌트(App.vue)는 자식 컴포넌트(friend-contact 컴포넌트)와 communicate를 한다. - friend-contact 컴포넌트는 App.vue의 자식 컴포넌트이다. 왜냐하면 App.vue의 템플릿 내부에서 사용하므로. - friend-contact 컴포넌트 입장에서 보면 App.vue가 부모가 된다. 이게 바로 부모-자식 개념. - 부모 ⇒ 자식으로 통신할 때 props를 사용한다. 부모 ⇒ 자식 컴포넌트로 data를 전달하기 위해. 여기선 App.vue에서 friend-contact 컴포넌트로 전달. # props는 불변 - 기억해둬야..
[Udemy Vue 완벽가이드 Section8] 93. "props" 소개(부모 ⇒ 자녀 통신) {{ friend.name }} Toggle Favorite {{ detailsAreVisible ? "Hide" : "Show" }} Details Phone:{{ friend.phone }} Email:{{ friend.email }} 이 FriendContact에는 문제가 하나 있다. 출력하는 데이터, 즉 친구의 이름, 전화번호, 이메일 주소 등은 모두 이 FriendContact 컴포넌트 안에 저장되어있다. 그래서 똑같은 name, phone number, email이 적힌 컴포넌트가 두 개가 찍힌다. 우리는 지금까지 Vue앱에 필요한 데이터를 그 앱 안에 저장했다. 그러나 컴포넌트를 다룰 때는 대부분의 경우 조금 다르다. 마크업과 특정 로직이 포함된 '재사용 가능한' 컴포넌트를 만들고자 하기 때..
[Udemy Vue 완벽가이드 Section7] 87. 컴포넌트 추가하기 이제 첫 컴포넌트를 추가해보자. App.vue가 우리의 메인 Vue 앱이다. (Vue 컴포넌트는 Vue 인스턴스이기도 하다.) Vue는 Vue 앱이 있고, Vue 컴포넌트가 있다. - 모든 컴포넌트는 미니앱과 같으며, 여러 컴포넌트를 하나의 앱으로 합칠 수 있다. 그리고 이러한 미니앱, 즉 컴포넌트는 서로 통신할 수 있고 여러 다른 컴포넌트를 조합해서 복잡한 사용자 인터페이스를 구축할 수 있다. # components 폴더 - convention인데, src폴더에 새로운 폴더를 만들어 컴포넌트를 넣는다. 이 폴더명을 components라고 한다. - 이렇게 작성해서 단순한 Vue앱이 아닌, 컴포넌트임을 확실히 표시할 수 있다. - 이 components 폴더에 FriendContact.vue 파일을 추가..
[Udemy Vue 완벽가이드 Section7] 86. 기본 Vue 앱 만들기 # App.vue src 폴더에 App.vue라는 새로운 파일을 생성해보자. - 파일명을 'App.vue'로 할 필요는 없지만, Vue앱의 주요 구성을 담고 있는 메인 파일에 일반적으로 붙이는 이름이 'App.vue'이다. - 해당 파일의 싱글 파일 컴포넌트 기능을 사용할 수 있도록 확장자는 .vue로 하자. - template, script, style 섹션이 분리되어 있어, 해당 로직을 분리하면서도 한 곳에 둘 수 있도록 해준다. App.vue파일 안에 template, script태그를 생성해보자. (style 태그는 지금 필요하지 않으니 나중에 추가) 다시 한번 강조하면, 위 코드는 일반적으로는 작동하지 않는다. 이는 JS 파일이 아니라, .vue 파일이므로, Vue 프로젝트 setup만이 이를 ..
[Udemy Vue 완벽가이드 Section7] 85. 새로운 Vue 프로젝트 Vue CLI로 만들어진 프로젝트가 하나 있다. 코드 작성을 시작하기 위해서는 두 가지 작업을 먼저 해야한다. 1/ 이 프로젝트에 대한 모든 의존성(dependencies)을 설치해야한다. - package.json파일에 dependencies, devDependencies에 적혀있는 의존성. - 이 프로젝트에는 node_modules 폴더가 없다. 파일크기가 너무 크기 때문에 zip 파일에 추가하면 파일 크기가 수백 MB에 이른다. 크기도 크고, 사실 따로 다운로드를 할 필요도 없다. 왜냐하면 npm install 명령어로 자체적으로 의존성을 설치하면 되므로. 더보기 Terminal 탭 > New Terminal을 누르면, VSC 창 일부분에 기본 시스템 터미널이 열린다. - 장점 : 다른 화면으로 이..
[Udemy Vue 완벽가이드 Section7] 84. '.vue'파일에 대한 추가정보 src 폴더에 있는 다른 항목들을 살펴보자. # App.vue 파일 - 우리가 자주 다뤄야하는 파일. - 이 파일에는 Vue 앱이나 컴포넌트의 구성, 템플릿과 같은 것이 들어간다. 즉, 우리가 앞서 DOM인 HTML 파일에 정의한 내용들. # assets 폴더 - 작은 이미지가 들어있다. - 일반적으로 앱에 필요한 이미지를 추가하는 폴더. # components 폴더 - Vue 컴포넌트가 있는 components 폴더가 있다. - components 폴더에는 컴포넌트가 꼭 있어야 한다. 코드를 컴포넌트로 나누고, 사용자 인터페이스를 구성하고 컴포넌트를 결합하여 Vue 앱 전체를 구성한다. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.

티스토리툴바