풀스택 개발의 생산성을 위한 Meteor 프레임워크 웹 애플리케이션 개발의 고통에서 해방된다 웹 애플리케이션을 개발하는 과정이 왜 이렇게 고통스러운가? 이 의문에서 Meteor 프레임워크는 개발되었다. 따로 노는 MEAN 스택이 아닌 유기적으로 잘 통합된 풀 플랫폼 개발을 Meteor로 경험한다....
1장 미티어 소개
__1.1 빠르게 구성하는 개발 환경
__1.2 브라우저와 서버 간 실시간 데이터 동기화
__1.3 풀스택 자바스크립트
__1.4 모바일 통합 개발 환경
__1.5 풍부한 패키지
2장 개발 환경 설정
__2.1 macOS, 리눅스 환경에서 설치하기
__2.2 윈도 환경에서 설치하기
__2.3 아톰 에디터 설치
2.3.1. 아톰 에디터 내려받기와 설치
____2.3.2 테마 설정
____2.3.3 UTF-8 설정
____2.3.4 미티어 지원 패키지 설치
__2.4 helloworld 프로젝트 실습
3장 주소록 만들기
__3.1 주소록 프로젝트 생성
__3.2 미티어 컬렉션 생성
__3.3 주소록 초기 데이터 생성 0494장 주소록 목록 구현하기
__4.1 주소록 목록 뷰 작성하기
__4.2 주소록 템플릿 헬퍼 구현하기
__4.3 부트스트랩 패키지 추가
__4.4 주소록을 이름으로 정렬하기
5장 주소록 등록/삭제 구현하기
__5.1 주소록 삭제 템플릿 작성하기
__5.2 주소록 삭제 이벤트 구현하기
__5.3 주소록 등록 템플릿 작성하기
__5.4 주소록 등록 이벤트 구현하기
6장 주소록 수정 구현하기
__6.1 하위 템플릿으로 분리하기
__6.2 세션을 이용한 직접 수정 모드 구현
____6.2.1 Session 설치
____6.2.2 수정 버튼 클릭 시 세션 변수 변경
____6.2.3 세션 상태 값을 반환하는 헬퍼 구현
____6.2.4 헬퍼에 반응하게 뷰 변경
____6.2.5 수정 모드에서 저장 버튼 구현
____6.2.6 수정 모드에서 취소 버튼 구현
____6.2.7 텍스트 클릭 시 수정 모드로 변환
7장 입력 데이터 검증하기
__7.1 check 함수 기본 사용법
____7.1.1 check 패키지 설치하기
____7.1.2 기본 사용법
____7.1.3 기본 자료형 체크
____7.1.4 Match.Where 사용한 복잡한 입력 값 체크
__7.2 등록 데이터 검증
__7.3 수정 데이터 검증
__7.4 등록 검증 코드 정리
8장 보안 적용하기
__8.1 5분 만에 사용자 가입 만들기
____8.1.1 패키지 설치하기
__8.2 로그인 버튼 추가하기
____8.2.1 로그인한 사용자에게만 뷰를 제공하기
__8.3 autopublish 패키지 삭제
__8.4 insecure 패키지 삭제
____8.4.1 등록 제약
____8.4.2 수정/삭제 제약
__8.5 발행 시 데이터 제약 적용
__8.6 보안 적용 완료 코드
9장 페이징 구현하기
__9.1 초기 데이터 만들기
__9.2 더보기 방식으로 페이징 구현하기
__9.3 무한 스크롤 방식으로 페이징 구현하기
10장 채팅 프로젝트
__10.1 프로젝트 생성/설정하기
__10.2 기본 폴더 및 body 구성하기
__10.3 기본 패키지 구성하기
____10.3.1 autopublish 패키지 제거
____10.3.2 insecure 패키지 제거
____10.3.3 트위터 부트스트랩 패키지 설치
____10.3.4 가입과 로그인 관련 패키지 설치
__10.4 컬렉션과 픽스처 데이터 생성
____10.4.1 미티어 컬렉션 선언
____10.4.2 픽스처 데이터 생성
11장 채팅 메인 구현하기
__11.1 채팅 메인 구성하기
__11.2 사용자 등록 구현하기
__11.3 채팅방 등록 구현하기
__11.4 채팅방 목록 구현하기
____11.4.1 템플릿 구성
____11.4.2 발행/구독 설정
____11.4.3 리스트 구성
____11.4.4 allow 구현
12장 채팅방 구현하기
__12.1 채팅방 구성하기
____12.1.1 채팅방 템플릿 추가하기
____12.1.2 동적 로딩 템플릿 구현하기
____12.1.3 채팅 메인과 채팅방 링크 구성하기
__12.2 채팅방 헤더 구현
____12.2.1 roomHeader 파일 생성
____12.2.2 roomHeader 템플릿 구현하기
____12.2.3 채팅방 이름 나타내기
____12.2.4 메인으로 이동하는 이벤트 구현하기
__12.3 메시지 등록 구현
____12.3.1 messageInput 파일 생성
____12.3.2 템플릿 구현하기
____12.3.3 입력 구현하기
____12.3.4 allow 구현 및 데이터 확인
____12.3.5 엔터 키 전송 구현
____12.3.6 호출 가능한 템플릿 메서드 만들기
____12.3.7 기존 코드를 메서드로 재사용하기
____12.3.8 이벤트에서 메서드 호출하기
__12.4 메시지 목록 구현
____12.4.1 메시지 목록을 채팅방에 추가하기
____12.4.2 메시지 목록 데이터 발행/구독 설정하기
____12.4.3 메시지 목록 헬퍼 작성하기
____12.4.4 메시지 목록 템플릿 뷰 코드 작성하기
__12.5 채팅방 구현 완료 코드
____12.5.1 서버 코드
____12.5.2 서버/클라이언트 공통 코드
____12.5.3 클라이언트 코드
13장 고급 기능 구현
__13.1 템플릿 분리하기
__13.2 아이콘 구현
__13.3 메시지 경과 시간 구현
____13.3.1 momentjs 패키지를 설치하기
____13.3.2 경과 시간 전역 헬퍼 작성하기
____13.3.3 뷰에서 헬퍼 호출 구현하기
____13.3.4 매초 변경하게 리액티비티 작성하기
__13.4 상대와 좌우로 구분
____13.4.1 작성자와 로그인된 사용자 비교 헬퍼(me) 구현하기
____13.4.2 me 값에 따라 메시지를 다르게 렌더링 구현하기
__13.5 전송 중 상태 구현하기
__13.6 스크롤 구현하기
____13.6.1 구독 건수 설정
____13.6.2 구독 건수 변경 시 재구독 구현
____13.6.3 브라우저 크기에 따른 화면 구성 및 스크롤 구현
____13.6.4 브라우저 크기 변경 시 재계산
____13.6.5 스크롤 최상단 도달 시 구독 개수 늘리기
__13.7 대화창 바닥 유지하기
____13.7.1 채팅방 목록에서 채팅방으로 들어왔을 때
____13.7.2 다른 사용자가 메시지를 등록했을 때
14장 모두의 도트 프로젝트
__14.1 프로젝트 생성/설정하기
__14.2 기본 폴더 및 body 구성하기
__14.3 기본 패키지 구성하기
__14.4 컬렉션과 fixture 데이터 생성
____14.4.1 미티어 컬렉션 선언
____14.4.2 Fixture 데이터 생성
15장 점 찍기 구현하기
__15.1 fixture 데이터 표현해보기
____15.1.1 body 설정
____15.1.2 container 파일 생성 및 기본 구성
____15.1.3 container 템플릿 오브젝트에서 발행/구독 설정
____15.1.4 container 템플릿 헬퍼 및 container 템플릿 뷰 구현
____15.1.5 dot 템플릿 파일 생성 및 dot 템플릿 뷰 구현
__15.2 도트 템플릿 구현
____15.2.1 마우스 클릭된 점을 검은색으로 업데이트
__15.3 점찍기 구현 완료 코드
____15.3.1 서버 코드
____15.3.2 서버/클라이언트 공통 코드
____15.3.3 클라이언트 코드
16장 선 그리기 구현하기
__16.1 마우스 클릭(mousedown) 이벤트 구현
__16.2 마우스 무브(mousemove) 구현
__16.3 마우스 클릭 해제(mouseup) 구현
17장 선에 색상 입히기
__17.1 색상 패드 구성
__17.2 색상 아이템 구성
__17.3 색상 아이템 클릭 시 세션 값 설정
__17.4 세션 값으로 color를 업데이트하기
18장 리셋 기능 구현하기
__18.1 리셋 기능을 위한 HTML 템플릿 작성
__18.2 선택된 색 구현
__18.3 선택된 색으로 리셋하기 구현
__18.4 모두의 도트 전체 코드
____18.4.1 서버 코드
____18.4.2 서버/클라이언트 공통 코드
____18.4.3 클라이언트 코드
19장 차트 구현하기
__19.1 차트 설치 및 설정하기
__19.2 파이 차트 그리기
____19.2.1 라이브러리 선언 및 설정
____19.2.2 차트 템플릿 작성하기
____19.2.3 차트에 타이틀 넣기
____19.2.4 초기 데이터 넣어 그리기
____19.2.5 DB 데이터로 그리기
____19.2.6 updatePie 함수 만들기
____19.2.7 리액티비티로 데이터 연결하기
__19.3 라인 차트 그리기
____19.3.1 템플릿에 라인 차트 추가하기
____19.3.2 라인 차트 데이터 생성하기
____19.3.3 데이터로 그리기
____19.3.4 x축 그려 넣기
__19.4 칼럼 차트 그리기
____19.4.1 series 추가하기
____19.4.2 series에 데이터 추가하기
__19.5 리얼타임으로 변경되는 차트 그리기
____19.5.1 observe 함수 구현하기
____19.5.2 변경된 색상 업데이트하기
20장 이미지 게시판 만들기
__20.1 이미지 게시판의 포스트 목록
____20.1.1 이미지 게시판 새 포스트 작성
__20.2 프로젝트 생성과 설정
__20.3 기본 폴더 및