Vue
1.[Vue] Vue란 무엇인가?
📚 이번 포스팅에서는 vue에 대해서 알아보도록 하자.사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크간결하고 직관적인 문법을 가지고 있어 빠르게 익힐 수 있고 잘 정리된 문서를 기반으로 어렵지 않게 학습할 수 있다. 다양한 플러그인과 라이브러리를 제공
2.[Vue] 디렉티브(Directive)
📚 이번 포스팅에서는 디렉티브에 대해서 다뤄보도록 하자. 1. Directive > '-v' 접두사가 있는 특수 속성 Directive 특징 1) Directive의 속성 값은 단일 JavaScript 표현식이어야 함(v-for, v-on 제외) 2) 표현식
3.[Vue] Computed 함수
"계산된 속성"을 정의하는 함수 -> 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄임위 코드를 computed를 적용하면 이런 코드가 된다. 반응형 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산
4.[Vue] 조건부 렌더링(Conditional Rendering)
📚 이번 포스팅에서는 조건부 렌더링에 대해서 자세하게 알아보도록 하자. 표현식 값의 true/false를 기반으로 요소를 조건부로 렌더링 표현식 값의 true/false를 기반으로 요소의 가시성(visibility)을 전환초기 조건이 false인 경우 아무 작업도 수
5.[Vue] List Rendering
📚 저번 포스팅에서 조건부 렌더링에 대해서 알아보았다. 이번 포스팅에서는 리스트 렌더링에 대해서 다뤄보자. 소스 데이터(Array, Object, Number, String, Iterable)를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링v-for는 alias
6.[Vue] Watcher
📚 오늘은 watch()함수에 대해서 다뤄보도록 하자.하나 이상의 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출1) 첫번째 인자 (source) : watch가 감시하는 대상(반응형 변수, 값을 반환하는 함수 등2) 두번째 인자 (callba
7.[Vue] 생명 주기 훅(Lifecycle Hooks)
Vue 컴포넌트의 생명주기 동안 특정 시점에 자동으로 호출되는 함수 -> 개발자는 컴포넌트의 특정 시점에 원하는 로직을 실행할 수 있음1) created: 컴포넌트가 생성된 직후 호출2) mounted: 컴포넌트가 DOM에 마운트된 후 호출3) updated: 컴포넌트
8.[Vue] props & emit
props emit
9.[Vue] Single-File Component
📚 SFC(Single File Component)에 대해서 알아보도록 하자. 들어가기에 앞서 Component란 무엇일까? Component는 재사용 가능한 코드 블록이다. 우리가 사용하는 웹 서비스는 여러 개의 Component로 구성되어 있다. Vue.js에서
10.[Vue] Node Package Manager(NPM)
JavaScript 프로그래밍 언어를 위한 패키지 관리 시스템입니다. NPM은 Node.js의 기본 패키지 관리자로, 개발자들이 다양한 JavaScript 라이브러리와 도구를 쉽게 설치하고 관리할 수 있게 해준다.기존에 브라우저 안에서만 동작할 수 있었던 JavaScr
11.[Vue] scoped
스타일 코드 안에 scoped라고 되어 있는 것을 확인할 수 있다. scoped 속성을 사용하는 이유는 1) 해당 컴포넌트 내에서만 스타일을 적용하도록 제한하여 스타일이 다른 컴포넌트에 영향을 미치는 것을 방지한다. 2) 대규모 애플리케이션에서 클래스 이름 충돌을 피할