SlideShare a Scribd company logo
1 of 18
Download to read offline
Meteor Korea DEV School 
3rd day 
Collection
발표자 소개 
- 박승현 
- ppillip@gmail.com 
- http://digveloper.ppillip.com
Collection (컬렉션:디비데이터처리하기) 
- 컬렉션 선언 
클라이언트(브라우저) 
서버(데이터 없을때 최초 초기화) 
- 리스트(find) 구현 
- 입력(insert) 구현 
- 삭제(remove) 구현 
- 컬렉션을 합쳐 보기(model)
컬렉션 선언 - 브라우저  
1. 파일생성(client폴더) 2. 컬렉션 선언 
3. 브라우저 콘솔에서 확인
컬렉션 선언 - 서버 , 초기 데이터 넣기  
1. 파일생성(server폴더) 
2. 컬렉션 선언 
3. 초기 데이터 넣기
Collection (컬렉션:디비데이터처리하기) 
- 컬렉션 선언 
클라이언트(브라우저) 
서버(데이터 없을때 최초 초기화) 
- 리스트(find) 구현 
- 입력(insert) 구현 
- 삭제(remove) 구현 
- 컬렉션을 합쳐 보기(model)
리스트에서 find 로 조회 하기 
1. 원본 소스 
2. 디비반영 소스
리스트에서 find 로 조회 하기
Collection (컬렉션:디비데이터처리하기) 
- 컬렉션 선언 
클라이언트(브라우저) 
서버(데이터 없을때 최초 초기화) 
- 리스트(find) 구현 
- 입력(insert) 구현 
- 삭제(remove) 구현 
- 컬렉션을 합쳐 보기(model)
입력 구현 - 템플릿 
1. userInput 템플릿 코딩 하기 
2. 템플릿 추가 하기
입력 구현 - 템플릿
입력 구현 - 헬퍼 
1. userInput 의 events 매니저 생성 
2. events 매니저에 버튼의 click 이벤트 등록
Collection (컬렉션:디비데이터처리하기) 
- 컬렉션 선언 
클라이언트(브라우저) 
서버(데이터 없을때 최초 초기화) 
- 리스트(find) 구현 
- 입력(insert) 구현 
- 삭제(remove) 구현 
- 컬렉션을 합쳐 보기(model)
삭제구현 - userListItem 템플릿 수정 
1. userListItem 템플릿 코딩 하기 
2. 기존버튼 이름추가 , 삭제버튼추가
삭제구현 - userListItem 템플릿 수정
삭제구현 - userListItem events 매니저 수정 
1. name 속성 추가된 ‘버튼 셀렉터’ 수정 
_id ? 
우린 넣은적없는데? 
2. remove 버튼 이벤트 추가 및 삭제 구현
삭제구현 - _id 란 무엇인가? 
1. _id 는 mongoDB 의 unique 키 입니다. 
2. 미티어 소스코드에서 
insert api 에서 따로 지정하지 않으면 
미티어가 자동으로 랜텀 텍스트를 
생성하여 넣습니다. 
3. 삭제시에 _id 로 1개의 doc 만 삭제가 
가능합니다.
질문  
 
실습

More Related Content

What's hot

Unity cookbook 20
Unity cookbook 20Unity cookbook 20
Unity cookbook 20Jihun Soh
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)연웅 조
 
3. pubspec.yaml 사용법
3. pubspec.yaml 사용법3. pubspec.yaml 사용법
3. pubspec.yaml 사용법Jongmini
 
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 [NEXT] Android 개발 경험 프로젝트 3일차 (Database) [NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)YoungSu Son
 
GMS 프로젝트 - Flutter
GMS 프로젝트 - FlutterGMS 프로젝트 - Flutter
GMS 프로젝트 - FlutterJongmini
 
Vue guide예제(vue todo-list)-v0.1
Vue guide예제(vue todo-list)-v0.1Vue guide예제(vue todo-list)-v0.1
Vue guide예제(vue todo-list)-v0.1DataUs
 
예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습은숙 이
 
Laravel 로 배우는 서버사이드 #2
Laravel 로 배우는 서버사이드 #2Laravel 로 배우는 서버사이드 #2
Laravel 로 배우는 서버사이드 #2성일 한
 
Ror 4주차(루비맛보기, form 태그)
Ror 4주차(루비맛보기, form 태그)Ror 4주차(루비맛보기, form 태그)
Ror 4주차(루비맛보기, form 태그)SangHun Lee
 

What's hot (13)

Unity cookbook 20
Unity cookbook 20Unity cookbook 20
Unity cookbook 20
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)
 
3. pubspec.yaml 사용법
3. pubspec.yaml 사용법3. pubspec.yaml 사용법
3. pubspec.yaml 사용법
 
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 [NEXT] Android 개발 경험 프로젝트 3일차 (Database) [NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
 
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)_Part1
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)_Part12. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)_Part1
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)_Part1
 
2. xamarin.android 2.3 hello android multi screen example part2
2. xamarin.android 2.3 hello android multi screen example part22. xamarin.android 2.3 hello android multi screen example part2
2. xamarin.android 2.3 hello android multi screen example part2
 
2. widget
2. widget2. widget
2. widget
 
GMS 프로젝트 - Flutter
GMS 프로젝트 - FlutterGMS 프로젝트 - Flutter
GMS 프로젝트 - Flutter
 
Vue guide예제(vue todo-list)-v0.1
Vue guide예제(vue todo-list)-v0.1Vue guide예제(vue todo-list)-v0.1
Vue guide예제(vue todo-list)-v0.1
 
예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습
 
Laravel 로 배우는 서버사이드 #2
Laravel 로 배우는 서버사이드 #2Laravel 로 배우는 서버사이드 #2
Laravel 로 배우는 서버사이드 #2
 
8장 editor
8장 editor8장 editor
8장 editor
 
Ror 4주차(루비맛보기, form 태그)
Ror 4주차(루비맛보기, form 태그)Ror 4주차(루비맛보기, form 태그)
Ror 4주차(루비맛보기, form 태그)
 

Similar to 3. collection

[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기NAVER Engineering
 
02.개발환경 실습교재
02.개발환경 실습교재02.개발환경 실습교재
02.개발환경 실습교재Hankyo
 
Youtube를활용한app만들기
Youtube를활용한app만들기Youtube를활용한app만들기
Youtube를활용한app만들기DaeHee Jang
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)beom kyun choi
 
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작r-kor
 
Shiny의 또 다른 활용
Shiny의 또 다른 활용Shiny의 또 다른 활용
Shiny의 또 다른 활용건웅 문
 
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본Lee Sang-Ho
 
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 SangIn Choung
 
Api design for c++ ch3 pattern
Api design for c++ ch3 patternApi design for c++ ch3 pattern
Api design for c++ ch3 patternjinho park
 
유엔진 BPM 커스터마이징 개발 방법
유엔진 BPM 커스터마이징 개발 방법유엔진 BPM 커스터마이징 개발 방법
유엔진 BPM 커스터마이징 개발 방법uEngine Solutions
 
SpringCamp 2013 : About Jdk8
SpringCamp 2013 : About Jdk8SpringCamp 2013 : About Jdk8
SpringCamp 2013 : About Jdk8Sangmin Lee
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)Ildoo Kim
 
Api design for c++ pattern
Api design for c++ patternApi design for c++ pattern
Api design for c++ patternjinho park
 
Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Sangon Lee
 
파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기Yong Joon Moon
 
Android ndk jni 설치및 연동
Android ndk jni 설치및 연동Android ndk jni 설치및 연동
Android ndk jni 설치및 연동Sangon Lee
 
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경YoungSu Son
 
안드로이드 오픈소스 패턴 - 0.1
안드로이드 오픈소스 패턴 - 0.1안드로이드 오픈소스 패턴 - 0.1
안드로이드 오픈소스 패턴 - 0.1YoungSu Son
 

Similar to 3. collection (20)

[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
 
02.개발환경 실습교재
02.개발환경 실습교재02.개발환경 실습교재
02.개발환경 실습교재
 
Youtube를활용한app만들기
Youtube를활용한app만들기Youtube를활용한app만들기
Youtube를활용한app만들기
 
Light Tutorial Django
Light Tutorial DjangoLight Tutorial Django
Light Tutorial Django
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)
 
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작
RUCK 2017 Shiny의 또 다른 활용: RStudio addin 함수 및 패키지의 제작
 
Shiny의 또 다른 활용
Shiny의 또 다른 활용Shiny의 또 다른 활용
Shiny의 또 다른 활용
 
Coded ui가이드
Coded ui가이드Coded ui가이드
Coded ui가이드
 
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본
[방송통신대 컴퓨터과학과] 2020년 1학기 전공 모바일 앱 프로그래밍 기말평가 제출본
 
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
 
Api design for c++ ch3 pattern
Api design for c++ ch3 patternApi design for c++ ch3 pattern
Api design for c++ ch3 pattern
 
유엔진 BPM 커스터마이징 개발 방법
유엔진 BPM 커스터마이징 개발 방법유엔진 BPM 커스터마이징 개발 방법
유엔진 BPM 커스터마이징 개발 방법
 
SpringCamp 2013 : About Jdk8
SpringCamp 2013 : About Jdk8SpringCamp 2013 : About Jdk8
SpringCamp 2013 : About Jdk8
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)
 
Api design for c++ pattern
Api design for c++ patternApi design for c++ pattern
Api design for c++ pattern
 
Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조
 
파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기
 
Android ndk jni 설치및 연동
Android ndk jni 설치및 연동Android ndk jni 설치및 연동
Android ndk jni 설치및 연동
 
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경
[NEXT] 화면 재갱신이 되는 안드로이드 앱 만들기 - 네트워크에 독립하는 구조로 변경
 
안드로이드 오픈소스 패턴 - 0.1
안드로이드 오픈소스 패턴 - 0.1안드로이드 오픈소스 패턴 - 0.1
안드로이드 오픈소스 패턴 - 0.1
 

3. collection

  • 1. Meteor Korea DEV School 3rd day Collection
  • 2. 발표자 소개 - 박승현 - ppillip@gmail.com - http://digveloper.ppillip.com
  • 3. Collection (컬렉션:디비데이터처리하기) - 컬렉션 선언 클라이언트(브라우저) 서버(데이터 없을때 최초 초기화) - 리스트(find) 구현 - 입력(insert) 구현 - 삭제(remove) 구현 - 컬렉션을 합쳐 보기(model)
  • 4. 컬렉션 선언 - 브라우저 1. 파일생성(client폴더) 2. 컬렉션 선언 3. 브라우저 콘솔에서 확인
  • 5. 컬렉션 선언 - 서버 , 초기 데이터 넣기 1. 파일생성(server폴더) 2. 컬렉션 선언 3. 초기 데이터 넣기
  • 6. Collection (컬렉션:디비데이터처리하기) - 컬렉션 선언 클라이언트(브라우저) 서버(데이터 없을때 최초 초기화) - 리스트(find) 구현 - 입력(insert) 구현 - 삭제(remove) 구현 - 컬렉션을 합쳐 보기(model)
  • 7. 리스트에서 find 로 조회 하기 1. 원본 소스 2. 디비반영 소스
  • 8. 리스트에서 find 로 조회 하기
  • 9. Collection (컬렉션:디비데이터처리하기) - 컬렉션 선언 클라이언트(브라우저) 서버(데이터 없을때 최초 초기화) - 리스트(find) 구현 - 입력(insert) 구현 - 삭제(remove) 구현 - 컬렉션을 합쳐 보기(model)
  • 10. 입력 구현 - 템플릿 1. userInput 템플릿 코딩 하기 2. 템플릿 추가 하기
  • 11. 입력 구현 - 템플릿
  • 12. 입력 구현 - 헬퍼 1. userInput 의 events 매니저 생성 2. events 매니저에 버튼의 click 이벤트 등록
  • 13. Collection (컬렉션:디비데이터처리하기) - 컬렉션 선언 클라이언트(브라우저) 서버(데이터 없을때 최초 초기화) - 리스트(find) 구현 - 입력(insert) 구현 - 삭제(remove) 구현 - 컬렉션을 합쳐 보기(model)
  • 14. 삭제구현 - userListItem 템플릿 수정 1. userListItem 템플릿 코딩 하기 2. 기존버튼 이름추가 , 삭제버튼추가
  • 15. 삭제구현 - userListItem 템플릿 수정
  • 16. 삭제구현 - userListItem events 매니저 수정 1. name 속성 추가된 ‘버튼 셀렉터’ 수정 _id ? 우린 넣은적없는데? 2. remove 버튼 이벤트 추가 및 삭제 구현
  • 17. 삭제구현 - _id 란 무엇인가? 1. _id 는 mongoDB 의 unique 키 입니다. 2. 미티어 소스코드에서 insert api 에서 따로 지정하지 않으면 미티어가 자동으로 랜텀 텍스트를 생성하여 넣습니다. 3. 삭제시에 _id 로 1개의 doc 만 삭제가 가능합니다.
  • 18. 질문 실습