본문 바로가기

전체 글61

04-2. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 HTTP통신 1. 웹 앱의 HTTP 통신 방법 * HTTP (HyperText Transfer Protocol) : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 . * 프로토콜 (Protocol) : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙. 웹 앱 HTTP 통신 : 웹 앱에서 데이터를 요청함. 대표적으로 jQuery의 ajax (서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법)이 있다. 뷰에서 ajax를 지원하기 위한 라이브러리 1-1. 뷰 리소스 1-2. 엑시오스(axios) 1-1. 뷰 리소스로 데이터 받아오기 뷰 라이브러리 불러오기 1-2. 엑시오스(axios) 가장 많이 사용되는 http 통신 라이브러리. * a.. 2019. 9. 24.
04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터 01. 뷰 라우터 02. 뷰 HTTP통신 01. 뷰 라우터 1. 라우팅 라우팅 : 웹 페이지 간의 이동 방법 라우팅의 장점 화면 간 전환이 매끄럽다 빠른 조작으로 어플리케이션의 사용자 경험을 향상시킬 수 있다 2. 뷰 라우터 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 라우터의 기능 : 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. 페이지 이동 태그 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동합니다. 페이지 표시 태그 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. 뷰 라우터를 이용한 페이지 이동 예제 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 + ) 라우터 URL의 해시 값(#)을 없애는 방법 var rout.. 2019. 9. 6.
[디자인꿀팁] 빠른 UI 작업을 위한 테마 제공 사이트 material.io https://material.io/ Homepage Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io UI에 컬러를 미리 입혀보고 코드까지 다운받을 수 있다. https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=5aa4de&secondary.color=FFC107&primary.text.color=000000 Color Tool - .. 2019. 8. 30.
[디자인 스터디] 노동력을 최대한 줄일 수 있는 스케치 심볼 심볼 툴을 이용하면 다른 페이지에 있는 버튼이나 라인등을 한꺼번에 변경 할 수 있기 때문에 반복 노동 작업을 피할 수 있다. 01. 반복 레이아웃 심볼 등록하기 중복되는 레이아웃 작업을 할 때 작업 처음부터 심볼 등록을 해놓으면 작업 후반부에 전체적으로 변경이 필요한 작업이 생겨도 심볼 하나만 변경하면 공통적으로 적용된 심볼 전체 변경이 가능하다. 시간이 금인 디자이너에게 최적의 툴. 02. 이해를 돕는 강의 https://www.youtube.com/watch?v=yT7LcF5M01A 심볼 툴을 이해하기 좋은 강의:) 03. 심볼 사용 메뉴얼 https://p-j-m.github.io/symbol.html [번역] 스케치 사용자 매뉴얼 - 심볼 심볼 심볼은 아트보드, 페이지와 여러 문서에서 쉽게 요소를.. 2019. 8. 27.
03. Vue.js 개발 필수단위 - 인스턴스&컴포넌트 뷰 인스턴스 01. 뷰 인스턴스의 정의와 속성 02. 뷰 인스턴스 옵션 속성 03. 뷰 인스턴스의 우효 범위 04. 뷰 인스턴스 라이프 사이클 01. 뷰 인스턴스의 정의와 속성 * 뷰 인스턴스 : 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }); * 뷰 인스턴스 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더 불어 기존 기능을 쉽게 확장하여 사용하는 기법이다. (Vue) 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해 사용한다. 02. 뷰 인스턴스 옵션 속성 * 뷰 인스턴스 속성 : 뷰 인스턴스.. 2019. 8. 26.
02. Vue.js 필수 플러그인 - github https://joshuajangblog.wordpress.com/tag/아톰-필수-플러그인/ 아톰 필수 플러그인 – Captain Pangyo joshuajangblog.wordpress.com 사용하기 좋은 아톰 플러그인 모음 블로그 2019. 8. 25.
01. Vue.js 소개 웹 개발을 위한 간단한 뷰 개념 정리 Vue.js란? Vue.js란? "웹 페이지 화면을 개발하기 위한 프런트엔드(프로세스 단계)의 프레임워크(뼈대)" *프런트엔드 : 프로세스의 처음과 마지막 단계 *프레임워크 : 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술 뷰의 장점 배우기가 쉽다 성능이 우수하고 빠르다 리액트의 가상돔(virtual DOM)기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다. Vue.js의 특징 UI 화면단 라이브러리 뷰(Vue.js)는 UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다. *MVVM : 화면을 Model - View - ViewModel 로 구조화하여 개발하는 방식 *뷰 :.. 2019. 8. 22.
반응형