본문 바로가기

Java Scripts

 (57)
Vuex - State & Getter Vuex: State Management Pattern + Library installation npm install vuex --save Core Concepts Vuex application is the store. A "store" is basically a container that holds your application state. Vuex 애플리케이션은 store 입니다. "저장소"는 기본적으로 애플리케이션 상태를 보관하는 컨테이너입니다. Web application 에서 공통으로 참조하는 state 를 global 한 부분에 store 하여, application 내부의 다른 component 가 쉽게 access and update 할 수 있게 하였다. This State is react..
Vue 3 Forms : Submitting Forms In the current state of frontend development, the most common approach to submitting form data to our backend is through XMLHTTPRequests or XHR for short. 현재 프론트엔드 개발 상태에서 백엔드에 form 데이터를 제출하는 가장 일반적인 접근 방식은 XMLHTTPRequests 또는 줄여서 XHR을 사용하는 것임. Axios is a library that will allow you to create XHR requests without having to deal with the vanilla XHR JavaScript API. Axios는 바닐라 XHR JavaScript API를 처..
JavaScript spread operator ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가됨. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리함을 제공. Spread Operator 기본 문법 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다. // Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // String var str1 = 'paper block..
Vue 3 : Lazy Validation A common requirement in forms is to have the ability to only trigger the validation of a certain field whenever the user is done typing, this is called lazy validation. 지연 유효성 검사는 사용자가 특정필드의 입력을 완료할 때마다 특정 필드의 유효성 검사만 트리거하는 기능임 Text and email input fields fire different events depending on how the user interacts with them. The input event fires every time the user adds or deletes a character int..
Vue 3 : Tree shaking // 모든 배열 유틸리티들을 가져온다. import arrayUtils from "array-utils"; Since we are only using the object , string , boolean and number methods of yup, We use destructuring so that when we build our application, the parts of the library that we are not using can be removed from the bundle and we can save on some bundle size — this is known as tree-shaking. object , string , boolean 및 number 메소드만 사용하고 있으므로 ..
Vue 3 : What is yup? validation code 를 직접 작성하는 것이 귀찮고 시간도 많이 걸리는 작업이기 때문애 YUP package 를 이용하면 된다. Vee-validate recommends as a best practice to use the library Yup https://github.com/jquense/yup in order to create our validation schemas. https://github.com/jquense/yup GitHub - jquense/yup: Dead simple Object schema validation Dead simple Object schema validation. Contribute to jquense/yup development by creating an a..
Javascripts destructuring 정의 Arrays나 object 의 property 에서 필요한 array element 나 field data 만 distinct 한 변수에 담아오는 표현법임 용례 ex1 ) 배열에서 descructure 하는 방법 const x = [1, 2, 3, 4, 5]; const [y, z] = x; // 1 과 2가 각각 y, z 에 assign 됨 console.log(y); // 1 console.log(z); // 2 ex2 ) object 에서 descructure 하는 방법 const obj = { a: 1, b: 2 }; const { a, b } = obj; // is equivalent to: // const a = obj.a; // const b = obj.b; ex 3) Obj 에서 필요..
Vue 3 Why the Composition API There are currently three limitations you may have run into when working with Vue 2: As your components get larger readability gets difficult. 구성 요소가 커질수록 가독성이 어려워집니다. The current code reuse patterns all come with drawbacks. 현재 코드 재사용 패턴에는 모두 단점이 있습니다. Vue 2 has limited TypeScript support out of the box. Vue 2는 기본적으로 TypeScript 지원이 제한되어 있습니다. When to use the Composition API? You want optimal Typ..

티스토리툴바