본문 바로가기

기술39

뷰 컴포넌트 통신 뷰 컴포넌트 통신 뷰는 컴포넌트, 블록 단위로 화면을 구성하고, 컴포넌트 마다 고유한 유효 범위를 갖기 때문에, 동일한 웹 페이지 상이더라도 데이터를 공유할 수 없다. 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따른다. 가장 기본적인 데이터 전달 방법은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다. 가족 관계로 보면 1촌간은 전달이 가능하고, 2촌 이상은 직접 전달이 안된다. 2촌 이상 직접 전달을 하기 위해서는 이벤트 버스를 이용한다. 이벤트 버스가 많아지면 관리가 필요한데 이 때 사용하는 상태관리도구로 뷰엑스 Vuex 가 있다. 상위 컴포넌트에서 하위로의 전달은 props.. 2020. 12. 18.
뷰 컴포넌트 뷰 컴포넌트 컴포넌트는 조합해서 화면을 구성할 수 있는 블록을 말한다. 뷰에서는 웹 화면을 구성할 때 일반적으로 사용하는 내비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 전역 컴포넌트와 지역 컴포넌트가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 Vue.component('컴포넌트 이름', { // 컴포넌트 내용}); 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 말한다. 컴포넌트 내용에는 컴포넌트 태그가 실제 화면 HTML 요소로 변환될 때 표시될 속성들을 작성한다. 여기에는 template, data, methods 등.. 2020. 12. 17.
뷰 인스턴스 구조적으로 UI를 설계하기 위해서는 컴포넌트가 필요하고, 화면을 그리기 위해서는 인스턴스가 필요하다. 뷰 인스턴스는 필수적으로 생성해야 하는 기본 단위이다. 인스턴스가 있어야 화면에 표시된다. 뷰 인스턴스 생성 new Vue({ ... }); {{ message }} 뷰 인스턴스 생성자 new Vue() 에서 Vue 를 생성자라고 한다. 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 이 생성자에는 필요한 기능을 미리 정의해 놓고 사용자가 기능을 재정의하여 편리하게 사용하게 한다. 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장하고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법 일반적인 객체 지향 프로그래밍에서 사용하는 객체 정.. 2020. 12. 16.
개발 환경 설정 뷰로 웹 앱을 개발하기 위한 환경 설정 필요한 도구1. 크롬 브라우저2. 아톰 Atom 또는 비쥬얼스튜디오코드 VS Code 와 같은 텍스트 에디터3. 노드제이에스 Node.js4. 뷰 개발자 도구 (Vue.js devtools, 크롬 확장 플로그인) Atom 으로 vue.js 개발시 설치할 패키지1. language-vue - hedefalk - 설치 후 확인 방법 : main.vue 파일 생성 후 temp 치고 텝하면 기본 코드 자동 입력 - Atom 다운로드 : https://atom.io/ VS Code 로 vue.js 개발시 유용한 plugin 1. Vetur - Pine Wu : vue.js 코드 문법강조, 자동완성, 디버깅, Lint 등 지원2. Vue 2 Snippets - Hoolowtr.. 2020. 12. 15.
Nest.js - Javascript Framework 네스트 자바스크립트 프레임웍 Nest는 확장 가능하고 안정적이며 효율적인 Node.js 서버측 애플리케이션을 구축하기 위한 JavaScript 프레임워크 이다. 카밀 미슬위크가 제작해 2017년에 출시했다. Nest.js는 TypeScript와 JavaScript 상단에 구축되어 있으며 Angular로부터 많은 영감을 받았다. 또한 모듈/구성 요소 시스템을 따르고 재사용을 촉진한다. 가드, 파이프, 요격기 등의 개념을 기반으로 하며 WebSockets와 gRPC에 대한 내장 지원이 제공된다. 좀 더 깊이 들어가 보면, Nest.js는 Express를 사용하며 많은 인기 있는 도서관들과 완벽하게 호환된다. | 대부분의 추상화에 주로 클래스, 장식가, 메타데이터 반성을 사용한다. 관련링크 Nest.js : https://nestjs.c.. 2019. 10. 13.
Gatsby.js - Javascript Framework Gatsby.js 는 2019년 또 다른 훌륭한 자바스크립트 프레임워크다. 이 프레임워크는 React.js 기반으로 만들어졌다. 카일 매튜스가 2015년에 처음 나왔지만, 2017년에 직장을 그만두고 자신의 사이드 프로젝트인 Gatsby.js and Typography.js에 풀타임으로 집중하기 시작했고, 그 해에 첫 버전이 나왔다. 블로그, 전자상거래 웹사이트, 대시보드 등을 포함한 동적 및 정적 웹 사이트/웹 앱을 만드는 데 사용할 수 있다. 데이터베이스 소스와 관련하여, Gatsby는 Markdown 파일, Contentful 또는 WordPress와 같은 CMS 또는 REST 또는 GraphQL API를 지원한다. 또한 Gatsby.js는 코드 분할, 이미지 최적화, 게으른 로딩, 리소스 프리페치.. 2019. 10. 13.
Next.js - Javscript Framework 2019 next.js는 React 응용프로그램의 서버측 렌더링을 더 쉽게 해주는 작은 JavaScript 프레임워크다. ZEIT가 만들어 2016년 오픈소싱했다. next.js는 React, Webpack 및 Babel을 사용하여 구축된다. 이 자바스크립트 프레임워크는 개발자들이 클라이언트측과 서버측 모두에서 동일한 렌더링 로직을 사용할 수 있도록 이등변형 리액트 애플리케이션을 작성할 수 있도록 하는 것을 목표로 한다. next.js는 HMR의 지원을 받는 단순한 클라이언트측 라우팅, 자동 코드 분할, Webpack 기반 개발 환경 등의 기능을 제공한다. 정적 및 온디맨드 내보내기라는 두 가지 서버측 렌더링 모드를 지원한다. 정적 내보내기는 모든 페이지를 .html 파일로 렌더링하고 모든 파일 서버를 사용하여 .. 2019. 10. 13.
Redactor - jQuery HTML5 WYSIWYG Plugin Redactor는 빠르고, 강력하며, 우수한 지원 팀을 가진 확장 가능한 편집기다. 지난 7년간 존재했고 현재에도 활발하게 개발 중이다. 아마존 S3에 이미지를 자동으로 업로드한다. 주요기능 75 KB minified Inline text editing CodeMirror support Drag and drop functionality for images Since the editor is plugin-based, it can be easily extended. 가격 관련링크 Redactor : https://imperavi.com/redactor/ Redactor WYSIWYG html editor Fantastic wysiwyg editor provides smooth and clean design,.. 2019. 10. 12.
Trumbowyg - jQuery HTML5 WYSIWYG Plugin Trumbowyg는 HTML 편집기들 중 가장 가벼운 플러그 또는 그런 플러그인 중 하나다. 기존의 모든 WYSIWYG 편집기들은 45KB보다 크지만, TRumbowyg는 16KB에 불과하다. jQuery 버전 1.7 이상에서 동작한다. 주요기능 Only 16 KB 30+ Localisations 가격 MIT License 관련링크 Trumbowyg : https://alex-d.github.io/Trumbowyg/ Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode Lorem ipsum dolor sit amet, consectetur adipiscing elit, some text bold sed do eiusmod tempor.. 2019. 10. 12.

티스토리툴바