728x90
반응형
- [개발자의품격][부트캠프][1기][20차시] Vue.js #7 | 재사용 컴퍼넌트에 checkbox, radio button, custom event 적용 등2022-03-10 00:23:07checkbox, radio button 적용 19차시 #6에서 작성한 코드에 checkbox(또는 radio button)를 추가하였다. 아래의 코드는 자식 component의 checkbox에 체크된 정보를 부모 component에서는 알지 못하는 상태이다. 부모 component에서 체크된 내용을 알 수 있어야 삭제, 수정 등의 기능을 적용할 수 있다. 부모 component 조회 자식 component {{ th.title }} {{ item[th.key] }} custom event 적용 부모 component 부모 component인 listView.vue의 simple-grid에 커스텀 이벤트 @change-item를 작성한다. 이 이벤트는 changeCheckedValue 함수를 호출하도록..
- [개발자의품격][부트캠프][1기][19차시] Vue.js #6 | 재사용 컴퍼넌트에 부트스트랩 적용2022-03-07 22:59:51부트스트랩 설치 터미널에서 프로젝트 폴더로 이동후 2, 3번 설치 npm install bootstrap npm install @popperjs/core main.js 파일에 5, 6번 import import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.js' ※ 외부 라이브러리는 main.js에 import 해야 사용할 수 있다. 부모 component 조회 자식 component {{ th.title }} {{ item[th.key] }} 프로젝트를 거듭 진행하면서 component가 자산으로 축적된다. component를 많이 가지고 있으면 신규 프로젝트 시 개발 생산성을 극대화할 수 있다.
- [개발자의품격][부트캠프][1기][19차시] Vue.js #5 | 재사용 콤퍼넌트2022-03-07 18:30:58views 폴더는 화면 전체를 담당하는 component를 모아둔다. components 폴더는 화면의 일부분을 담당하는 component를 모아둔다. 하나의 component에서 다른 component를 불러와 사용할 수 있는 구조가 되는 것이다. components 폴더의 component가 views 폴더의 component와 다른 점 router에 등록하지 않는다. 파일명에 "View"를 붙이지 않는다. 실무에서 재사용 컴포넌트는 표준화된 스타일이나 버튼 등을 사용하거나, 또는 변경을 일괄 적용하기 위해 사용한다. 일반적으로 재사용 컴포넌트는 리드 개발자가 작성한다. 부모 component 자식 component {{ title }} ({{ title2 }}) {{ list }}
- [개발자의품격][부트캠프][1기][19차시] Vue.js #4 | extra2022-03-07 16:11:10extra v-if HTML DOM 요소를 보이기/숨기기 위해 실무에서는 v-if 문법을 주로 사용한다. 사용자의 권한에 따라 부여하는 기능을 달리할 때 사용할 수 있다. if 문은 순차적으로 비교하므로 "일반 사용자 > 매니저 > 관리자" 순으로 사용자가 많으므로 이를 감안하여 순서를 설계하는 것이 유리하다. 조회 생성 조회 생성 조회 삭제 v-show v-if는 [그림 2]와 같이 HTML DOM 요소를 생성/삭제한다. DOM 트리를 리페인팅하기 때문에 리소스를 많이 사용한다. 반면 v-show는 [그림 3]과 같이 style에서 보이기/감추기 처리를 한다. 개발자는 사용자의 UX를 항상 고려해야 한다. 이러한 태도는 코드를 개선하는 것보다 더 중요하다. 인공지능 블록체인 사물인터넷 기타 comput..
- [개발자의품격][부트캠프][1기][19차시] Vue.js #3 | event2022-03-07 08:43:19event click Add 1 {{ counter }} change change 이벤트를 가장 많이 사용하는 경우는 selectbox에서 이다. 서울 부산 제주 {{ dong.title }} ※ 데이터 건수가 많지 않을 때는 한 번에 다 가져오는 것이 유리하다. 따라서 실무에서는 change 이벤트 대신 filter 함수를 이용한다. {{ city.cityTitle }} {{ dong.dongTitle }} key 조회
- [개발자의품격][부트캠프][1기][18차시] Vue.js #2 | 데이터바인딩2022-03-05 18:14:27데이터 바인딩 문자열 문자열 바인딩은 단방향 데이터 바인딩이다. // src/views/DataBindingHtmlView.vue {{ htmlString }} // {{}}는 문자열을 바인딩한다. // v-html 디렉티브(Directive)를 사용하면 태그로 바인딩한다. input v-model을 이용하여 사용자의 입력 값, 자바스크립트 함숫값의 양방향 데이터 바인딩이 가능하다. Vue의 막강한 기능이다. 클릭 변경 input 태그에서의 v-model은 value 속성과 양방향으로 연결되어 있다. [그림 3]은 아래 코드의 실행 결과이다. 아래 코드에서 v-model.trim과 text, number 타입의 용법을 유의해서 보자! 클릭 변경 + = {{ num1 + num2 }} + = {{ num3..
- [개발자의품격][부트캠프][1기][17차시] Vue.js #1 | 설치, 스니핏 설정, 프로젝트 생성, 구조, 라우터2022-03-05 15:30:19Vus.js 설치 및 프로젝트 생성 1. Vue.js 설치: https://cli.vuejs.org/guide/installation.html 2. 터미널에 프로젝트 생성 명령 입력 vue create project 3. Manually 선택 Vue CLI v5.0.1 ? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) // 현재 유용한 패키지들이 Vue 2를 지원하고 있어 현업에서 주로 사용 중 > Manually select features // 커스텀 생성 4. Babel 등 선택(스페이스바로 선택) Vue CLI v5.0.1 ? Please pick a prese..
- [개발자의품격][부트캠프][1기][16차시] 부트스트랩 #4 | 모달2022-03-02 17:30:28부트스트랩 #4 https://getbootstrap.com/ 1. Static backdrop 모달 가져오기 1.1 Static backdrop 적용 https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop Modal title ... Close Understood 1.2 Modal - Passing options https://getbootstrap.com/docs/5.1/components/modal/#passing-options 모달을 띄우거나 숨긴다. var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false }) 1.3 id="cus..
728x90
반응형