데이터 분석 기술 블로그

1. Component 활용1-1. 컴포넌트 사용 2단계컴포넌트 파일 생성컴포넌트 등록 (import)1-2. 사전 준비(1) 컴포넌트 파일 생성(2) 컴포넌트 등록(3) 결과 확인(4) MyComponentItem 컴포넌트 등록 후 활용

1. Vite프런트엔드 개발 도구로 빠른 개발 환경을 위한 빌드 도구와 개발 서버를 제공합니다.1-1. Vite 튜토리얼2. NPMNode Package Manager(NPM)란, Node.js의 기본 패키지 관리자입니다. Chrome의 V8JavaScript 엔진을 기반으로 하는 Server-Side 실행 환경입니다.2-1. Node.js의 영향3. Vite 프로젝트 구조3-1. node_modules3-2. package-lock.json3-3. package.json3-4. public 디렉토리3-5. src 디렉터리3-6. src/assets3-7. src/components3-8. src/App.vue3-9. src/main.js3-10. index.html4. 모듈과 번들러Module은 프로그..

1. Component재사용 가능한 코드 블록입니다.2. SFCSingle-File Components(SFC)란, 컴포넌트의 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식(*. vue 파일)입니다.3. SFC 문법3-1. 언어 블록 - 3-2. 언어 블록 - 3-3. 언어 블록 - 3-4. 컴포넌트 사용하기

1. Vue Style Guide1-1. 우선순위 별 특징1-2. 우선순위 A였던 금일 학습 내용참고1. [주의] computed의 반환 값은 변경하지 말 것2. [주의] computed 사용 시 원본 배열 변경하지 말 것3. [주의] 배열의 인덱스를 v-for의 key로 사용하지 말 것4. v-for와 배열 - "배열 변경 감지"5. v-for와 배열 - "필터링/정렬 결과 표시"

1. Lifecycle HooksVue 인스턴스의 생애주기 동안 특정 시점에 실행되는 함수로 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 합니다.1-1. Lifecycle Hooks 예시1-2. Lifecycle Hooks 특징1-3. Lifecycle Hooks Diagram

1. watch()반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출하는 함수입니다.1-1. watch 구조1-2. watch 예시1-3. Computed와 Watchers

1. v-for소스 데이터(Array, Object, number, string, Iterable)를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링 하는 함수입니다.1-1. v-for 구조1-2. v-for 예시1-3. 여러 요소에 대한 v-for 적용1-4. 중첩된 v-for2. v-for with key반드시 v-for와 key를 함께 사용해야합니다. 내부 컴포넌트의 상태를 일관되게 유지해야 하는데 즉, 데이터의 예측 가능한 행동을 유지(Vue 내부 동작 관련) 하기 위해서입니다.2-1. v-for와 key3. v-for with v-if동일한 요소에 v-for와 v-if를 함께 사용하지 않습니다. 동일한 요소에서 v-if가 v-for보다 우선순위가 더 높기 때문입니다. 즉, v-if 조건은 v-..

1. v-if표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링 하는 함수입니다.1-1. v-if 예시1-2. 여러 요소에 대한 v-if 적용1-3. HTML element2. v-show표현식 값의 T/F를 기반으로 요소의 가시성을 전환하는 함수입니다.2-1. v-show 예시2-2. v-if VS v-show