2. 프로젝트반 진행계획
1
2
3
4
모집대상 자바스크립트와 react.js의 기본개념을 어느 정도 알고 있거나
잘 모르더라도 그때 그때 구글링해서 작업할 수 있을 정도의 실
력을 가진 구성원으로 팀프로젝트를 통해 단기간에 실력향상을
도모하고 실전 코딩을 통해 실무능력을 배양하고 싶은 분
참여가능 수준 자바스크립트 기본문법(변수, 함수, 연산자, 제어문, 반복문)을
알고 배열, 객체를 다뤄본 분. node.js를 설치하고 React로
todolist 예제정도 해보신 분.
목표
프론트엔드 개발자로 진출하기 위해 퀄리티 높은 포트폴리오를
만들어보면서 단기간에 내공 상승을 하고 미니 프로젝트를 만들
수 있는 코딩능력을 배양하여 자신감을 얻기.
이런 분은 제외
교육 이외의 목적을 갖고 임하는 분.
남에게 불쾌감을 주는 인성을 가진 분.
불성실한 분.
3. 프로젝트반 진행계획
5
6
7
8
진행계획
매주 토요일 3시간(10-13)시. 전문개발자의 코칭 + 참고소스,
접근방법 제시.
나머지 주중 시간(월/수)에 온라인 지속적 미팅.
미팅방법
주중 월/수 저녁 7시 ~ 8시까지 온라인미팅 참여가능한 분은
참여. 참여방법은 온라인 팀뷰어 또는 구글 행아웃으로 화면 공
유 후 각자 발표. 각 팀원별 역할 분배, 진도체크, 산출물 공유
공유방법 github로 소스 산출물 공유. 커밋, 푸시, 풀 등 소스 통합 유지.
준비물
토요일 모임시 개인노트북 지참.
없으면 학원 현장에서 제공가능하나 개인노트북 지참이
여러모로 이점이 많으므로 권장함.
4. 각 주차별 진행계획(1)
- 팀 편성 또는 개인
- 개발환경 세팅.
- text editor(editplus, 웹스톰, vscode, 노트패드, 브라켓 등)
- 프로젝트 주제선정(캘린더 기반 일정관리, 조직도트리+매출관리통계, jExcel기
반 엑셀데이터+차트연동 3가지 중 택1) + 4주차 웹게임
- GITHUB 공유프로젝트 세팅
- DB 설치(MYSQL 구성)
- Table 구성, NODE.JS 설치, 리액트 프로젝트 설치. 기본 개념 설명
캘린더 기반 일정관리 조직도트리 + 매출통계 jExcel기반 웹엑셀 + 챠트
- 캘린더 라이브러리
- 평일(흑) / 토(청) / 일(적)
- 일자 클릭시 업무등록
- 업무 수정/삭제
- 일자별 업무리스트
- 업무 카테고리 설정
- 조직도 트리 라이브러리
- 재귀함수
- Json, 배열, 객체 등 데이
터구조 설계
- 매출데이터 통계처리
- 각종 그래프 도식화
- 막대그래프,원그래프, 선
그래프 연동
- 그래프 에니메이션
- jExcel 라이브러리 활용
- 가계부 관리
- 셀그리드 조작하기
- Json 데이터와 바인딩
- 사용자 csv파일과 바인딩
- Csv파일 업로드시 템플릿
생성 후 웹화면에서 조작
하기
5. 각 주차별 진행계획(2)
캘린더 기반 일정관리 조직도트리 + 매출통계 jExcel기반 웹엑셀 + 챠트
- 업무 진척사항 관리
- 일별 / 주별/ 월별/ 분기별
/반기별/연별 실정통계
- Css 에니메이션
- 조직 추가/수정/삭제하기
- 조직별 팀원 추가/수정/삭
제
- 조직별 랭킹
- 보너스 추가
- 미니 게시판
- jExcel 셀클릭시 상세정보
보기
- 상세정보창에서 수정/삭
제시 부모 셀에 반영
- 차트 에니메이션
미니게임 완성하기(숫자야구, 오목, 오델로, 슈팅, 섯다 중 택1)
- 숫자야구 : 알고리즘 제공, UI구성, 점수반영, 추가 아이디어 구현
- 오목 : 알고리즘 제공, 웹소켓 대전, 한 수 무르기, 아이템 사용 등
- 오델로 : 알고리즘 제공, 마우스 이벤트, 1:1 웹소켓. 아이템 사용 등
- 슈팅 : 알고리즘 제공. 객체지향 설계, 아이템 추가기능 구현, 점수누적, 폭탄쓰기
- 섯다 : 알고리즘 제공, 객체지향 설계. 1:1 웹소켓.
6. 캘리너 기반 일정관리
월간/주간/일간 화면 구조 변경
각 셀 클릭시 일정 등록/수정/삭제
배경색 지정가능
세부 시간 등록가능
같은 시간 중복등록 불가
세부 진행계획
- DB세팅 . 테이블 설계
- 개발환경 세팅(node.js 설치)
- 캘린더 라이브러리 연동
- 월간/주간/일간 화면레이아웃
구성
- 일정 등록시 캘린더반영
- 시간대별 순차배열
7. 조직도 + 매출통계관리
- 조직 추가/수정/삭제하기
- 조직별 팀원 추가/수정/삭제
- 조직별 랭킹
- 보너스 추가
- 미니 게시판
세부 진행계획
- DB세팅 . 테이블 설계
- 개발환경 세팅(node.js 설치)
- 캘린더 라이브러리 연동
- 월간/주간/일간 화면레이아웃
구성
- 일정 등록시 캘린더반영
- 시간대별 순차배열
8. jExcel 기반 웹엑셀 + 챠트
- 셀그리드 조작하기
- Json 데이터와 바인딩
- 사용자 csv파일과 바인딩
- Csv파일 업로드시 템플릿 생성 후 웹
화면에서 조작하기
- 챠트와 연동하기
세부 진행계획
- DB세팅 . 테이블 설계
- 개발환경 세팅(node.js 설치)
- jExel 라이브러리 연동
- 일정 등록 /수정 /삭제
- 각종 챠트 UI 연동
- 챠트 에니메이션
9. 미니웹게임
- 야구게임 , 오목, 오델로, 슈팅, 섯다, 틀린 그림 찾기, 조각 맞추기
- 랭킹계산
- 점수저장
- 1:1 대전(턴방식:ajax, 실시간socketio) 등
- 객체지향적으로 설계할 것
기간은 2주 이며 할 수 있는 양까지만 완료
등 미니게임 선정후 react로 화면 구성하고 socketio,
추가기능 넣어보기.
10. 미니웹게임
- 야구게임
시작화면 클리어화면
참고소스 : http://azanghs.cafe24.com/js/gosu/baseball/index.html
세부 진행계획
- 야구 게임
3개의 숫자가랜덤하게 세팅됨
UI 화면 예쁘게 만들것.
시도횟수 제한. 제한된 횟수 초과시
gameover
예상되는 카드번호 상정하기 기능.
사용자 입력 오류 막기
점수 계산기능
다시하기 기능
랭킹넣기
cf) 다빈치코드로 확장가능
11. 미니웹게임 - 오목
세부 진행계획
- 오목
• 턴방식 게임.
• 1pc 기반 : 1p2p번갈아 두기
• 2pc 기반 : 1:1 개인전
• 알고리즘 제공
• 한수 무르기
• 쌍삼 막기
• 3판 2승제
• 점수계산
• 초읽기. 제한시간안에 두기
• 아이템쓰기(아이디어)
참고소스 : http://azanghs.cafe24.com/js/gosu/omok/index.html
12. 미니웹게임 - 오델로
세부 진행계획
• 턴방식 게임.
• 1pc 기반 : 1p2p번갈아 두기
• 2pc 기반 : 1:1 개인전
• 알고리즘 제공
• 한수 무르기
• 3판 2승제
• 점수계산
• 초읽기. 제한시간안에 두기
• 아이템쓰기(아이디어)
참고소스 : http://azanghs.cafe24.com/js/gosu/othello/index.html
13. 미니웹게임 - 슈팅
• 세부 진행계획
• 슈팅
• 개인전.
• 알고리즘 제공
• 점수계산
• 최고 점수 갱신하기
• 보스 등장
• 아이템쓰기(아이디어)
참고소스 : http://azanghs.cafe24.com/js/gosu/gallerg/index.html
14. 미니웹게임 - 섯다
세부 진행계획
• 턴방식 게임.
• 1pc 기반 : vs 컴퓨터
• 2pc 기반 : 1:1 개인전
• 알고리즘 제공
• 5판 3승제
• 배팅하기
• 땡잡기, 가보 등
• 추가 기능 넣기
• 아이템쓰기(아이디어)
참고소스 : http://azanghs.cafe24.com/js/gosu/sutda/index.html
