빠르게 성장하는 개발자

1. Prop 내려줄 때 주의 할 점1. 부모(보내주는 쪽)에서예를 들어, TimeTable은 자식쪽 (내려받는 쪽) 컴포넌트 이다.data에서 times 를 찾아서 반드시 바인딩 해 주어야 한다.또한 오른쪽에도, “” 따옴표로 묶어야지만, data에서 찾아서 보내준다. 2. 자식(받는쪽)에서반드시 props 에 추가해주어야 한다.v-for을 사용할 때는 반드시 :key 를 추가하여야 한다.2. Class 바인딩 할 때 주의할 점:class=”{}” 형태로 사용할 텐데,왼쪽에서 class 명에 “” 를 붙여줘야, 클래스에서 찾는다. 그렇지 않으면 data에서 찾게된다. 3. Click 할 때 data 넘겨주기1. @click = “함수명” Uploaded by N2T

Why??Vue에서는 Component의 이름이 Muti-word (즉 1단어이상) 이어야 한다고 한다 ⇒ 에러가 발생했다!!이름바꾸기를 통해서 이름을 수정하고, 컴포넌트가 쓰인곳에서 이름을 다 바꿨음에도 불구하고 에러가 나타났다. How?? 우선 다른 서버가 켜져있는 지 확인하고, 서버를 다 멈춘다(Ctrl+C)정 안될 경우 삭제후 다시 만든다. Uploaded by N2T

HTML, CSS를 사용하는 방법과 비슷하다.먼저 구글 폰트에 접속한다.https://fonts.google.com/noto/specimen/Noto+Sans+KRApp.vue 하단의 사용하고 싶은 곳의 class나 id 속성에 font-family를 추가한다.#app { font-family: 'Noto Sans KR', sans-serif; } 원하는 상황에서 class 붙이기 Uploaded by N2T

1. Data in components?2. Props1. Pass Props2. Dynamic Props3. Emit Event1. Emit Event2. Emit event with data1. Data in components?부모- 자식 관계만 데이터를 주고 받게 하자!!데이터의 흐름을 파악하기 용이유지 보수하기 쉬워짐부모 ⇒ 자식 : Props 관계! 2. Props1. Pass Propsprops는 부모 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성자식(하위) 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언해야 한다. 자식에서 props:에서 쓰인 부분을, 부모측에서 데이터를 바꿀 수 있다.정적인 데이터를 전달하는 경우 static props라고 명시하기도 한다...

1. created2. mounted3. updated4. destroyed1. created뷰 인스턴스 초기화 단계뷰의 컴포넌트에는 접근이 불가능한 단계, 화면에 데이터만 초기화 한다.실행 순서 : 상위 컴포넌트 ⇒ 하위 컴포넌트 2. mounted컴포넌트를 렌더링하는 단계컴포넌트에 접근이 가능해 진다.실행순서 : 하위 컴포넌트 ⇒ 상위 컴포넌트 3. updated컴포넌트의 속성드렝서 변경이 일어나거나 또는 어떤 이유로 컴포넌트의 재 렌더링이 일어난 경우에 실행4. destroyed뷰 인스턴스가 제거되는 단계 Uploaded by N2T

1. 새로운 Component 생성1. 생성2. 이름 등록3. template에 요소 추가2. component 등록하기1. 불러오기2. 등록하기3. 보여주기3. 이름 규칙 (B-매우 추천)1. 싱글 파일 컴포넌트 이름 규칙2. 베이스 컴포넌트 이름 규칙3. 싱글 인스턴스4. 강한 연관성을 가지는 컴포넌트 이름1. 새로운 Component 생성1. 생성src/components/ 안에 새 파일을 만든다이름은 MyComponent.vue📢Component의 이름은 Camel case로 작성하는 것이 국룰이다.2. 이름 등록vue만 치면 자동완성 된다 → 첫번째 선택script에 이름을 등록한다.3. template에 요소 추가div태그 혹은 최상단 태그 하나 필요하다.📢templates 안에는 반드시 하나..

1. Component1. component2. Django에서의 예시3. Component based architecture의 특징2. SFC1. component in Vue2. SFC (Single File Component)3. Vue component1. Component1. componentUI를 독립적이고, 재사용한 가능한 조각들로 나눈 것다시 사용하기 위한 ⇒ 소프트웨어 구성 요소마치 HTML에서 body를 여러개의 div로 구성한 것과 비슷한 맥락이다.Vue에서는 src/App.vue를 root로 하는 tree 구조Why? 유지보수, 재사용성2. Django에서의 예시base.html에서 block으로 index.html에서 상속받아 사용한 것처럼상위 컴포넌트를 변경 ⇒ 하위컴포넌트에도 ..

📕 contents1. Node.js1. Node.js2. npm2. Vue CLI1. Vue CLI?2. Start Project3. Vue CLI 프로젝트의 구조1. Node.js1. Node.js자바스크립트를 브라우저 밖에서 구동할 수 있게 런타임 환경을 제공하는 것2. npm자바스크립트 패키지 관리자Python의 pip처럼 패키지 관리 역할2. Vue CLI ⇒ 더이상 Vue를 브라우저에서 실행하지 않고! Node.js를 이용해서 실행해 볼 겁니다.1. Vue CLI?Vue 개발을 위한 표준 도구프로젝트 구성을 도와주는 역할확장 플러그인, GUI. Babel등 다양한 tool 제공2. Start ProjectVS Code의 terminal에서 시작한다. vue.create {projcet의 이름}..