이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다. 7장 7장에는 실질적인 Vue 프로젝트를 초기 세팅해가는 부분들이었다. 대략적으로만 알면 좋을 것 같다. 회사에서 실질적인 프로젝트를 진행하게되면 초기단계부터 구성하는 경우는 잘 없고 대부분 어느정도 틀이 잡혀있는 상태에서 투입되는 경우가 많기 때문이다. (물론 구조가 어떻게 되어있고 대략적인 지식은 필요하다) 단일 컴포넌트를 사용한 Vue 세팅 및 설정 도구에 대한 설명. 첫번째로는 npm vue/cli create를 수행하여 프로젝트를 생성하는걸 설명하고 있지만.. 현재는 더 빠르게 수행가능한 vite기반의 create-vue를 사용하는 경우가 많다고 함. 만약 Vite를 사용한다고 하면 2가지 방법이 있는데… 첫번째는 직접 설정하는것..

이 글은 주 단위로 하던 스터디를 개인적으로 정리하는 글입니다. 이전글에서 5장까지 작성했는데 6장에는 그냥 CSS를 어떤방식으로 사용 할 수 있는지에 대한 설명이 대부분 이였다. 특정 변수값을 v-bind중 하나인 style에 넣어서 적용 시킬수도 있고 class에 추가 할 수도 있고 다양한 형태를 지원한다. 스타일(css) 적용에 대한 내용이다. css의 적용은 기본적으로 동일하다. 요소의 기본 스타일 —> class로 명명된 순서에 따른 스타일적용 —> 인라인 스타일 적용. ex) .test와 .over라는 클래스를 각각 명시했고 동일한 부분이 존재한다면 마지막에 명시한 스타일을 따라간다. 기본적으로 Vue에서도 인라인 스타일을 권장하지는 않는다. 그래도 사용해야하는 경우가 있다면 data 영역에 ..

주 단위로 Vue 스터디를 진행했던 내용들을 그냥 개인적으로 정리하기 위해서 작성중인 글이다. 5장에 중요포인트는 주로 사용되는 이벤트를 보통 JS에서 많이 컨트롤 했었는데 그런부분들에 대해서 편의성 기능을 많이 넣어둔것 같다. 추후 사용시에 편리하게 사용 가능한 방법들에 대해서 보여주고 하는게 많았다. 이벤트 처리에 대한 설명이다. 주로 사용되는 부분들이 여기에 포함된다. KeyUp, keyPress, keyDown, click, doubleClick 등등 자바스크립트로 확인하던 부분들이 모두 여기에 들어간다. js로 특정 객체를 선택하여 이벤트를 걸지않고 onclick이벤트를 주던것과 동일하게 생각하면 될 듯 하다. 금액 : 입금 인출 계좌 잔고 : {{balance}} 위와 같은 코드가 있다고 할 ..

주 단위로 Vue 스터디를 진행했던 내용들을 그냥 개인적으로 정리하기 위해서 작성중인 글이다. 4장에 중요포인트는 실질적으로 주로 사용되는 data나 여러가지 기능을 제공하는 computed method watch등을 소개하고 사용방법을 알려주는 것인듯 하다. data옵션에 대해서 설명한다. 컴포넌트가 관리하고 추적해야 할 데이터를 등록하여 사용 한다. 리액트에서도 주로 재사용되는 단위를 컴포넌트라고 했었는데 동일한듯 보인다. Vue에서 제공하는 Data에 접근하거나 Vue Dev Tool 에서 보여지는 대상의 경우 모두 $로 시작한다. (ex $data) 다음과 같이 접근하여 사용가능하기 때문에 내부적으로 사용하는 변수들의 경우 $가 붙으면 안된다. data() { return { $name: "" }..

신규 프로젝트에 적용시키기 전 1주일 마다 원쌤의 Vue.js 퀵스타트 책 기준으로 1장 ~ 2장씩 스터디를 진행 하였다. 3장에서의 내용은 Vue에서 기본적으로 사용되는 문법에 관련된 것이었다. v-bind —> 앞에 : 를 붙이면 축약처리 v-bind:href = url주소 === :href = url주소 v-text v-html v-on —> 앞에@를 붙이면됨 처음에 볼 때는 생소하였으나 결국은 하나의 문법이다. ( {{}}는 콧수염을 닮았다고 하여 Mustache Expression 이라고도 함.) 위와같이 바인딩하여 표시되는 애들은 단방향 데이터 바인딩 이라고 한다. 데이터가 변경 되는걸 감지하거나 해서 새로 렌더링 해주는게 아니라는 거다. 그런부분들을 연동하여 데이터 변경 될 때 마다 그려주는..

회사에서는 현재 수행중인 프로젝트 기준으로 프론트 서버를 도입하고자 하였다. 이 경우 React와 Vue가 결국 대안으로 떠오르게 되었는데 Vue의 경우에는 문법적으로 지정된 룰 등이 명확하여 모두가 스터디 하면서 새로 만들어갈 프로젝트임에 있어서 가이드 라인이 조금 더 수월하게 잡힐듯 해 선정되었다. 1차적으로 프로젝트 환경 구성이 들어가기 전에 먼저 Vue3버전으로 작성된 책을 기준으로 먼저 사내 스터디를 진행 한 뒤 프로젝트를 점진적으로 진행 시키기로 되었다. 책주소 (책 광고를 해준다고 뭘 받고 그런게 아닙니다) https://www.yes24.com/Product/Goods/118996796 원쌤의 Vue.js 퀵스타트 - 예스24 실전 예제로 완성한 Vue.js의 모든 것 Composition..