1. ref와 reactiveref: 주로 원시 타입(String, Number, Boolean 등)을 반응형으로 만들 때 사용하지만, 객체나 배열도 감쌀 수 있습니다..value를 통해 값에 접근하고 변경합니다.reactive: 객체(Object)나 배열(Array)과 같은 참조 타입만을 반응형으로 만들 때 사용합니다. .value 없이 직접 속성에 접근하고 변경합니다.2. watch(ref)watch 함수에 ref로 선언된 변수를 직접 전달하면, ref의 .value 속성 변화를 감지합니다.코드 예시: Count: {{ count }} Increment Count User Name: {{ user.name }} User Age: {{ user.age }} Change U..

Vue.js에서 상태 관리를 위해 ref와 reactive를 사용할 수 있습니다. 두 방식 모두 반응형(Reactivity) 시스템을 제공하지만, 사용 방법과 동작 방식에서 차이가 있다ref란?ref는 Vue 3에서 제공하는 반응형 상태 관리 방법 중 하나로, 기본형(Primitive) 데이터와 객체(Object) 모두를 반응형 상태로 만들 수 있습니다. 반응형 변수를 개별적으로 관리할 때 유용하며, 값에 접근할 때 .value를 사용해야 합니다.ref의 특징기본형 데이터(숫자, 문자열, 불리언 등)와 객체를 감쌀 수 있음반응형으로 관리하기 위해 .value 프로퍼티를 사용템플릿에서 자동으로 언래핑(자동으로 .value가 적용됨)기본형 데이터에서 ref 사용기본형 데이터를 다룰 때 ref를 사용하는 예제..

소개이전에 Computed 속성에 대해서 자료를 찾던 중에 Method 보다 자주 나온 단어가 Watch 속성이다. 심지어 Computed 와 Watch 를 비교한 Vue.js 공식 문서 페이지가 있다. Watch 속성은 말그래도 보다 라는 말 그대로 지정한 특정 데이터를 계속 바로보며 변경사항이 생기면 바로바로 반응하여 작업한다고 알고 있는데 이거 말고 더 더 특징적인게 있을거라 생각하여 찾아볼려 한다.Watch공식 문서의 설명에 따르면 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성입니다.즉, 비동기 작업이나 API 호출로 인하여 데이터가 변경될 떄 이를 감지하여 특정 동작을 수행하고 싶을 때 유용합니다.기본 사용법/** 실행 결과 **/call beforeCreatecall wa..

Intro회사에서  vueuse의 기능 중에서 useLocalStorage 에 대해서 공부하기 위해 찾아보던 중 주임님께서 처음부터 vueuse를 공부하는 것보다 키워드들을 던져주시며 차례차례 학습해보는 것이 더 도움이 된다고 해서 오늘부터 설 연휴기간 동안 차근차근 공부하고 블로그로 작성해 남긴다고 생각 해볼려고 한다.SPA (Single Page Application)웹 애플리케이션 또는 웹 사이트가 하나의 HTML로 구성되고, JavaScript로 동적으로 콘텐츠들을 변경하여 보여주는 방식이다.매번 새로운 페이지를 전달받아야 하는 MPA 방식과 달리 초기 화면으르 로드 이후에는 서버로부터 필요한 데이터만 주고 받게 하여 레고 처럼 필요한 부분만 떼었다고 끼워 빠르고 부드러운 사용자 경험을 제공한다...

Intro회사에서 프로젝트를 진행하며 프론트엔드, 벡엔드 구분없이 작업을 하던 중 'Vue.js의 Computed 와  Method 속성의 차이가 정확하게 뭐지? 둘 다 반복적인 코드들의 중복 제거를 위해 있는거 아닌가? 어떤 차이가 있지?' 라는 생각을 가지고 있어서, 정리를 해볼려 한다.computed 속성정의computed 속성은 Vue 인스턴스에서 종속성을 기반으로 계산된 속성을 정의합니다. data 속성이나 다른 computed 속성에 의존하여 값을 자동으로 계산하며, 캐싱(caching) 기능이 있어 종속된 값이 변경될 때만 다시 연산합니다.특징종속성이 변하지 않는 한 계산된 값을 재사용 합니다.종속성이변하면 자동으로 다시 계산하여 캐싱합니다.복잡한 로직이나 다수의 변수를 조합한 값을 필요로 ..

INTRO회사에서 프로젝트를 진행하며 API 응답값으로 받은 리스트의 값에 따라 동적으로 이미지 경로를 변경하기 위해 v-bind:src로 리펙토링 하는 도중, 화면에 아무것도 나오지 않는 문제에 직면하였다.개발자 도구로 보면 API는 정상적으로 호출되고 응답값이 온느데 어떤게 문제인거지 하며 고민을 하니렌더링 과정이 중단이 되며 화면에 아무것도 나오지 않았다....처음에는 'API가 비동기로 처리되다보니 응답값이 초기 렌더링 과정에서 데이터가 없어서 발생하는 문제인가' 라는 생각이 들었고 그 다음에는 '문제가 되는 부분만 렌더링 중단되고 나머지는 나와야하는거 아닌가? 그리고 데이터가 업데이트가 되면 그 부분도 렌더링이 다시 진행되어야 하는거 아닌가?' 라는 생각이 들어 구글링을 해보니 데이터 바인딩시 ..

2년간의 취업 준비를 끝마치고, 저를 좋게 봐주신 대표님과 이사님들 덕분에 울랄라랩이라는 회사에 취업을 하여 10월에 첫 출근을 하였어요.현재 회사에서는 프론트엔드 기술 스택으로 Vue.js를 사용중인데 이전 프로젝트들을 보는데 하나도 모르겠더라구요.😵‍💫그동안 Thymeleaf를 사용하여 데이터를 출력하고 BootStrap으로 디자인 작업을 했왔기 때문에  1인분을 하는 개발자가 되기 위해서 빠르게 배워야겠다는 생각이 들었어요. 선배님들께서는 공식문서를 보면 다 나와있다고 말씀하시지만....저한테는 너무 어려운 내용이라 캡틴판교의 강의를 통해서 기본부터 차근차근 쌓아갈려고 합니다.😝1. 개발 환경 설정 - VS Code 플러그인 -  - Chrome 개발자 도구 - 2. Vue.js 소개2 - 1..