Java Scripts (57) 썸네일형 리스트형 What is babel? babel 이란? Babel is a JavaScript compiler. babel 은 javascript 로 결과물을 만들어주는 컴파일러 ( 소스 대 소스 컴파일러) javascript 로 변환하는 과정이 왜 필요한가? ESNext 문법을 기존의 브라우져에 사용하기 위해서 babel 은 필수적이다 왜내하면 예전 브라우져 예전 os 사용하는 경우가 많기 때문에 최신 문법으로 설계된 javascript 를 돌리기 위함이다. polyfill 은 무엇?? polyfill은 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는것. babel 은 이러한 polyfill 을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원 babel 은 컴파일시에 실행되고 babel-polyfill 은 런.. Validating Vue 3 Forms : Why Vee-Validate? 목적 Validate single fields and full forms - learn how to use Vee-Validate to validate both a single input in our applications, and then grow that to validating a full form with a defined set of rules. Vee-Validate를 사용하여 애플리케이션의 단일 입력을 모두 검증한 다음, 정의된 규칙 세트를 사용하여 전체 양식을 검증하는 것을 알게 된다. Handle errors - Next, we will learn together how to check and present validation errors to our users as they progre.. Vue 3 Forms : BaseRadio - BaseRadioGroup BaseRadio 라디오버튼은 체크박스처럼 단일 입력으로 작동하지 않습니다. 라디오 버튼은 라디오 버튼그룹의 일부로 존재하고 기능하며, 각각 라디오버튼은 single 상테를 가지고 있다. 그룹의 상태에 따라, 라디오 버튼은 해당 그룹에 있는 다른 라디오 버튼들과 연계되어서 활성화되거나 비활성화될 수 있습니다. Making it v-model capable radio buttons don’t bind to the value property, but use the checked property instead. 라디오 버튼은 “value” 속성에 바인딩되지 않고 대신 “checked” 속성을 사용한다. The modelValue of our BaseRadio elements will contain the us.. Vue 3 : What is lint? ESLint는 code convention을 사전 정의된 rules에 따라 감지하는 기능을 제공. ESLint를 적용하면 code convention에 어긋난 모든 부분들을 하나도 빠짐없이 알아서 발견해주고 심지어 코드 변경 내용 저장하면 자동으로 ESLint 설정된 rules 대로 fix해주는 기능도 적용할 수 있음. package.json 적용 ESLint test 를 위한 project 를 아래 절차대로 생성함. vue create vue_lint // vue_lint 는 project 이름임. select default options ( vue3 babel, lint) npm install --save-dev eslint eslint-plugin-vue // 이미 install 되었으므로 vers.. Vue 3 Forms : Base Checkbox Labels first parent 에서 component 내부로 label 을 넘겨주기 위하여 label 을 prop 로 component 에 추가 한다 Making it v-model capable 체크박스 입력은 해당 상태를 값에 직접 바인딩하는 것이 아니라 체크된 속성에 바인딩한다. 체크박스의 값이라고 하는 속성은 일반적으로 프런트엔드에서 사용되지 않는다. checkbox type 의 은 input 이벤트를 트리거하지 않고, selected 및 unselected 될 때마다 change event 를 trigger 합니다. parent component 에게 checkbox 가 전환되었음을 알리고 싶을 때마다 update:modelValue를 내보낼 필요가 있다, 이를 위해서는 입력 element.. Vue 3 Forms : Auto-importing components Finally, we import upperFirst and camelCase from Lodash, a JavaScript library that provides utility functions for common programming tasks. upperCase converts the first character of a string to upper case camelCase converts a string to camel case (camelCase isWritten likeThis) npm i --save lodash Lodash 의 upperFirst, camelCase functions 이 BaseInput.vue and base-input.vue , or baseInput.vue 로 만든 .. Vue 3 Forms - Base Select Form 에서 select element을 이용하여 option 을 선택하는 것을 재사용이 가능한 component 로 변경 하고자 한다. SimpleForm.vue 의 select element 를 별도의 file을 이용하여 componemt 화 한다. SimpleForm.vue Select a category {{ option }} Design Concept 별도의 file 을 이용하여 아래와 같이 재사용이 가능한 component 를 설계한다. BaseSelect.vue {{ label }} {{ option }} parent 에서 contents의 detail 을 변경하거나 제공할 수 있어야 한다. → label prop 를 추가한다 Making it v-model ready BaseSelect .. Vue 3 Forms - Base Input Creating reusable components for each specific input type will allow us to easily replicate them, modify them and also extend them. 각 입력 유형에 대해 재사용 가능한 구성 요소를 만드는 것은 우리로 하여금 이를 쉽게 복제하고 수정하고 확장하게 할 수 있다. Base Input SimpleForm.vue 에서 BaseInput.vue in our components folder 로 이전하는 과정을 통하여 reusable component 를 만든다. SimpleForm.vue Create an event Name & describe your event Title Description Submit Des.. 이전 1 ··· 4 5 6 7 8 다음