전체 글 (142) 썸네일형 리스트형 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.. Useful Key in VSCode !+Tab basic html tag 자동 완성 h1+tab 자동완성 Alt+w htmltagwrap extension 을 깔고 사용가능 html tag 자동 완성 shift+tab 들여쓰기 CTRL+A CTRL+K+F code 정렬 ctrl + shift + alt + arrow 열단위 선택 Ctrl + D 반복되는 단어 한방에 수정 Alt + Click 클릭하는 곳마다 커서 생성 Alt + ↑ / ↓ 코드 위/아래로 움직이기 Alt + ⇧ + ↑ / ↓ 코드 복사해서 위/아래로 움직이기 Ctrl + / 코드 블록 한방에 코멘트 처리하기 Alt + ⇧ + i 선택된 영역에 커서 만들기 Alt + ⇧ + Mouse Drag 마우스가 가는 곳 마다 커서 만들기 Ctrl + Home / End 파일 맨 위-.. Useful commands for Apache2, nginx sudo service apache2 restart sudo service apache2 stop apache2 가 running 하는지 확인 ps aux | grep apache2 sudo service nginx restart sudo service nginx stop sudo service nginx start nginx 가 running 하는지 확인 ps aux | grep nginx 이전 1 ··· 8 9 10 11 12 13 14 ··· 18 다음