치춘짱베리굿나이스

Form 다루기 처음엔 그냥 무식하게 (?) ref 로 관리했는데 ref 들이 너무 많아지니까 이게 맞나 싶어서 찾아봤기도 하고 동료분께 조언을 얻었따. 전부 ref로 관리하기 Submit 그냥 모든 값을 ref 로 관리하는 방법이다 구현이 쉽고 따로 형변환을 해줄 필요도 없이 모든 데이터가 잘 들어간다 단 폼이 길고 복잡해질 경우 모든 범주에 대해 ref를 추가해 주어야 한다는 사실이 매우 애매하다 FormData 활용하기 Submit JavaScript API인 FormData 를 사용해서 이벤트를 FormData 객체로 변환해주는 방법이다 reactive, ref 등을 전혀 사용하지 않기 때문에 코드가 매우 짧아진다는 장점이 있다 단 FormData 내부 값들을 getter 로 가져와야 하기 때문에..

Vue를 먹자 Vue는 공식 문서가 참 달다 … 굳이 다른 블로그 안 봐도 공식문서만으로 왠만한 게 다 해결되는듯 … 반응형 API 컴포지션 API https://ko.vuejs.org/guide/extras/composition-api-faq.html 뷰 공식문서를 보면 Options | Composition 으로 나누어져 있는 것을 볼 수 있다 Options 는 Vue 2에서 사용하던 기존 체계이고, Composition API는 Vue 3에서 공식적으로 지원하기 시작한 API이다 컴포지션 API 체계로 바뀌면서 로직의 재사용성이 높아졌고, 코드 구성을 조금 더 유연하게 할 수 있게 되었다 타입스크립트와도 잘 맞아서 타입 추론도 더 잘 된다고 한다 setup() https://ko.vuejs.org/..

Vue를 먹자 .vue 파일 구성 // App.vue {{ str }} 이전 글에서 Vue 구성을 간단하게 알아보았다 template Vue에서 화면에 그려지는 요소를 다루는 영역이다 html 파일 작성하듯이 작성하면 되고 (문법이나 컨벤션 등이 html과 일치), 쪼끔쪼끔씩 Vue 문법들이 섞여들어간다 많이 쓰이는 Vue 문법들을 살펴보자 변수 출력하기 {{ variableName }} 콧수염 괄호라고도 불리며, 데이터를 직접 연결 (바인딩) 해줄 때 (변수, 함수의 결과값 등) 사용한다 위의 경우 variableName 이라는 변수를 span 태그 안에 출력해주는 동작이다 {{ new Date().toDateString() }} 당연하게도 어떠한 함수의 결과값도 전달할 수 있다 {{ `${variab..

Vue를 먹자 Vue를 먹은 것을 정리 RealWorld 라는 웹앱을 5일동안 클론코딩 (ㅋㅋ) 하면서 빠르게 문법을 손에 익히고 뭐… 그러고 돌아왔습니다 Vue란 JavaScript 프레임워크이다 구글에서 일하던 Evan You가 Angular.js의 단점을 보완하여 이러쿵저러쿵… (이하생략) MVVM 모델에서의 VM (ViewModel) 부분에 해당한다 장점 입문이 쉽다 (야너두 시작할 수 있어) React와 Angular 보다 후발주자인 만큼 둘의 장점만을 취해서 발전시킨 형태라 빠르고 가볍다 공식문서가 꽤 잘 되어 있는 편 MVVM 모델 Model - View - ViewModel Model: 어플리케이션에서 사용하는 데이터를 처리하는 부분 자바스크립트 코어 부분이라고 보면 된다 View: 화면에..