이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다. 9장 Composition API 에 대해서 설명하는것으로 시작한다. 기존에는 options API 형식으로 사용하던걸 Vue3버전에서 부터 Composition API 방식으로 변경하여 적용이 가능하다. Composition API 를 사용할때의 장점은 구분이 명확하게 이뤄질 수 있다는 점이다.(data, method, onMounted 등등을 사용할 때 조금 더 직관적임.) ref와 reactive를 사용한 state관리에 대해서 말한다. ref를 사용하는경우 state에 직접 접근하지 못하고 .value를 호출하여 값을 가져와야한다. Vue에서는 상태변화를 감지하기 위해 프록시 형태로 감싸게되는데 이 부분때문인듯 하다. Composi..

이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다. 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}} 위와 같은 코드가 있다고 할 ..