보안 전공생의 공부

[[앞 게시물 이어서 materialize의 기능들에 대해 설명하는 글 ! ]] ● Navbar 앞에서 navbar 컴포넌트(웹사이트 탐색에 이용) 보여준 기본 구조이다. "hide-on-med-and-down"이라는 클래스의 속성 -> 태블릿 이하의 화면 크기에서는 보이지 않도록 하라 스마트폰에서 navbar을 이용하려면 >> a 태그의 data-target 속성 이용해 id 속성값을 설정하고, class 속성에 "sidenav-trigger" 설정 [index.html] 수이니의 여행 menu {{link.text}} {{link.text}} 1) index.html파일 - head 태그 : Google Icon Font, materialize.css, fontawesome.com 링크 추가 2) i..

●Button 1) Raised Button - 기본 버튼 - 클릭했을 때 물결 효과 - 버튼색 -> waves-color 형태로 정의해서 사용 button 2) Floating Button - 원형 모양 버튼 add 3) Flat Button - card, modal 내에서 사용하는 버튼 button index.html wireless cloudcloud wifiwifi app.js new Vue({ el:'#app', methods:{ showMessage($event){ ($event.target.children.length == 2) ? alert($event.target.children[0].innerText) : alert($event.target.innerText); } } }) 조건부 3항..

스마트폰, 태블릿, PC 등 다양한 장치의 각각의 화면 크기에 맞춰 적절한 페이지를 보여주기 위해 반응형(responsive)을 구현해야 한다. Materialize는 CSS, 자바스크립트, HTML로 작성된 UI라이브러리다. 이를 이용하면 장치에 따라 특정 콘텐츠는 감추고, 다른 콘텐츠는 보이도록 할 수 있으며 짧은 시간 내 반응형 애플리케이션을 만들 수 있다. ▶Materialize 설치 materializecss.com/getting-started.html Getting Started - Materialize Materialize comes in two different forms. You can select which version you want depending on your preferenc..

◆ 슬롯 : 부모 컴포넌트에서 자녀 컴포넌트에 나타나야 할 콘텐츠 제공 가능 부모 컴포넌트가 자녀 컴포넌트로부터 데이터 전달 받기 가능 (컴포넌트 재사용 ↑) 1) unnamed slot (default slot) - 가장 기본적인 슬롯 - 부모 컴포넌트의 일부 -> 자녀 컴포넌트 inject 가능 부모 컴포넌트의 DOM(Document Object Model) 엘리먼트들 ( e.g. p, div, img ) -> 자녀 컴포넌트에 정의된 태그 위치에 대체 가능함 태그 無 -> 부모 컴포넌트에서 html 엘리먼트를 전달해도 자녀 컴포넌트에 표시 X cmd 창에 vue create unnameslotwithcli --default 입력 -> 프로젝트 생성 해당 폴더 vscode로 실행 App.vue를 위처럼..

(출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499) 하위 컴포넌트 D에서 상위 컴포넌트 A로 통신을 위해 상위 컴포넌트 B -> 최상위 컴포넌트 -> 상위 컴포넌트 A>경로를 이용할 수 있지만, 이는 필요없는 상위 컴포넌트를 필요로 한다. 이러한 점을 보완하기 위한 방법으로 이벤트 버스를 이용한다. var eventBus = new Vue(); Vue 인스턴스를 생성하고, 이를 이용해 컴포넌트 간 통신 매개체로 쓴다. - 데이터를 전달하는 컴포넌트에서 eventBus.$emit 사용 method: { 메소드명: function(){ eventBus.$emit('이벤트명',데이터,...); } } - 데이터를 전달받는 컴포넌트에서 eventBus.$..

하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어짐. 부품에 문제가 발생하면, 해당 부품만 바꿔도 제품이 문제없이 작동함. But 소프트웨어는 독립적으로 개발 X , 독립적으로 개발되었다고 해도 다른 모듈과의 호환을 고려 X 개발됨. → 소프트웨어의 재사용을 어렵게 하고, 유지보수 비용 ↑ 의 원인 ◆ 컴포넌트(component) : 독립적인 단위모듈 → 이후 시스템 유지보수 하는데 있어 교체 가능한 부품임 기본 html 엘리먼트 확장해 재사용 가능한 코드를 캡슐화해줌 · 구현, 명세화, 패키지화, 배포될 수 있음 - source code가 아닌 execute code기반으로 재사용할 수 있도록 이미 구현이 완료됨 - 해당 컴포넌트의 용도, 유형, 인터페이스 등에 대한 정보들에 대해 명세화되어 있..

◆ 이벤트 : 어떤 특정 행동이 발생한 그 자체를 의미 ex) 마우스 클릭, 메뉴 선택, 등 (출처 : coding-factory.tistory.com/262 ) 특정 이벤트 발생 → 이벤트 처리 필요 ! ◆ v-on : vue.js에서 이벤트를 처리할 때 사용하는 디렉터리 이벤트 리스너 ( 이벤트를 실행하기 위한 트리거와 이벤트를 연결해주는 것 ) // 이벤트 발생하면 다른 형식과 같이 메서드 실행 X, 직접 data 프로퍼티에 정의된 값에 접근 가능 //이벤트 발생시 입력된 parameter이용해 발생하는 이벤트 처리 //@ - v-on:의 단축형태로 사용됨 위와 같은 형식으로 이벤트를 처리함 [ 첫번째 형식 - 예제 ] 직접 data 프로퍼티에 정의된 count 값에 접근 {{ count }} 추가..

◆ 디렉티브(directive) : html 엘리먼트의 특별한 속성 형태 v- 접두사 형태로 사용 ! ​ ​ ◆ v-for 다수의 item을 포함하는 집합 형태의 list를 나타낸다. ​ · 형식 (일반) (축약) ​ -items : 데이터 집합 -item : 데이터 집합 內 하나의 데이터 -v-bind : v-for 디렉티브를 이용해 리스트 나타낼 때 사용 key의 속성 설정 → vue가 각 item을 검색하고 정렬할 수 있도록 함 ​ ​ 예제를 작성하기 위해 우선 프로젝트 생성 · 구동을 시킨다. cmd창에 vue create vfor --default 를 입력해 vfor 프로젝트를 생성하였다. ​ 그리고 cd vfor , npm run serve를 입력해 서버를 구동시켰다. ​ ​ ​ 생성된 vfo..