본문 바로가기

💻WEB FrontEnd

(66)

Vue Router 을 기본으로 배운 내용입니다. 참고하면 좋을 사이트 router.vuejs.org/kr/installation.html router.vuejs.org/kr/api/#router-link 1. Routing 라우팅이란 웹 페이지 간의 이동 방법을 말한다. 라우팅을 이용하면 화면 간의 전환이 매끄럽게 처리할 수 있다. 프론트엔드 프레임워크(뷰, 리액트, 앵글러) 모두 라우팅을 이용하여 화면을 전환하고 있다. 프론트엔드 프레임워크를 사용하지 않고, 일반 HTML파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다. 2. Vue Router 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. 태그 설명 페이지 이동 태그 화면에서는 로 표시된다. 페이..

Vue Componets 통신 을 기본으로 배운 내용입니다. 목차 1. 상·하위 컴포넌트 간 통신 2. 같은 레벨의 컴포넌트 간 통신 3. 관계 없는 컴포넌트 간 통신 한 화면에 있더라도 각 컴포넌트의 유효범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 1. 상·하위 컴포넌트 간 통신 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 자식 컴포넌트가 되고, 자식 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 1) 상위에서 하위 컴포넌트로 데이터 전달(Pass Props) 하위 컴포넌트의 속성에 props속성을 정의하고, Vue.component('child-component', { props: ['props속성이름'] }); 상위 컴포넌트의 HTML코드에 등록된 child-componen..

Vue Componets 을 기본으로 배운 내용입니다. 목차 1) Vue Componets 2) 컴포넌트 등록 Vue Componets 1) Vue Componets 화면의 요소들(내비게이션 바, 테이블, 리스트, input 박스 등)을 잘게 쪼개어 컴포넌트로 관리한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 컴포넌트 간의 관계(tree형태)는 뷰에서 화면을 구성하는데 매우 중요한 역할을 하며, 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계를 해야 한다. 2) 컴포넌트 등록 컴포넌트 이름은 template속성에서 사용할 HTML 사용자 정의 태그 이름을 작성한다. 컴포넌트 내용에는 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성하고, 인스턴스..

Vue Instance 을 기본으로 배운 내용입니다. 목차 1) Vue Instance 2) Vue Instance 생성자 3) Vue Instance 옵션 설정 4) Vue Instance 라이프 사이클 5) Vue Instance 라이프 사이클 초기화 1. Vue Instance 1) Vue Instance Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 기본 필수 단위 new Vue({ ... }); 2) Vue Instance 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. Vue로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용할 수 있다. 3) Vue Instance 옵션 ..

Vue 시작하기 (+개발 환경 설정) 을 기본으로 배운 내용입니다. 목차 1. 개발 환경 설정 2. Vue 시작하기 3. 개발자 도구로 코드 확인 1. 개발 환경 설정 뷰로 웹 앱을 개발하기 위한 환경을 구성하기 위해 다음과 같은 도구들을 설치 [더 많은 패키지 추가 https://ict-nroo.tistory.com/84] 크롬 브라우저 Vue CLI 설치 Node.js 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인) ※ Vue CLI 사용 방법을 잘 정리해놓은 블로그를 찾았다. - kdydesign.github.io/2019/04/22/vue-cli3-tutorial/ 2. Vue 시작하기 1) 코드 작성 index.html : 뷰라이브러리를 로딩시켜 메세지를 출력시키는 코드 작성 {{ message }} 크롬 브라우..

Vue.js란? 을 기본으로 배운 내용입니다. 1. Vue.js란 무엇인가? UI단에서 데이터(모델)을 관리하고 이를 처리하기 위한 프론트엔드 프레임워크 (화면을 이쁘게 만드는 프레임워크는 아님!!) 1) FrontEnd Framework의 종류 - React 탄탄한 아키텍쳐 ES6 필수 컨버팅 하는데 리소스를 많이 먹음. 페이스북 - Angular Typescript 사용 구글 - Vue.js Page수준의 라이브러리 참조(script 태그)가 가능. 가벼움. React와 Angular의 장점을 차용해서 만듦. 알리바바 2) Vue의 장점 Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용 다른 프런트엔드 프레임워크(..

이전 1 ··· 4 5 6 7 다음

티스토리툴바