Vue.js 리스트 렌더링Vue.js에서 리스트 렌더링은 배열이나 객체를 기반으로 동적인 목록을 생성하는 데 사용됩니다.이를 위해 v-for 디렉티브를 사용하며, 각 항목을 반복하여 렌더링할 수 있습니다.기본적인 v-for 사용법v-for 디렉티브는 배열의 각 요소를 반복하여 출력할 때 사용됩니다.// 숫자 범위 {{ n }} // 배열 또는 객체 {{ item.text }} 인덱스 사용두번째 선택 인자를 통해서 인덱스를 가져와서 사용할 수도 있습니다. {{ index + 1 }}번쨰 : {{ item.text }} 객체 사용시객체의 속성을 반복할 때, 객체를 받아서 사용할 수도 잇찌만 아래와 같이 value, key 형식으로 따로 받아서 사용가능 하며 이때는 세번째에 선..

Vue.js 조건부 렌더링이란?Vue.js에서 조건부 렌더링이란 특정 조건에 따라 DOM 요소를 표시하거나 제거하는 기능을 의미하며, 이를 통해 사용자는 동적으로 화면을 구성할 수 있습니다.v-ifv-if는 조건이 참일 경우 요소를 렌더링하고, 거짓이면 DOM에서 제거합니다. 내용 숨기기 내용 보이기 v-if를 이용하여 내용이 사라지게도 보이게 할 수 있습니다.v-else 및 v-else-ifv-else는 v-if 조건이 거짓일 때만 요소를 렌더링하며, v-else-if는 추가적인 조건을 설정할 때 사용됩니다. 버튼 A를 눌렀습니다. 버튼 B를 눌렀습니다. 나머지 버튼들을 눌렀습니다. 버튼 A 버튼 B 버튼 C 버튼 Dv-showv-show는 display 속성을 변경하여 요소를 숨깁니..

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

보호되어 있는 글입니다.

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..

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