[Vue] 반응형(Reactivity) 반응형 상태 선언❏ reactive() Click : {{ state.count }} 객체나 배열과 같은 Reference Type(참조 타입)을 반응형 객체로 만들 수 있음 {{ message }} click 반응형 함수는 Reference Type(참조 타입)의 반응형 상태를 선언하는 함수이기 때문에, Primitive Type(원시 타입)은 반응형이 동작하지 않음❏ ref() {{ count }}기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 사용생성한 객체 안에는 value라는 하나의 속성만 포함하는데 value의 값은 ref() 메서드에서 매개변수로 받은 값을 가지고 있음이 객체는 내부의 value 값에 대한 반응형 참조(refer.. [Vue] 템플릿 문법 Vue 데이터 바인딩{{ message.split('').reverse().join('') }}기본 형태는 {{ data }} (이중 중괄호, 콧수염 괄호) 사용이중 괄호에서는 자바스크립트 표현식도 가능함 Vue Directives(뷰 디렉티브)v- 접두사가 붙은 특별한 속성으로, HTML 태그에 직접 추가하여 화면 요소를 동적으로 제어핵심 역할은 데이터가 변경될 때 화면(DOM)에 어떤 반응(Reactivity)을 일으킬지 Vue에게 알려주는 것v-once {{ message }} // Hello World!!!!!!!! (클릭할 때마다 느낌표가 붙음) {{ message }} // Hello World! Click! 데이터가 변경되어도 갱신(반응)되지 않는 일회성 보간 수행v-.. [Vue] Lifecycle Hooks(라이프사이클 훅) Lifecycle(라이프사이클)Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말함다시 말해, 인스턴스가 생성된 후 눈에 보여지고 사라지기까지의 단계 Lifecycle(라이프사이클) 단계생성 (Create) ➡️ 장착 (Mount) ➡️ 업데이트(Update) ➡️ 소멸(Unmount) Lifecycle Hooks(라이프사이클 훅)라이프사이클 단계에서 실행되는 함수 01. 장착 (Mount): 화면에 처음 나타날 때 ✍🏻 onBeforeMount()컴포넌트가 화면(DOM)에 삽입되기 직전에 호출가상 DOM은 준비되었지만, 실제 화면에서는 아직 볼 수 없음 ✍🏻 onMounted()컴포넌트가 화면에 완전히 그려진 후에 호출사용자가 화면에서 컴포넌트를 볼 수 있으.. [Vue] Component 컴포넌트란?UI를 독립적이고 재사용 가능한 조각으로 나눈 'UI 부품' 또는 '레고 블록' 컴포넌트 사용 이유재사용성 (Reusability) : 반복적인 코드를 캡슐화하여 재사용하기 위함조직화 (Organization) : 복잡한 페이지를 컴포넌트 단위로 나누면 코드 구조가 매우 깔끔하고 명확해짐독립적인 관리 (Maintainability) : 독립적으로 코드를 분리하여 쉽게 유지보수하기 위함 컴포넌트의 구조 {{ label }} : 컴포넌트의 HTML 구조를 정의하는 부분 ② main.js에서 각 컴포넌트 import 하기import {createApp} from "vue";import App from './App.vue'import AppHeader from './components/AppHead.. Axios(엑시오스) Axios(엑시오스)서버와 HTTP 통신을 하기 위해 가장 널리 사용되는 Promise 기반의 자바스크립트 라이브러리서버에 있는 데이터를 가져오거나(GET), 새로운 데이터를 전송(POST)하는 등 API를 호출할 때 사용하는 매우 편리한 도구💡 사용하는 이유자동 JSON 변환 : 서버에서 받은 JSON 데이터를 자동으로 자바스크립트 객체로 변환간편한 에러 처리 : 4xx, 5xx 같은 에러 응답을 받으면 바로 .catch()로 처리할 수 있음요청 취소 및 타임아웃 : 특정 시간 동안 응답이 없으면 요청을 자동으로 취소하는 타임아웃 설정이 쉬움인터셉터(Interceptors) : 모든 요청이나 응답을 가로채서 헤더에 인증 토큰을 추가하는 등 공통 로직을 쉽게 삽입할 수 있음편리한 사용 : 다른 HTTP.. [Vue] Vue의 기본 Vue자바스크립트 기반의 프레임워크MVVM 패턴에서 뷰(View)의 역할과, 데이터를 연결하는 뷰모델(ViewModel)의 역할을 모두 수행 💡 MVVM (Model-View-ViewModel)- UI 개발을 위한 소프트웨어 아키텍처 패턴- 목적 : 화면 로직과 비즈니스 로직을 분리하여 깔끔하고 유지보수성, 협업 효율성 위함- Model : 핵심 데이터와 비즈니스 로직 / View : 사용자에게 보여지는 화면 / ViewModel : 뷰와 모델을 연결 Vue 설치방법❏ CDN ❏ NPMnpm init ❏ CLIVue CLI : 웹팩 기반 빌드 도구로, 특정 웹팩 기능에 의존하지 않는 한 vite로 프로젝트 시작하는 것을 권장npm i -g @vue/cliVite : Vue SFC를 지원하는 .. Vue 관련 핵심 용어 라우팅 (페이지 이동)Router (라우터) 🗺️사용자가 웹사이트의 다른 페이지로 이동할 수 있도록 길을 안내하는 시스템사용자가 '메인 페이지'에서 '상품 상세 페이지'로 가는 경로를 설정하고 관리하는 역할vue-router 라이브러리를 통해 구현하며, 어떤 컴포넌트를 보여줄지 규칙을 정의함 Route (라우트) 📍라우터 내부에 설정된 각각의 페이지 경로를 의미라우터(Router)가 도시의 모든 길 정보가 담긴 '지도'라면, 라우트(Route)는그 지도 위에 표시된 경로 컴포넌트 간 통신 Props (프롭스) 🔽부모 컴포넌트에서 자식 컴포넌트로 데이터 전달할 때 사용하는 단방향 데이터 흐름 방식자식은 받은 데이터를 직접 수정할 수 없음 Emit (에밋)🔼자식이 부모에게 보내는 신호나 메시지pro.. Option API vs Compostion API Vue.js에서 컴포넌트를 작성하는 두 가지 방식인 Options API와 Composition API가 있다. 간단히 말해, 이 둘은 레고 블록을 조립하는 두 가지 다른 설명서라고 생각할 수 있다. Composition API는 Vue는 정해진 서랍장에 정리하는 방식이고, Composition API는 관련있는 것끼리 묶어 정리하는 방식이다. 자세한 비교는 아래에서 더 알아보자. 01. Option API 1) 정의Vue의 전통적인 방식으로, 컴포넌트의 data, methods, mounted 등 같은 옵션 객체를 사용하여 컴포넌트의 로직을 정의옵션으로 정의된 속성들은 함수 내부에서 THIS로 노출되며, 이는 컴포넌트 인스턴스를 가리킴 2) 동작 원리data : 컴포넌트에서 사용할 변수(데이터)meth.. [Vue] Router를 이용해서 페이지 전환하기 01. Vue Router 01) Router라운터는 브라우저에서 웹 페이지 이동할 때 화면을 전환하는 기능페이지를 이동할 때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 화면을 바꾸는 것 (=Single Page Application)라우팅을 이용하면 화면 간의 전환을 매끄럽게 할 수 있음뷰에서는 라우팅 기능을 지원해 주는 라이브러리가 있음뷰 라우터는 브라우저를 새로고침하지 않고 페이지끼리 자유롭게 이동할 수 있음페이지를 이동할 때, 변경된 요소의 영역에 컴포넌트를 갱신해 줌 02) Vue Router 설치 npm install --save vue-router 02. 새로운 프로젝트 생성 ① 터미널에 'vue create sep14' 입력하기vue create sep14 ② .. [Vue] 반복문, 버튼 만들기 Vue를 이용해서 Board 만들기 01) 새로운 프로젝트 생성 ✏️ 터미널에서 파일을 생성할 폴더로 들어간 후 'vue create sep13' 입력vue create sep13 ✏️ Visual Studio Code에서 생성한 파일 열기 ✏️ 새 터미널 열고 'npm run serve' 입력하여 서버 구동하기 02) components에 새로운 파일 생성하기 03) BoardVue.vue 기본 설정✏️ ✏️ 값이 잘 들어오는지 확인 Vue에서 For문 사용하기 01) BoardVue.vue에서 반복문 사용해서 테이블 만들기 번호 제목 작성자 작성일 조회수 .. 이전 1 다음
