Web

컴포넌트 (8)

네임드 뷰

  • Note&pen
  • Vue.js
  • 2018. 4. 9. 10:41

네임드 뷰(Named View)는 특정 페이지로 이동 했을 때여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.이전 포스티에서 알아보았던 네스티드 라우터는 아래의이미지처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형태이다. 하지만 네임드 뷰는 아래 이미지처럼 같은 레벨에서여러 개의 컴포넌트를 한 번에 표시한다. 이제 간단하게 네임드 뷰 구조를 소스로 확인하자 먼저 9~13line에서는 태그 안에 를 3개 추가하고name속성을 추가한다. 여기서 name 속성은 아래 components 속성에정의하는 컴포넌트와 매칭하기 위한 속성이다. Header컴포넌트는 headerFooter컴포넌트는 footer를 각각 name속성에 값으로 설정한다.다음 name속성이 없는 두 번째 는 default로 표시될 컴포넌..

더 읽기

네스티드 라우터

  • Note&pen
  • Vue.js
  • 2018. 4. 5. 14:29

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼수 있다.네스티드 라우터는 상위컴포넌트 1개에하위 컴포넌트 1개를 포함하는 구조를 갖는다.네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의하위 컴포넌트가 다르게 표시 된다. 먼저 간단하게 네스티드 라우터를 구현하는 소스를 보자. 먼저 10line은 User 컴포넌트가 뿌려질 영역이다.다음 15~24line에서 User, UserPost, UserProfile 컴포넌트의내용을 각 객체에 정의한다. 컴포넌트가 전환된 것을 알수 있게template속성을 컴포넌트 내용에 추가했다. 여기서 봐야할 부분은User컴포넌트의 template에 하위 컴포넌트를 표시할 가하나 더 있다는 부분이다.26~38line routes에 라우..

더 읽기

이벤트 버스(관계없는 컴포넌트 간 통신)

  • Note&pen
  • Vue.js
  • 2018. 4. 3. 21:42

이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에데이터를 주고받을 수 있는 방법이다.이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위구조를 유지해야 데이터를 주고받을 수 있었다.이벤트 버스를 사용하면 이런 상위-하위 관계를유지하고 있지 않아도 데이터를 한 컴포넌트에서다른 컴포넌트로 전달할 수 있다. 먼저 아래 그림을 보자. 최하위에 있는 하위컴포넌트B에서 상위 컴포넌트A로데이터를 전달하려면 Vue에서 제시하는 기본적인컴포넌트 통신 방식을 생각해야한다.하위컴포넌트B 상위컴포넌트B 최상위컴포넌트를 거쳐서상위 컴포넌트A까지 가야한다. 하지만 웹이 커져컴포넌트가 많아지면 이런식의 데이터 전달 방식은 번거롭다.이럴 경우 이벤트버스를 사용하면 중간 컴포넌트들을 거치지 않고하위컴포넌트B 에서 바로 상위 컴포넌트A로..

더 읽기

하위에서 상위 컴포넌트로 이벤트 전달하기

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 16:02

이전 포스팅에서 props에대해 알아보았다.props는 상위에서 하위 컴포넌트로 데이터를 전달 하는 방식이다. 이번엔 그 반대로 하위컴포넌트에서 상위 컴포넌트로의 통신에대해알아보자. 먼저 하위에서 상위로 통신을 하기위해선이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 방법이 있다.상위 컴포넌트에서 하위컴포넌트의 특정 이벤트가 발생하기를 기다리다가하위 컴포넌트에서 특정 이벤트가 발생되면 상위 컴포넌트에서해당 이벤트를 수신해서 상위 컴포넌트의 메소드를 호출하면 된다. 먼저 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용한다.각각의 형식은 아래와 같다. $emit()을 사용하게되면 괄호 안의 이벤트가 발생된다.(보통 $emit()을 호출하는 위치는 하위컴포넌트의 특정 메소드 내부)따라서 $emit..

더 읽기

뷰 컴포넌트간 통신(props)

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 15:42

앵귤러1이나 백본과 같은 초창기 자바스크립트프레임워크에서는 한 화면을 한 개의 뷰로 정의했다.그래서 한 화면의 데이터를 해당 화면 영역 어디서든지호출할 수 있었다. 하지만 뷰의 경우 컴포넌트로 화면을구성해서 같은 웹 페이지라도 데이터를 공유할수 없었다.왜냐하면 컴포넌트마다 자체적으로 고유한 유효범위(scope)를갖기 때문이였다. 이는 뷰 프레임워크 내부에서 정의된 특징이다.따라서 각 컴포넌트의 유혀범위가 독립적이라 다른 컴포넌트의값을 직접 참조할수가 없다. 먼저 간단하게 예제를 보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 Vue Component Scope // 첫 번째 컴포넌트 var cmp1 = ..

더 읽기

뷰 컴포넌트

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 15:03

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는블록(화면의 특정 영역)을 의미한다. 컴포넌트를 활용하면화면을 빠르게 구조화해서 일괄적인 패턴으로 개발을 할수있다.이렇게 화면의 영역을 컴포넌트로 쪼개서 활용할수 있는 형태로관리하면 나중에 코드를 다시 사용하기가 편하다. 또한 다른 사람들이정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로남이 작성한 코드를 직관적으로 이해할 수 있다. 먼저 간단하게 컴포넌트를 사용해보자컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있다.지역컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고전역컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.전역변수와 지역변수를 생각하면 이해가 쉬울것이다. 먼저 전역컴포넌트를 사용해보자.전역컴포넌트는 뷰 라이브러리는 로..

더 읽기

JSP Servlet 기초(20) url-pattern

  • Note&pen
  • JSP
  • 2018. 2. 3. 16:21

url-pattern 이란? 우리는 어떤 서블릿을 만들고서블릿 맵핑을 시킨다 서블릿을 사용하면 주소에 경로가 뜨게된다이것은 보안에 굉장히 좋지않다.그래서 특정한 단어로 맵핑을 한다. url-pattern 에는 크게 2가지가 있다디렉토리 패턴, 확장자 패턴,보통 지금까지 우리가 사용했던것처럼어노테이션을 주로 많이 사용한다. 디렉토리 패턴은 디렉토리형태로 서버의 해당 컴포넌트를 찾아서실행하는 구조이다. 확장자 패턴은 확장자형태로 서버의 해당 컴포넌트를 찾아서실행하는 구조이다 디렉토리 패턴은 이전 포스팅에서계속 사용했으므로 따로정리하지 않겠습니다. 확장자 패턴의 사용법은예를 들어 jsp 파일에서 form태그의 값을 넘길때 action값으로 위와 같이 .do 로 데이터를 보냅니다다음 서블릿에서는 위처럼 *.do..

더 읽기

JSP Servlet 기초(19) 포워딩(Forwarding)

  • Note&pen
  • JSP
  • 2018. 2. 2. 16:03

이번엔 포워딩에 대하여 알아보겠습니다. 내가 어떠한 요청을 받았을때그것을 내가 직접 처리하지않고다른쪽으로 위임할때 포워딩 이라고한다 포워딩은 우리가 JSP 서블릿에서2가지 클래스를 이용한다RequestDispatcher 클래스와HttpServletResponse 클래스를 이용한다 먼저 RequestDispatcher 클래스에대해 알아보자이 클래스는 요청 받은 요청객체(request)를 위임하는컴포넌트에 동일하게 전달 할 수 있다. 직접 테스트를 해보겠습니다먼저 request.java 이름의 서블릿과dispacher.jsp 파일 만들어줍니다 1234567891011121314151617181920212223242526272829303132333435363738package com.jsp.ex; import..

더 읽기

Copyright © Web All Rights Reserved

Designed by JB FACTORY

티스토리툴바