핵심적인 모델 설계 및 구현

• 핵심적인 모델 (Professor, Lecture, Class, Goal/Objective)을 설계 및 구현한다.
• 각각의 모델은 Trello의 구조 (Team, Board, List, Card)와 일치한다.

서버-사이드 개발 환경 설정

• Spring Boot, Spring Data JPA를 이용해 개발 환경을 설정한다.
• Build Tool로는 Gradle을 사용한다.

파일 업로드 기능 구현

• 파일 업로드 기능을 구현한다.
• 각각의 학습 목표는 강의 자료(파일)을 n개 가질 수 있다.

Travis CI 연동

Travis CI를 연동한다.

API 호출을 위한 커스텀 미들웨어 적용

설명

• 미들웨어는 액션을 보내는 순간부터 스토어에 도착하는 순간까지 사이에 서드파티 확장을 사용할 수 있는 지점을 제공합니다. 여러분은 미들웨어를 로깅이나, 충돌 보고나, 비동기 API와의 통신이나, 라우팅이나 기타 등등에 사용할 수 있습니다. (미들웨어에서 발췌)
• redux-actions는 Redux를 위한 Flux Standard Action 유틸리티입니다.
• redux-api-middleware는 API 호출을 위한 Redux middleware입니다.

제안

• Real World 예제에 적용된 바와 같이, API 호출을 위한 커스텀 미들웨어를 적용합니다. 커스텀 미들웨어를 이용해 API를 호출하고 응답을 정제하는 코드를 다른 로직으로부터 분리할 수 있습니다.

참고

• Middleware (번역) @ Redux
• Async Actions (번역) @ Redux
• Real World Example @ GitHub
• redux-api-middleware @ GitHub
• redux-actions @ GitHub

React-Bootstrap 사용

제안

React-Bootstrap은 React.js에서 Bootstrap API를 보다 쉽게 사용할 수 있도록 만들어진 front-end framework입니다. 자세한 내용은 문서를 참고하실 수 있습니다.

https://spring.io/blog/2015/09/01/react-js-and-spring-data-rest-part-1-basic-features

spring boot 프로젝트 + react 연동 튜토리얼 학습

• 강의 리소스 자체를 관리하는 공간과 온/오프라인 강의를 위한 별도의 공간이 필요하다.

  • 강의 시작일과 강의 종료일이 있다.
  • 강의 자료는 강의 리소스를 기반
  • 3, 4개의 Lecture가 기본이고, 추가로 1,2개의 Lecture를 추가할 수 있는 구조여야겠다.

• 현재 Trello UI와 똑같은 구조로 강의 자료를 관리할 수 있어야 한다.

  • 강의 자료에 대한 관리는 교수만 가능하다.

• 교수는 앞에서 만든 강의 자료를 기반으로 강의를 개설할 수 있다.

  • 강의 자료는 같은데 2016년 1학기 강의, 2017년 1학기 강의와 같은 구조여야 한다.
  • 모든 강의는 Base가 되는 강의 자료에서 파생되어야 한다.

위 내용과 관련해 이해되지 않을 수 있는데 이번 주 미팅에서 공유할게.

Package manager를 이용한 dependencies 관리

제안

현재 다양한 라이브러리를 GitHub repository를 이용해 관리하고 있습니다. npm 또는 Bower와 같은 package manager를 이용하면, repository에서 불필요한 파일 (버전 관리가 필요하지 않은 파일)을 제거할 수 있을 것으로 예상됩니다.

Async 함수 적용

설명

Async 함수는 async와 await을 이용하여 비동기 코드를 매우 쉽게 작성할 수 있도록 도와줍니다. Async 함수는 현재 ECMAScript spec process의 Stage 4 (Finished) 상태로, ECMA-262 표준에 포함될 예정입니다.

제안

Async 함수를 이용하면, 기존의 코드에 존재하는 Callback이나 Promise를 효과적으로 대체할 수 있습니다. async와 await의 사용은 React의 build 과정에서 Babel에 의해 compile 되므로, 기존의 modern browser에서 사용할 수 있습니다. Promise와 Async 함수의 비교는 링크에서 보실 수 있습니다.

참고

• Async Functions for ECMAScript
• Async Functions @ TC39

react-scripts 업데이트

설명

react-scripts는 Create React App을 구성하는 development dependency입니다.

제안

현재 react-scripts에 대한 버전이 ^0.6.0으로 설정되어 있습니다. react-scripts의 버전을 0.7.0으로 업데이트합니다. 업데이트는 다음 명령으로 실행 가능합니다.

npm install --save-dev --save-exact [email protected]

참고

• Updating to New Releases @ Create React App User Guide
• Create React App v0.7.0

강의에 해당되는 전체적인 UI짜기

백엔드에서 웹소켓을 활용한 실시간 댓글을 구현하려고 합니다.
간단한 프론트를 목업으로 만들고, 서버쪽 로직을 구현합니다.

• 간단한 프론트 페이지
• 서버로직

핵심 모델(LCID) REST API 구현

• Auditing/Permission 제외

진행 상황

• Lectures (CRUD)
• Courses (CRUD)
• Issues (CRUD)
• IssueComments (CRUD)
• Discussions (CRUD)
• DiscussionReplies (CRUD)

Professor 기준 ISSUE 진행상황 Progress 나타내기

EditorConfig 적용

설명

EditorConfig는 코딩 스타일을 정의하는 파일입니다. EditorConfig를 설정하고 IDE에 해당하는 플러그인을 추가함을 통해, 코딩 스타일 차이에서 발생하는 불필요하고 성가신 conflict (e.g., indentation styles)을 방지할 수 있습니다. EditorConfig는 최근의 많은 프로젝트에서 활용되고 있습니다.

제안

EditorConfig 설정을 통해, 모든 파일에 대해 다음과 같은 코딩 스타일 사용을 제안합니다.

• Unix-style newlines with a newline ending every file
• 2 space indentation
• remove any whitespace characters preceding newline characters

이와 같은 코딩 스타일은 Angular와 React 같은 다양한 웹 프로젝트에서 사용되고 있습니다.

Markdown Editor 설치하기

https://simplemde.com/

전체 코스 목록 가져오기

PDF File & 영상 Scroll에 따라 Loading - Icon 구현

PDF Viewer 연결하기

pdf.js 사용해서 연결하기

Viewer Tab 구현

• SWAP 기능 course, issue 추가
• Professor 권한으로 학생들 ISSUE 상황을 Progress로 나타내기
• Professor 권한으로 해당 강의 수강생들 목록 보여주기
• action 함수 정리 및 API URL 연결

전체 강의목록 가져오기

강의 생성과 진행

• Course/Session를 개설한다.
  • 개설하는 시점에 시작 시간과 종료 시간을 설정할 수 있어야 한다.
  • 강의 목록에는 현재 강의 중인 목록만 나타난다.

Session 페이지

• 각 Session별 Lecture의 경우 "Add a Lecture"가 나타나지 않도록 한다.
• Session내에서 새로운 Session을 생성할 수 있어야 한다.
• Lecture가 많아질 경우 좌/우 스크롤 되어야 한다.

Lession 상세 페이지

• 파일 첨부가 되어야 한다.
• 특정 상황에서 Q&A가 로딩되지 않고 상태바만 나타난다.
• 1depth 질문의 경우 답변 수를 볼 수 있어야 한다.

실시간 댓글을 위한 웹소켓 학습