meteor korea dev school 5th router

1. Meteor Korea DEV School 5th
day
Router (iron-router)

2. - 박승현
- ppillip@gmail.com
- http://digveloper.ppillip.com
발표자 소개

3. Router (iron:router)
목표
- Url 별로 응답하는 화면을 만들어 보자. (사용자목록,사용자등록)
- 서버 라우터에 대하여 알아보고 1분만에 rest 서버 만들기

4. Router (iron:router) - client
1. router 추가 하기
2. template 수정 하기
3. router.js 추가

5. Router – 1. router 추가 하기
1. 지금까지 만든 화면

6. Router – 1. router 추가 하기
2. router 추가 하기
meteor add iron:router

7. Router – 1. router 추가 하기
2. router 추가 하기 – meteor add iron:router
관련 패키지 자동설치

8. Router – 1. router 추가 하기
3. 성공 메세지 보임 (그런데 필요 없음)

9. Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기

10. Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기

11. Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
이건 우리가 선언한 템플릿
userList : 목록
userInput : 입력

12. Router – 2. template 수정하기
1. {{>Router}} 사용하여 수정 하기
Iron-router 가 Router라는 템플릿에
사용자 템플릿(userList,userInput 등)을
동적으로 추가함.
우리는 url마다 어떤 템플릿,어떤 데이터를
사용할 것 인지 결정하여 설계하고
그리고 나서 선언하면 됨.

13. Router – 3. router.js 수정하기
0. _router.js 화일 생성 : 템플릿 연결 코드 작성 하기

14. Router – 3. router.js 수정하기
1. url 선언 : Router.route 에 url 을 설정 한다. - userList
url을 선언한다.
“http://localhost:3000/userList”
{{>Router}} 에 보일 template 명을
“userList”로 인식함

15. Router – 3. router.js 수정하기
2. template 선언
{{>Router}} 에 보일 template 명을
명시적으로 선언.
Url 패턴과 템플릿 명이
항상 같지 않으므로..
template 옵션은 꼭 명시 할것.

16. Router – 3. router.js 수정하기
3. waitOn 작성
1. waitOn 에서 subscribe 구문을 작성 함.
2. 배열 안의 subscribe들 이 모두 완료 될 때 까지 라우팅을
대기함.
3. 여러 개의 subscribe 를 작성 할 수 있음

17. Router – 3. router.js 수정하기
4. data 옵션 작성
기존 helper 에서 list 반환 구문을 삭제하고
Router.router 의 data 옵션에 같은 이름으로 위와 같이 작성한다.

18. Router – 3. router.js 수정하기
이제 다시 돌아 왔다!?
자세히 봅시다.

19. Router – 3. router.js 수정하기
4. data 옵션 작성
Router data 의 key 값들은 template 에서 알 수 있다.

20. Router – 3. router.js 수정하기
4. data 옵션 작성후 helper 에서 접근 해보기

21. Router (iron:router) - client
1. userInput 도 퀵하게 해보기
2. page 간 이동 구현 해보기

22. Router – 1. userInput 도 퀵하게 해보기
1. 일단 userList에 등록(userInput) 버튼 만들기
http://localhost:3000/userInput 으로 가는 링크를 만든다.

23. Router – 1. userInput 도 퀵하게 해보기
2. url 선언 : Router.route 에 url 을 설정 한다. - userInput
Before After
입력 화면이라 초간단!!
라우터만 추가!!

24. Router (iron:router) - client
1. userInput 도 퀵하게 해보기
2. page 간 이동 구현 해보기
- 강제 이동
- 링크로 이동

25. Router – 2. page간 이동 구현 해보기
1. 강제이동(리디렉션) - Router.go('/userList')
Before
After
userInput events에
insert 콜백 함수를 구현
입력이 완료 되면
Router.go('/userList')
코드로 리디렉션 한다.

26. Router – 2. page간 이동 구현 해보기
2. 링크로 이동 - 취소 버튼 만들어서 List 로 돌려 보내기
화면 타이틀도 만들고
Before
After
링크 버튼도 만들고

27. Router
Router
Server
데이터 주입
(data 옵션)
강제 이동
(Router.go)
링크 이동
(href 가로채기)
Router
Router가 하는 일(결론)
Subscribe 설정

28. Router (iron:router) - Server
5 분만에 rest 서버 구현하기

29. 설치
>meteor create myRestServer
>cd myRestServer
>meteor add iron:router
>meteor run
Router – 1. 사용자 목록을 리턴하는 rest 서버 구현

30. Router – 1. 사용자 목록을 리턴하는 rest 서버 구현

31. Router – 1. 사용자 목록을 리턴하는 rest 서버 구현

32. - 질 문
- 실 습