5.router
32
Meteor Korea DEV School 5 th day Router (iron-router)
-
Upload
seung-hyun-park -
Category
Technology
-
view
2.402 -
download
1
Transcript of 5.router
Meteor Korea DEV School 5th day
Router (iron-router)
Router (iron:router)
목표
- Url 별로 응답하는 화면을 만들어 보자. (사용자목록,사용자등록)
- 서버 라우터에 대하여 알아보고 1분만에 rest 서버 만들기
Router (iron:router) - client
1. router 추가 하기
2. template 수정 하기
3. router.js 추가
Router – 1. router 추가 하기
1. 지금까지 만든 화면
Router – 1. router 추가 하기
2. router 추가 하기
meteor add iron:router
Router – 1. router 추가 하기
2. router 추가 하기 – meteor add iron:router
관련 패키지 자동설치
Router – 1. router 추가 하기
3. 성공 메세지 보임 (그런데 필요 없음)
Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
이건 우리가 선언한 템플릿
userList : 목록
userInput : 입력
Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
Iron-router 가 Router라는 템플릿에 사용자 템플릿(userList,userInput 등)을 동적으로 추가함.우리는 url마다 어떤 템플릿,어떤 데이터를사용할 것 인지 결정하여 설계하고그리고 나서 선언하면 됨.
Router – 3. router.js 수정하기
0. _router.js 화일 생성 : 템플릿 연결 코드 작성 하기
Router – 3. router.js 수정하기
1. url 선언 : Router.route 에 url 을 설정 한다. - userList
url을 선언한다. “http://localhost:3000/userList” {{>Router}} 에 보일 template 명을 “userList”로 인식함
Router – 3. router.js 수정하기
2. template 선언
{{>Router}} 에 보일 template 명을 명시적으로 선언.
Url 패턴과 템플릿 명이 항상 같지 않으므로..
template 옵션은 꼭 명시 할것.
Router – 3. router.js 수정하기
3. waitOn 작성
1. waitOn 에서 subscribe 구문을 작성 함. 2. 배열 안의 subscribe들 이 모두 완료 될 때 까지 라우팅을 대기함. 3. 여러 개의 subscribe 를 작성 할 수 있음
Router – 3. router.js 수정하기
4. data 옵션 작성
기존 helper 에서 list 반환 구문을 삭제하고
Router.router 의 data 옵션에 같은 이름으로 위와 같이 작성한다.
Router – 3. router.js 수정하기
이제 다시 돌아 왔다!?자세히 봅시다.
Router – 3. router.js 수정하기
4. data 옵션 작성
Router data 의 key 값들은 template 에서 알 수 있다.
Router – 3. router.js 수정하기
4. data 옵션 작성후 helper 에서 접근 해보기
Router (iron:router) - client
1. userInput 도 퀵하게 해보기
2. page 간 이동 구현 해보기
Router – 1. userInput 도 퀵하게 해보기
1. 일단 userList에 등록(userInput) 버튼 만들기
http://localhost:3000/userInput 으로 가는 링크를 만든다.
Router – 1. userInput 도 퀵하게 해보기
2. url 선언 : Router.route 에 url 을 설정 한다. - userInput
Before After
입력 화면이라 초간단!!
라우터만 추가!!
Router (iron:router) - client1. userInput 도 퀵하게 해보기
2. page 간 이동 구현 해보기
- 강제 이동
- 링크로 이동
Router – 2. page간 이동 구현 해보기
1. 강제이동(리디렉션) - Router.go('/userList')
Before
After
userInput events에 insert 콜백 함수를 구현 입력이 완료 되면 Router.go('/userList') 코드로 리디렉션 한다.
Router – 2. page간 이동 구현 해보기
2. 링크로 이동 - 취소 버튼 만들어서 List 로 돌려 보내기
화면 타이틀도 만들고
Before
After
링크 버튼도 만들고
Router
Router
Server
데이터 주입(data 옵션)
강제 이동(Router.go)
링크 이동(href 가로채기)
Router
Router가 하는 일(결론)
Subscribe 설정
Router (iron:router) - Server
5 분만에 rest 서버 구현하기
설치
>meteor create myRestServer >cd myRestServer >meteor add iron:router >meteor run
Router – 1. 사용자 목록을 리턴하는 rest 서버 구현
Router – 1. 사용자 목록을 리턴하는 rest 서버 구현
Router – 1. 사용자 목록을 리턴하는 rest 서버 구현
- 질 문
- 실 습
