ch8. 컴포넌트 간 연계SFC(Single File Component)- .vue 확장자로 이루어지는 파일로 HTML + CSS + JS 세트 (.jsx와 비슷) scoped CSS 메커니즘1) 컴포넌트별 hash 문자열이 생성되고, 해당 컴포넌트가 렌더링되면 HTML data attributes를 통해 엘리먼트에 이름이 붙여짐예) v-eee87bea 라는 has 문자열 data attributes 생성 v-model을 포함한 컴포넌트 이름 없음 님이네요! 이름 없음 님이네요!  2) CSS에서 해당 attributes에 스타일링section[data-v-eee87bea] { border: orange 1px dashed; margin: 10px;} 전역적으로..

ch5. 양방향 데이터 바인딩과 기타 디렉티브v-model: 템플릿 변수(예 - ref)와 컨트롤 값(input의 value) 간 양방향 데이터 바인딩- v-bind:value와 v-input을 조합하여 v-model로 간단히 표현 v-model 수식어- lazy: input 대신 change 이벤트로 양방향 데이터 바인딩 수정- number: 입력값을 숫자로 취급- trim: 입력값의 전후 공백 제거 Input 이벤트와 Change 이벤트 비교- onInput: input 마다 이벤트 발생 -> v-model- onChange: input이 blur 되면 이벤트 발생 -> v-model.lazy- 예시 v-model 입력 문자열: {{ textOnInput }} ..

ch1. 프런트엔드 개발 흐름과 VueWebkit: Safari 브라우저의 HTML/CSS 렌더링 엔진- Chrome 브라우저는 Webkit 기반으로 시작하여, Blink라는 Webkit에서 분기한 새로운 HTML/CSS 렌더링 엔진 채택 프레임워크 vs 라이브러리라이브러리- 편리한 코드를 모아놓은 것- 라이브러리를 활용한 코드 작성은 개발자가 직접 수행 -> 애플리케이션 규모가 커질수록 코드가 복잡해지고 중복이 발생- 어떤 동작을 제어하는 코드를 개발자가 작성하고 필요한 부분만 라이브러리를 사용 프레임워크- 애플리케이션 작동에 필요한 정형화된 코드를 포함 -> 라이브러리를 활용한 코드 작성을 간소화- 핵심 비즈니스 로직 구현에 집중하기 쉬움- 어떤 동작을 제어하는 코드를 프레임워크에 맡김 -> 제어의 ..