아둥바둥 버텨라

서론. 프론트엔드는 하나하나 잘 정리하지 않은 채 작업을 한다면 코드의 양이나 복잡도가 너무나도 높아지는 느낌을 받았다. 그로 인해 상태관리 라이브러리 (Pinia, Vuex..)를 굉장히 효율적으로 사용해야 중복되고 복잡한 코드의 양을 줄일수 있다는 것을 느끼고 있다. 당장에 로그인만 하더라도 JWT토큰을 백엔드에서 구현하는 것과 함께 Vue.js 내에서 관리해 줘야 되는 게여간 까다로운 게 아니란 것을 알게 되었다. 그렇기에 정리를 해두고 계속 고쳐가는 방향으로 진행하려고 한다. JWT 토큰 https://mo-greene.tistory.com/108 Jwt + SpringSecurity + Mybatis 구현 Vue.js 와 SpringBoot를 사용해 게시판 토이프로젝트를 구현하고 있다. CRU..

유효성 검사가 제일 짜증 나고 귀찮은 작업이 아닐까 싶다. Vuetify에선 프론트에서 처리해 줄 수 있는 유효성검사가 있어 소개하려 한다. https://vuetifyjs.com/en/components/forms/ Vuetify — A Vue Component Framework You are viewing the documentation for Vuetify 3 vuetifyjs.com Vuetify 에선 Form태그의 유효성검사를 쉽게 해 줄 수 있는 기본 컴포넌트 하나와 2개의 써드파티가 있다. 써드파티인 Vee-validate, Vuelidate 이 두 개도 사용하기에 따라 좋은 것 같지만 굳이 기본 Rules로 처리할 수 있는데 써드파티를 깔아서 사용해야 되나 싶다. 간단한 예시를 보자 양식으..

Composition API Vue.js3 에서 CompositionApi를 사용하라고 "권장"하고 있다. 쭉 사용해보고 나니 확실히 사용하기 편해 OptionsApi를 멀리하는것이 당연해 질 정도이다. 점점 Vue.js3에서 좋은 방향으로 권장하고 있는 부분들이 있는데 그 중 하나가 현재 진행하고 있는 토이프로젝트의 일부분이다. CompositionApi를 적용하였지만 Vue.js를 공부하면서 매번 export default를 통해 name, composition, props..등등 지정하면서 import시키는 부분이 귀찮고도 궁금했지만 그냥저냥 사용하고 있었다. export default는 찾아보니 javascript에서 하나의 클래스로 동작하는 개념인 것 같지만 깊게 적혀있는 블로그가 없어 더 찾지..

https://mo-greene.tistory.com/97 [Vue.js3] Vuex란 애플리케이션이 복잡해지고 컴포넌트 수가 많아지면, 컴포넌트 간의 데이터 전달 및 관리가 점점 더 어려워진다. 기본적으로 Vue.js2에선 자식 컴포넌트간 데이터를 전달하는 eventBus가 있었지만 V mo-greene.tistory.com 전에 포스팅한 중앙 집중식 상태관리 저장소 Vuex 따지고 보면 Vuex의 생김새는 Vue.js3에서 강조하는 CompositionAPI가 아닌 OptionsApi의 형태를 보이고 있다. https://vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? Pinia is now the new default The official state ma..

애플리케이션이 복잡해지고 컴포넌트 수가 많아지면, 컴포넌트 간의 데이터 전달 및 관리가 점점 더 어려워진다. 기본적으로 Vue.js2에선 자식 컴포넌트간 데이터를 전달하는 eventBus가 있었지만 Vue.js3에선 EventBus 가 없다. 앱의 크기가 커질수록 코드의 복잡성이 높아지고 객체를 전달하면서 짬뽕이 되가는 코드가 되니 없앴다고 하는데 음.. 그렇다면 부모자식 컴포넌트간에 데이터를 전달하는거야 props, emit이 있으니 그렇다고 치고 자식자식 컴포넌트간의 데이터 전달은 자식부모자식 이렇게 진행이 되야하는 걸까 Vuex는 Vue.js의 상태관리 패턴 + 라이브러리 이다. 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하게 된다. 즉, 부모든 자식이든 데이터를 전달하면서 복잡하게 만들지 말고..

Vue의 특징 가상 DOM 지원 MVVM 패턴 MVVM패턴? View HTML, CSS 유저인터페이스(UI) Model 도메인 특화 데이터 ViewModel View의 실제 논리 및 데이터 흐름 : 상태와 연산 개발환경 Node.js or SpringBoot : 서버측 플랫폼 (내 재량에 따라 선택) NPM(Node Package Manager) : 의존성 관리를 위한 노드패키지관리자 Vscode : 코드편집도구(IDE) Vue-CLI : Vue 앱 작성을 위한 도구 Chrome FrontEnd 디자인된 내용을 화면을 통해 구현 UI, 데이터 처리 및 상태관리 babel.config.js 코드를 변환시킴 과거의 코드형태로 바꿔주는 것 'browserslist'에서 활용 package.json script..