빠르게 성장하는 개발자

1. computedVue instance가 가진 options 중 하나computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산계산 결과가 변하기 전까지 함수를 재호출 하는 것이 아닌 계산된 값을 반환method vs computedmethodcomputed호출 될 때마다 함수를 실행함수의 종속 대상의 변화에 따라 계산 여부가 결정같은 결과여도 매번 새롭게 계산종속 대상이 변하지 않으면 항상 저장(캐싱)된 값을 반환 2. watch특정 데이터의 변화를 감지하는 기능watch 객체를 정의감시할 data를 지정data가 변할 시 실행할 함수를 정의실행 함수를 Vue method로 대체 가능Array, Object의 내부 요소 변경을 감지 위해서는 deep 속성 추가 필요 3. fil..

1. 우선순위 특징 A : 필수 (Essential)오류를 방지하는 데 도움이 되므로 어떤 경우에도 규칙을 학습하고 준수B : 적극 권장 (Strongly Recommended)규칙을 어겨도 코드는 여전히 실행되겠지만, 규칙 위반은 드물어야 함.C : 권장 (Recommend) 2. 오늘 배운 것 중에 지켜야 할 우선순위 우선순위 Av-for는 항상 key와 함께 사용하기내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key를 사용하기데이터의 예측 가능한 행동을 유지 시키기 (객체 불변성)v-for를 쓴 엘리먼트에 절대 v-if를 사용하지 않기목록의 항목을 필터링 할 때v-if > v-for (우선선위) 이기 때문에 해당 처리 시점에 반복 변수인 user가 존재하지 않기 때문에 에러 발생..

1. Template syntax2. Directives1. 기본 구성2. v-text3. v-html 4. v-show 5. v-if 6. v-for7. v-on8. v-bind9. v-model1. Template syntax렌더링 된 DOM을 기본으로 Vue instance data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용Template Interpolation : 가장 기본적인 바인딩(연결) 방법{{}} 로 표기HTML을 일반텍스트로 표현Raw HTMLv-html directive을 사용하여 data와 바인딩HTML의 기본 속성이 아닌 Vue가 제공하는 특수 속성의 값으로 data를 작성 2. Directives1. 기본 구성v-접두사가 있는 특수 속성에는..

1. Why Vue?2. Vue 시작하기3. MVVM Pattern4. 생성자 함수5. Vue 사용하기1. Why Vue?👉쉽다!구조가 직관적이다.FE Framework를 빠르고 쉽게 학습하고 활용 가능하다추후 필요하다면 다른 FE Framework에 빠르게 적용할 수 있다. 2. Vue 시작하기Vue CDN 가져오기Vue instance 생성const {변수명} = new Vue({ el: '#{}', data: { }, })el, data 설정 ⇒ data에 관리할 속성을 정의한다.선언적 렌더링 {{}} ⇒ Vue data를 화면에 렌더링 하는 부분3. MVVM PatternM : Model → 우리 눈에 보이는 부분 = DOM!!V : View → 실제 데이터 = JSON!VM : View Mode..

1. What is Front-end?사용자에게 보여주는 화면 만들기Web app(SPA)을 만들 때 사용하는 도구SPA : Single Page Application 2. web app?웹 브라우저에서 실행되는 어플리케이션 소프트웨어쉽게 말해, web page가 디바이스 크기로 줄이면 ⇒ 디바이스에 설치된 app처럼 보이는 것 3. SPA?Single Page Application서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식cf) 기존에 Django에서 요청에 따라 페이지별 template을 반환했었다.How? CSR (Client Side Rendering) ↔ SSR (Server Side Rendering)SSR의 단점 : 브라우저는 새로고침을 진행한다.⇒ CSR을 이용하면서..