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

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

회사에서 프로젝트를 진행하며 state로 1이란 데이터를 넘겼는데 정작 꺼내보니 0으로 나오고 어떻게 해결해야 할지 몰라 query를 사용하여 데이터를 넘겨받아 해결한 적이 있어서, 어디가 문제였는지 공부할 겸 정리를 해보려고 한다!!!1. Params, Query, State의 차이1 - 1. ParamsURL 경로의 일부로 라우팅 경로에서 동적으로 변화하는 값을 전달하며,일반적으로 특정 리소스를 식별할 떄 사용하여, 동적 URL 경로에서 특정 값을 추출할 때 사용합니다.ex) user/:id, product/:id// URL 경로: /user/:idconst route = useRoute();const userId = route.params.id; // 'id'는 URL 파라미터1 - 2. Query..

Options API Options API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됩니다. [특징]구조화 방식: 컴포넌트는 data, methods, computed, watch, props, lifecycle hooks 등의 옵션으로 나누어 관리됩니다. 각 로직이 어디에 위치하는지 명확하게 구분됩니다.코드 일관성: 상태와 메서드, 계산된 속성 등이 명확한 섹션으로 나누어져 있어 코드를 한눈에 이해하기 쉽습니다.초심자 친화적: Vue.js 초보자나 작은 프로젝트에 적합하며, 구조가 직관적입니다. 각 기능이 정해진 곳에 위치하기 때문에 로직이 한눈에 파악..