Develope/WEB 8

2-2 Vue 컴포넌트

업로드 목록보니 공부하기 귀찮은거 너무 티난다; 열심히 해야겟답^^ 1. Vue의 컴포넌트 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록. 화면을 빠르게 구조화, 캡슐화 가능하여 일괄적인 패턴으로 개발이 가능하게 한다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다. Vue 컴포넌트는 Vue 인스턴스이기도 한다. 그러므로 루트를 제외한 모든 옵션 객체를 사용할 수 있다. 뷰의 컴포넌트 : 내비게이션 바 테이블 리스트 인풋 박스 2. 컴포넌트 등록하기 뷰의 컴포넌트는 전역(Global)과 지역(Local) 두 가지가 있다. 일반적인 변수처럼 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가지고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역..

Develope/WEB 2020.11.03

2-1 Vue 인스턴스

뷰의 인스턴스는 레고를 조립하는 기본 판, 컴포넌트는 레고 블록이라고 할 수 있다. 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스의 기본 형식은 new Vue({..}) 로서 흔히 자바에서 클래스를 선언 할 때와 흡사하다. 이 때 Vue 를 생성자라고 하는데, 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자를 이용해서 뷰로 개발 할 때 필요한 기능들을 생성자에 미리 정의해 개발자가 이를 편리하게 사용할 수 있다. [소스코드 출처 : DoIt Vue.js] 위의 코드는 뷰 인스턴스를 생성하고, el 속성을 통해 해당 뷰 인스턴스를 #app에 바인딩하였다. 나아가 data 속성에 message 값 ‘Hello Vue.js!’ 를 입력하면서, 위의 {{ me..

Develope/WEB 2020.10.08

Vue 프로젝트 구성 (intelliJ)

개발환경 툴 : intelliJ 기본 설치 node.js 설치 https://nodejs.org/en/ node js 설치 확인 eunbi@EB-MacPro  ~  node -v v12.18.4 npm 최신버전 업그레이드 sudo npm install -g npm vue client 설치 sudo install npm install -g @vue/cli 기본 테스트 페이지 만들기 eunbi@EB-MacPro  ~/Desktop/Project/VueProject  sudo npm install -g @vue/cli-init npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN ..

Develope/WEB 2020.10.03

VueJS의 핵심 기능

VueJS 홈페이지 왈) 접근성 HTML, CSS, JaavaScript. 기본 Web 개발을 할 줄 안다면 사용 가능하다 유연성 라이브러리와 모든 기능을 담은 프레임워크의 사이에서 서서히 스케일 업 하여 적용할 수 있습니다. 고성능 20KB min+gzip 컴팩트 런타임. 초고속 Virtual DOM ** 용어사전 View : 사용자에게 보이는 화면 DOM : HTML 문서에 들어가는 요소 등을 담고 있는 데이터 트리 DOM Listener : 돔의 변경에 반응하여 특정 로직을 처리하는 장치 Model : 데이터를 담는 객체. 보통은 서버에서 가져온 데이터를 JS 객체형태로 저장한다. Data Binding을 통해 View에 표시되는 내용과 모델의 데이터를 동기화한다. View Model : 뷰와 모뎅..

Develope/WEB 2020.10.02

JS 프레임워크 비교하기

Vue.js란 뷰는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크로 화면단 라이브러리이자 프레임워크이다. 뷰의 코어 라이브러리는 화면단 데이터 표현에 관한 기능을 중점으로 지원하며, 또한 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 단일 프레임워크와는 달리 Vue는 이를 점진적으로 채택할 수 있도록 설계되었다. 라이브러리 + 프레임워크가 결합된 형태이며, 이를 progressive framework라고 표현한다. 이러한 장점들이 결합되어 최근 SPA(Single Page Application) 용 프론트엔드 프레임워크로 사용되고 있다. ** 개념을 되집기 위한 용어사전 프레임워크 : 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리..

Develope/WEB 2020.09.14

[FullCalendar] 기능정리

FullCalendar의 경우 버전에 따라 함수가 굉장히 다르기 때문에 다루기 좀 까다로웠다. **캘린더 생성 var Calendar = FullCalendar.Calendar; var calendarEl = document.getElementById('calendarWrap'); //캘린더 div //캘린더 속성 var calProps = { plugins : [ 'interaction', 'dayGrid' ] //월 캘린더 , header : { left :'' , center : 'title' , right : ''//'prevYear,prev,next,nextYear' } //, locale : 'ko' // 한국어 설정이다. 하지만 date Cell 포맷팅이 어려우니 그냥 주석으로 , title..

Develope/WEB 2019.07.18

[mod_jk] 개요 및 설치

** mod_jk(Tomcat Connectors)- Tomcat 프로젝트에서 제공하는 웹서버 연동모듈- https://tomcat.apache.org/download-connectors.cgi **mod_jk 기능- Woker 감시 기능(Cping/Cpong)- Connection Pooling- Sticky Session- Retry(Recovery)- Load Balance- worker Status 관리 **설치root 계정으로 로그인 : su - 다운로드 : wget http://www-eu.apache.org/dist/tomcat/tomcat-connectors/jk/tomcat-connectors-1.2.43-src.tar.gz 압축해제 : tar -zxvf tomcat-connectors-..

Develope/WEB 2018.11.27

[Apache http]

** 다운 및 설치- 다운로드 wget http://ftp.neowiz.com/apache/httpd/httpd-2.4.29.tar.bz2 - 압축풀기 tar –zxvf httpd-2.4.29.tar.bz2 - 구성 ./configure –prefix=/app/apache2.4 - 컴파일 make - 설치make install ** 아파치 실행- root 계정으로 로그인 su - - bin 디렉터리로 이동 cd /app/apache2.4/bin - 시작 ./apachectl start - 중지 ./apachectl stop ** 확인http://127.0.0.1 **웹서버 사용 이유1) 정적 파일의 처리- Static Contents에 대한 성능- Apache HTTP Server의 다양한 옵션 및 기능..

Develope/WEB 2018.11.27