코딩/Vue(5)
-
Vue와 React의 차이
개요자 000씨, Vue와 React의 공통점, 차이점을 이야기해보세요. 누군가는 쉽게 답할 수 있을지 모르겠지만, 얼마전 내게 이런 질문이 들어왔을 때 쉽사리 대답을 못했다. Vue나 React의 특징을 말하자면 말하겠는데 이 특징들이 각 기술에 한정되는 특징인지도 모르겠고, 특히나 Vue는 7주라는 짧은 기간동안 학습과 개발을 동시에 진행하다보니, 자세히 모른다고 느꼈다. 공식문서, 블로그에서 이야기하는 차이점을 이해하고 지식이 부족한 Vue에 대해서도 좀 더 배워보려고 한다. 프레임워크, 라이브러리프레임워크와 라이브러리를 어떤 기준으로 분류하냐에 따라 답은 달라지겠지만,Vue의 경우 프레임워크, React는 라이브러리로 구분할 수 있다. 난 이제껏 다양한 기능을 제공하는건 프레임워크 특정 기능을 모..
2025.06.24 -
Vue 리렌더링 hash-key를 통한 문제해결
❌ 개요 및 문제 졸업 전 마지막 프로젝트로 Vue를 진행했을 때 상세조회에서 상태, 담당자 변경 후 해당 목록에서 갱신되지 않는 이슈가 존재했다. 위 사진을 보면 상태를 진행중 -> 완료로 변경 후에 브라우저 콘솔을 통해 받아온 응답은 정상적으로 COMPLETED 즉, 완료 상태로 된 새로운 데이터를 잘 받아왔으나 아래처럼 테이블의 경우 갱신된 데이터를 UI상 보여주지 않았다. 시도해본 것으론, 기존 refetch로 강제로 새로운 데이터를 받아오는 방식의 변화를 주고자 상세조회 모달의 update 메소드와 invalidate를 연결해서 시도했다. 결과적으로는 똑같았고, 맘에 안들지만, 강제 리렌더링을 시키고자 여러 방법을 사용중에 다음에 힌트를 얻었다. key가 같아도 내부 데이터가 다른경우 리액트랑..
2025.06.04 -
Vue 템플릿 문법
Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다 크게 데이터 바인딩과 디렉티브가 존재한다 데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다 { title } // React{{ title }} // Vue.js 디렉티브 : 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음 Hello Vue.js 추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다
2025.03.22 -
Vue 스타일 가이드 배워보기
개요 현재 프로젝트에서는 팀원 3명 모두 새롭게 Vue를 사용해서 개발하고있다. 프로젝트 코드가 일관되게 유지하고자 여러 컨벤션들이랑 룰들을 미리 정했다. 1. 상세한 코드리뷰2. 변수, 함수, 파일, 폴더 명명 규칙 수립3. prettier, esLint와 같은 코드 포매팅 tool을 통한 코드 구조 통일화 하지만 우리끼리 규칙을 정하고, 좋은 코드를 찾고 하는건 귀찮고 더군다나 새로운 언어를 접한 우리 팀의 입장으로서는 반갑지 못한 일이었다. 위에서 언급한 방법들을 지키며, Vue에서 권장하는 방식으로 개발을 할 수 있는 방식이 있으니 그건 바로 Vue 스타일 가이드이다. https://ko.vuejs.org/style-guide/ Vue.jsVue.js - The Progressive JavaS..
2025.01.23