Vue - Options API, Composition API

VueVue는 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크이고, 잘 알려진 장점으로는 접근성 & 낮은 러닝커브라는 점이고, 준수한 퍼포먼스를 보여주기에 많이 사용된다. 프레임워크를 제공 (라이브러리의 집합체) 통제권이 프레임워크 자체에 있어 자유도는 낮을지 몰라도 협업에 약속된 기능을 사용하기에 코드가 명시적임SPA 구조 : 하나의 페이지로 이루어져있어 유저가 원하는 정보만을 보여주는 방식SFC 구조 : 하나의 컴포넌트 내에서 html, css, js가 모두 관리가 된다. 다른 특징들도 많지만 이에대한 정보는 아래글을 참고하자.2025.06.24 - [코딩/Vue] - Vue와 React의 차이 Vue와 React의 차이개요자 000씨, Vue와 React의 공통점, 차이점을 ..

개요자 000씨, Vue와 React의 공통점, 차이점을 이야기해보세요. 누군가는 쉽게 답할 수 있을지 모르겠지만, 얼마전 내게 이런 질문이 들어왔을 때 쉽사리 대답을 못했다. Vue나 React의 특징을 말하자면 말하겠는데 이 특징들이 각 기술에 한정되는 특징인지도 모르겠고, 특히나 Vue는 7주라는 짧은 기간동안 학습과 개발을 동시에 진행하다보니, 자세히 모른다고 느꼈다. 공식문서, 블로그에서 이야기하는 차이점을 이해하고 지식이 부족한 Vue에 대해서도 좀 더 배워보려고 한다. 프레임워크, 라이브러리프레임워크와 라이브러리를 어떤 기준으로 분류하냐에 따라 답은 달라지겠지만,Vue의 경우 프레임워크, React는 라이브러리로 구분할 수 있다. 난 이제껏 다양한 기능을 제공하는건 프레임워크 특정 기능을 모..

❌ 개요 및 문제 졸업 전 마지막 프로젝트로 Vue를 진행했을 때 상세조회에서 상태, 담당자 변경 후 해당 목록에서 갱신되지 않는 이슈가 존재했다. 위 사진을 보면 상태를 진행중 -> 완료로 변경 후에 브라우저 콘솔을 통해 받아온 응답은 정상적으로 COMPLETED 즉, 완료 상태로 된 새로운 데이터를 잘 받아왔으나 아래처럼 테이블의 경우 갱신된 데이터를 UI상 보여주지 않았다. 시도해본 것으론, 기존 refetch로 강제로 새로운 데이터를 받아오는 방식의 변화를 주고자 상세조회 모달의 update 메소드와 invalidate를 연결해서 시도했다. 결과적으로는 똑같았고, 맘에 안들지만, 강제 리렌더링을 시키고자 여러 방법을 사용중에 다음에 힌트를 얻었다. key가 같아도 내부 데이터가 다른경우 리액트랑..

Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다 크게 데이터 바인딩과 디렉티브가 존재한다 데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다 { title } // React{{ title }} // Vue.js  디렉티브 :  화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음  Hello Vue.js 추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다