Vue.js

웹페이지 기능이 많아짐에 따라 이벤트들이 증가되고 둠 조작량이 증가하였습니다.이는 즉, 프론트앤드 개발자는 개발해야할 JS가 많아졌고, 근래에는 서버에 대한 지식까지 겸비를 해야합니다.Front-end Framework를 사용하는 이유는 DOM제어의 변경과 Compon

v-if는 안보이던것이 true가 되면 보이는게 아니고, 없던것이 true가 되면 렌더링되어 생성되는 개념이다. 참고) v-show가 css를 통해 숨겨져있는 상태에서 true가 되면 보이게 되며, v-if보다는 속도가 빠르다.true와 false를 사용할 때, boo

MVVM 패턴은 Vue의 패턴으로 Model, View, ViewModel을 사용해 View와 Model을 분리하는 역할로 ViewModel의 데이터가 변경되면 View(DOM)가 즉각 변경되게 된다.Vue.js에서 MVVM은 ViewModel을 담당하고 이벤트 발생

CLI는 Vue 프로젝트의 탬플릿을 만들어주어 협업할 때 좋기 때문에 사용됩니다.cmd를 통해 최신버전은 버그 발견했었기 때문에 최신버전이 아닌 구 버전인 4.5.15를 깔것입니다. cmd를 통해 깔았다면, VSCode에서 터미널 열고(Crtl + \` )을 입력하여

컴포넌트 : 하나의 독립된 개체로 HTML/CSS와 같은 단순 탬플릿 역활 뿐 만 아니라 기능 호출 및 데이터 바인딩 기능까지 지원한다.사용 이유독립된 개체이므로 어디에서든 동일하게 동작하여 재사용성이 좋다.모듈화로 유지보수가 편하다.다음 이미지를 보고 각각의 컴포넌트

라이프사이클 : 특정 시점별 자동으로 실행되는 메서드생성/부착/수정/삭제 총 4가지 시점이 있습니다.각 컴포넌트별 특정 시점에 동작해야할 경우들이 발생하기 때문이다.생성 : created() - 미리 데이터를 가져올 경우 사용부착 : mounted() - DOM에 접근

Vue.js는 SPA이다.SPA : Single Page Aplication의 약자로, 하나의 HTML을 뜻한다.특징 : 1\. 최초 한번 페이지 전체를 로드2\. 특정 부분만 AJAX를 통해 데이터 가져와 변경된 부분만 변경3\. SEO 불편CSR는 Client Si

Vue + Axios Vue에서 axios를 사용하기 위해서는 vue와 axios 둘다 CDN을 통해 가지고 와야합니다. CDN을 통해 axios 가져오기 복사 후 붙여넣기를 통해 axios를 사용할 수 있습니다. axios가 잘 사용되는지 확인하기 위해서는 json

Props란? Props : 부모의 데이터를 자식에게 전달해줄 때 사용된다. 상위 컴포넌트 -> 하위 컴포넌트 사용 이유 여러개의 .vue 파일로 나뉘어졌는데, 각각의 파일로 '데이터'를 보내기가 어렵다. 부모 자식간의 변수('상태')를 효율적으로 공유하기 위해 pr

$emit – 자식이 부모 컴퍼넌트로 이벤트를 전달 메서드부모 자식 관계여야만 하고, 데이터를 전달하긴 하는데, 이벤트 함수에 바꿔줘야 할 데이터를 딸려보내서 부모에서 바꾸게 한다. 즉, 데이터 바인딩이 아니라 요청이다.자식이 부모 데이터를 직접 바꾸게 되면 데이터 구

Vuex : 상태 관리 라이브러리 , 중앙 집중식 저장소 역할Vuex는 props 와 emit과 병행하여 사용할 수 있다.Vuex는 반복되는 props와 emit으로 데이터 관리가 복잡해지고, 데이터의 위치 파악 및 관리가 어려워지기 때문에 사용된다.Vuex를 사용하기

Vue BootStrap을 통해 Vue에서 컴포넌트 방식으로 이쁜 템플릿을 사용할 수 있다.Bootstrap V5가 출시되기 이전, V4에서는 jQuery로 작동하였습니다.jQuery는 DOM을 직접 조작하고 Vue.js는 가상 DOM을 사용하기 때문에, Vue.js에