보안 전공생의 공부

하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어짐. 부품에 문제가 발생하면, 해당 부품만 바꿔도 제품이 문제없이 작동함. 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..

◆ 디렉티브(directive) : html 엘리먼트의 특별한 속성 형태 v- 접두사 형태로 사용 ! ​ ◆ v-if ​ 형태는ⅰ) v-if ⅱ) v-if … v-else-if … v-else ⅲ) v-if … v-else 과 같다. ​ button을 클릭함에 따라, 에러 여부가 바뀌는 코드를 작성하였다. >에러처리

출처 book.naver.com/bookdb/book_detail.nhn?bid=15519728 예제로 배우는 Vue.js 자바스크립트 프레임워크인 REACT, ANGULAR, VUE 중 VUE.JS는 가장 인기 있는 프론트엔드 GITHUB 프로젝트가 됐다. 이 책에서는 VUE.JS 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, VUE-ROU book.naver.com 저번에 이어서 프로퍼티에 대해 마저 소개하겠습니다앙 ​ ▷computed 프로퍼티를 이용한 필터링 ​ computed 프로퍼티는 양방향 데이터 바인딩으로, 사용자 입력(UI)와 데이터소스(vue instance) 사이에서 한 쪽 데이터 변화가 생기면 반응하는 형태를 갖는다. ​ 이를 이용해서 목록에서 찾고자 하는 것을 필터..

저번에 vue.js 설치하다 막혔는데 같이 스터디하는 언니가 도와줬어요 ~~!! 그때 책 보면서 package.json 파일의 script 수정해서 npm start 명령어 설정하려다가 실패했었는데, 이 npm start가 나중에 실행할때 편리하게 하려고 책에서 이 명령어를 만들라고 한거여서 꼭 필요한 조건이 아니라고 하더라구요 ! (오류도 잘 뜬대용) 그래서 npm start 명령어는 그냥 패쓰하구 vue.js 설치를 진행하였습니다 1. vue-cli 설치 cmp 창을 열고 npm install -g @vue/cli 을 입력하면, 설치가 진행됩니다. 마지막에 버전을 선택하라고 하는데, 저는 첫번째에 있는 ver 4.5.9를 설치하였습니다! ​ ​ 2. 프로젝트 생성 및 구동 1) 폴더 만들고 mkdir..

출처 book.naver.com/bookdb/book_detail.nhn?bid=15519728 예제로 배우는 Vue.js 자바스크립트 프레임워크인 REACT, ANGULAR, VUE 중 VUE.JS는 가장 인기 있는 프론트엔드 GITHUB 프로젝트가 됐다. 이 책에서는 VUE.JS 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, VUE-ROU book.naver.com 화살표 함수 자바스크립트의 화살표 함수는 =>기호를 사용한다. ​ 일반적인 함수의 형태 4가지에 따라 구분해보면, ​ · function function_name( ){ } ( ) => { } · function function_name( a, b ){ } ( a, b ) => { } · function function_n..

출처 book.naver.com/bookdb/book_detail.nhn?bid=15519728 예제로 배우는 Vue.js 자바스크립트 프레임워크인 REACT, ANGULAR, VUE 중 VUE.JS는 가장 인기 있는 프론트엔드 GITHUB 프로젝트가 됐다. 이 책에서는 VUE.JS 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, VUE-ROU book.naver.com 이 책으로 겨울방학 때까지 뷰를 공부하려고 해요 :) 웹개발 스터디에서 매주 차근차근 공부해 나갈 예정입니다아 포스팅 출처는 책입니당 오늘은 vue.js를 시작하기 위해 node.js. 설치와 npm 명령어를 공부하고 visual studio code를 공부해보았습니다. vue.js란? 사용자 인터페이스(UI) & 단일 페..