Dev/Vue.js5 05. reactive, ref 오늘은 반응형에 관련한 것을 짧게 기록하려고 한다. reactive와 ref인데 간략하게 정리하면 다음과 같다.reactive - 객체, 배열 등 컬렉션 계열에 사용가능ref - 타입에 상관없이 사용가능결론적으로 말하면 위에서 정리한 것과 같다.임시로 만들어 놓은 코드로 보면 다음과 같다전체 코드는 다음과 같다.state라는 reactive함수로 count: 0이라는 객체를 선언했고그 밑에는 num이라는 0이라는 정수형 변수를 선언했다. 화면상에는 문제없이 0이 정상적으로 나온다.그러나 위의 count를 증가시키는 버튼을 누르면 정상적으로 숫자가 증가하는 반면 num을 증가시키는 버튼을 누르게 되면 다음과 같은 에러가 발생한다. reactive 함수가 0이라는 값을 만들지 못했다는 경고창과 num 증가.. 2024. 8. 5. 04. 텍스트 보간법, v-html, v-bind vue에서 데이터를 DOM에 바인딩 하는 방법으로는 텍스트 보간법, v-html, v-bind 등이 있다. 간단하게 요약을 해보자면1. {{ }} - 텍스트 보간법: 바인딩 된 데이터를 텍스트로 렌더링해줌2. v-html: 바인딩 된 데이터를 html요소로 반환해줌 (innerHTML과 동일한 기능이라 생각)3. v-bind: html 속성에 데이터를 바인딩할 때 사용 해당 내용을 코드로 한번씩 비교를 해보자면 다음과 같다.1. 텍스트 보간법export default 내부의 data의 htmlTest에 h1 test을 선언한 후 DOM 요소에 텍스트 보간법과 v-html요소를 하나씩 만들었다 해당 코드가 렌더링 되면 다음과 같다.텍스트 보간법으로 선언한 부분은 해당 요소가 텍스트로 (innerTEXT처럼.. 2024. 7. 30. 03. OptionAPI, CompositionAPI vue에서 script를 작성하는 방식은 두가지가 있는 데 제목처럼 OptionAPI, CompositonAPI 두가지 방식이다. 두 방식의 차이는 코드를 통해서 살펴보자 1. OptionAPIOptionAPI 방식은 코드에서 확인할 수 있듯이 export default 내부에 data, method, mounted등의 객체를 선언해서 컴포넌트의 로직을 정의하는 방식이다. data에 정의된 count에 접근하기 위해서 method나 mounted 부분을 확인해보면 this 키워드를 사용해서 접근하는 것을 확인할 수 있다. 2. CompostionAPIOptionAPI와의 차이는 script 태그에서 setup이라는 키워드가 추가되어있는데setup을 사용하게 되면 스크립트 내부에서 정의한 변수를 템플릿 .. 2024. 7. 25. 02. 페이지 라우팅 Vue를 공부하면서 페이지 안에 내용을 정리하기 위해 SPA 특성을 살리기 위해서 라우팅을 먼저 공부했다.Vue공식 문서의 흐름과는 다르지만 아무생각 없이 a 태그를 사용해서 다른 vue 파일을 렌더링 하려고 했는데 되질 않아서 라우팅 먼저 공부를 시작하게 됐다. 기본적인 순서는 다음과 같다.1. vue에서 페이지 라우팅을 하기 위해서는 vue-router를 설치해야한다.npm install vue-router 2. vue-router 모듈을 설치한 후 router를 설치하는 js파일을 생성 (src폴더 내부에 router 폴더 생성 후 index.js 파일 생성)import { createRouter, createWebHistory } from 'vue-router';import TemplateOpti.. 2024. 7. 24. 01. vue.js? 프론트와 관련된 라이브러리/프레임워크는 주로 react, typescript 등이 있다. 그 중 이번에 혼자 독학해보기로 마음 먹은 것은 vue.js(뷰)이다. vue.js의 특징은 선언적 렌더링이라는 특징이 있다. 말만 들으면 무슨 말인지 당최 모르지만 프론트엔드에 지식이 있다면 간단한 예시로 이해가 가능할 듯 싶다. 선언적 렌더링 선언적 렌더링을 간단한 코드로 살펴보기 위해서 HTML코드와 JS코드 그리고 vue.js로 작성된 코드를 비교해보자. 그 전에 vue.js를 사용하기 위해선 cdn으로 vue를 설치해야한다. 다음과 같은 코드를 입력해주고 본격적으로 비교를 해보자 1. JavaScript로 div안에 Hello world 만들기 다음과 같이 innerHTML 함수를 사용해서 원하는 문자열을 .. 2023. 12. 5. 이전 1 다음
