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 라이브러리라이브러리- 편리한 코드를 모아놓은 것- 라이브러리를 활용한 코드 작성은 개발자가 직접 수행 -> 애플리케이션 규모가 커질수록 코드가 복잡해지고 중복이 발생- 어떤 동작을 제어하는 코드를 개발자가 작성하고 필요한 부분만 라이브러리를 사용 프레임워크- 애플리케이션 작동에 필요한 정형화된 코드를 포함 -> 라이브러리를 활용한 코드 작성을 간소화- 핵심 비즈니스 로직 구현에 집중하기 쉬움- 어떤 동작을 제어하는 코드를 프레임워크에 맡김 -> 제어의 ..

📍목표- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기 📍React vs Vue 데이터 공유 비교- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다  📍자식1 컴포넌트에서 상태 변경- defineEmits() 를 활용해서 emit 함수 정의하기- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다 MountainHeader.vue ..

📍composables/composables 폴더에 기능 단위로 파일을 만들고 내부에서 use + 파스칼 케이스의 함수를 선언하고 개별 named export- 예시) /composables/math.ts 생성export function useSum(x: number, y: number) { return x + y;}// 화살표 함수 사용 가능export const useMultiply = (x: number, y: number) => { return x * y;};export function useMinus(x: number, y: number) { return x - y;}export function useMyNumber() { // util 호출 가능 return MY_NUMBER;} /..

📍Vue.js에서 외부 라이브러리 사용하기- js-confetti 라이브러리를 사용하면 색종이가 흩날리는 이펙트를 만들 수 있다- 🎉 Congratulations!