3rd grade second semester

1. 백엔드 파트: 박성흠, 강현석
게임 파트: 김광현
프론트엔드 파트: 문윤기, 김기현
데이터베이스 팀 프로젝트 최종 발표

2. 1. 프로젝트 기획 의도
1. 모티브
2. 기획의도
3. 일정
목차
2. 백엔드
2-1 기술스택
2-2 WEB
2-3 DB
2-4 Schema
3. 프론트엔드
3-1 기술스택
3-2 Front-end:Auth
3-3 Front-end: Home
4. 게임
4-1 기술스택
4-2 게임 순서도
4-3 기술설명

3. 프로젝트 기획 의도 :

4. 아이디어 선정 과정
빵빵한 팀 구성
(프론트 엔드 2명, 풀스택 1명, 게임개발 1명, 서버 1명)
이왕 만들거면 해보고 싶던 것들 다 넣어보자
게임 + SPA + API 형 서비스
1
모티브

5. OP.GG
1-1
모티브

6. OP.GG의 개방화
목표: 인디게임 개발자들에게 래더시스템을 제공하자!
조금 규모가 커 보이기는 하지만……
까짓거 만들어보자!
1-2
기획의도

7. 1-3
일정
일정 게임파트 백엔드 파트 프론트엔드 파트
10월 2주차 테마 결정 (웹프로젝트 2회차)
10월 3주차 주제결정, 업무분장, 사용할 기술스택 결정
10월 4주차 게임 컨셉 설정 Azure DevOps
설정
React 학습
프로토타입 제작
10월 5주차
~
11월 2주차
게임 프로토타입
제작
인프라 세팅,
프로젝트 틀 생성
React 학습
프로토타입 제작
11월 3주차 ~ 4주차 서버 연동 테스트 게임 연동 테스트
커뮤니티 구현
프로토타입 제작
통합테스트
11월 5주차 게임 개발 게임 연동 테스트
커뮤니티 구현
기술스택 변경
12월 1주차 ~ 2주차 통합테스트

8. Back-end :
박성흠: 백엔드(게임연동) 작업, 인프라 세팅
강현석: 백엔드(커뮤니티) 작업

9. +
2-1
기술 스택
+
+

10. Ubuntu
MS Azure Devops 서비스를 사용하려고 했으나, 난관에 봉착
기존에 사용하던 개인서버에 퍼블리싱
2-2
Back-end:
WEB
NGINX
비교적 역사는 짧지만 고성능, 간편한 설정 덕분에
점유율 상승중인 웹서버
남들 다 쓰는 Apache Httpd를 쓰고 싶지 않은 점도 어느정도...

11. Django
Python 기반 웹 애플리케이션 프레임워크
빠른 개발속도
세션, 쿠키관리
데이터베이스 추상화
2-2
Back-end:
WEB

12. MariaDB
태초에 Oracle에서 오픈소스 DB가 있었으니......
(사실상 Beta 테스트용 버전)
최근 라이선스 문제로 인해 새롭게 나온 오픈소스 DB
MySQL과 완벽한 호환성 보장(을 목표로 함)
2-2
Back-end:
DB

13. 2-4
Community 파트Back-end:
Schema
User: 사용자 정보 저장 (Django ORM)
username first_name last_name password
INTEGER
AUTOINCREMENT
VARCHAR2 VARCHAR2
외래키
User 테이블 참조
UserInfo: Django ORM 이외의 필요 정보 저장
id nickname introduce profile mode
외래키
User 참조
VARCHAR2 VARCHAR2 VARCHAR BOOLEAN
Follow: 유저간 팔로우 정보 저장
index follower follwing
INTEGER
AUTOINCREMENT
외래키
User 참조
외래키
User 참조

14. 2-4
Community 파트Back-end:
Schema
Post: 유저가 작성한 모든 게시글 저장
index content poster date game_data
INTEGER
AUTO
INCREMENT
VARCHAR2
외래키
UserInfo 참조
DATE
외래키
Ladder 참조
NULL 허용
GamePost: 게임 관리자가 작성한 모든 게시글 저장
index content date game_data
INTEGER
AUTOINCREMENT
VARCHAR2 DATE
외래키
Ladder 참조
NULL 허용
Like: 게시글의 ‘좋아요’ 관련 데이터 저장
index post liker
INTEGER
AUTOINCREMENT
외래키
Post 참조
외래키
UserInfo 참조

15. Gamedata: 등록된 게임 정보를 관리
index game_name api_key admin_name image
INTEGER
AUTOINCREMENT
VARCHAR2 VARCHAR
외래키
User 테이블 참조
VARCHAR
2-4
Gamedata 파트Back-end:
Schema
Ladder: 전송된 게임 플레이 정보 저장
index game_index score player_id
INTEGER
AUTOINCREMENT
외래키
Gamedata 참조
INTEGER
외래키
User 테이블 참조

16. Front-end :
문윤기: 정보 페이지(개인, 게임), 검색페이지
김기현: 로그인 페이지

17. +
3-1
기술 스택
+ +

18. HTML
초기에 React.js를 이용한 개발로 시작
일정 관계상 다시 기본적인 HTML로 회귀
3-2
Front-end:
Auth
CSS + BootStrap
React.js 개발에 따라 SCSS 및 ReactStrap을 사용하여 디자인
HTML로 바뀌면서 다시 CSS 와 BootStrap을 사용하여 디자인
JavaScript & jQuery
회원가입 등의 웹 페이지에서 발생하는 액션을 위한
JavaScript와 jQuery

19. HTML
초기에 React.js를 이용한 개발로 시작
일정 관계상 다시 기본적인 HTML로 회귀
3-3
Front-end:
Home
CSS + BootStrap
React.js 개발에 따라 SCSS 및 ReactStrap을 사용하여 디자인
HTML로 바뀌면서 다시 CSS 와 BootStrap을 사용하여 디자인
JavaScript & jQuery
게임추가 ‘모달창’, ‘더 보기’ 버튼 활성화, 프로필 사진 업데이트
 자바 스크립트와 jQuery 사용
글을 작성하고 게시하기 버튼을 눌렀을 때 미리 만들어 놓은
Form 형식에 맞추어 글이 작성될 수 있도록 jQuery문 작성

20. Game :
김광현: 게임 파트 전체
(게임 기획, 프로그래밍, 에셋 제작)

21. + +
+
+
4-1
기술 스택

22. 게임 순서도:
4-2

23. HTML의 기술인 Canvas을 이용 2D 켄텍스트 사용
HTML5
기술 설명:
4-3
Game의 전체적인 언어는 JavaScript 사용
JavaScript
400장 정도의 이미지를 Sprite 기술을 이용해 파일용량 증가
및 렌더링 성능 저하를 최소화를 위해 사용
Sprite

24. 서버와 통신하는 파일 형식으로 JSON 적용
JSON
기술 설명:
4-3
서버에 사용자 이름 / 코멘트 / 점수를 비동기식으로
보내기 위해 사용되는 기법
Ajax

25. 연동방법

26. 게임등록
4-3

27. 코드 예시
4-3

28. 시연:
CS.GG

29. 감사합니다.