2. 프로젝트반 진행계획
1
2
3
4
모집대상 자바스크립트와 react.js, 백엔드의 기본개념을 어느 정도 알고
있거나 잘 모르더라도 구글링해서 작업할 수 있을 정도의 실력
을 가진 구성원으로 팀프로젝트를 통해 단기간에 실력향상을 도
모하고 실전 코딩을 통해 실무능력을 배양하고 싶은 분
참여가능 수준 자바스크립트 기본문법을 알고 배열, 객체를 다뤄본 분.
node.js를 설치하고 React로 todolist 예제정도 해보신 분.
백엔드 웹프로그래밍을 해보신 분.
목표
프론트엔드 개발자로 진출하기 위해 퀄리티 높은 포트폴리오를
만들어보면서 단기간에 내공 상승을 하고 미니 프로젝트를 만들
수 있는 코딩능력을 배양하여 자신감을 얻기.
이런 분은 제외
교육 이외의 목적을 갖고 임하는 분.
남에게 불쾌감을 주는 인성을 가진 분.
불성실한 분.
3. 프로젝트반 진행계획
5
6
7
8
진행계획
매주 토요일 3시간(12-15)시. 전문개발자의 코칭 + 참고소스,
접근방법 제시.
나머지 주중 시간에 온라인 지속적 미팅.
미팅방법
주중 화/목 저녁 7시 ~ 8시까지 온라인미팅 참여가능한 분은
참여. 참여방법은 온라인 팀뷰어 또는 구글 행아웃으로 화면 공
유 후 각자 발표. 각 팀원별 역할 분배, 진도체크, 산출물 공유
공유방법 github로 소스 산출물 공유. 커밋, 푸시, 풀 등 소스 통합 유지.
준비물
토요일 모임시 개인노트북 지참.
없으면 학원 현장에서 제공가능하나 자신의 노트북에서 개발할
것을 권장함.
4. 각 주차별 진행계획(1)
- 팀 편성 또는 개인
- 개발환경 세팅.
- text editor(editplus, 웹스톰, vscode, eclipse, sts 등)
- 프로젝트 주제선정( 유저 -> 게시판 -> 미니게임/맛집/TRELLO 중 택1)
- GITHUB 공유프로젝트 세팅
- DB 선택 및 설치(MYSQL or 11G EXPRESS or FireBase 구성)
- Table 구성, NODE.JS 설치, 리액트 프로젝트 설치. 기본 개념 설명
- 로그인 화면 만들기, 버튼 링크
- 구글/네이버/페이스북 로그인 API연동, 회원가입
- 아이디, 비밀번호 찾기
- 정규식, 중복체크
- 로그인 완료, + 이메일 전송(옵션)
- 게시판 DB 구성(계층형의 이해), 댓글 TABLE
- 게시판 CRUD 구현, 등록, 수정, 삭제, 조회
- 댓글 달기, 리스트에 댓글카운트 추가노출하기
- 답변 달기(groupid, level, depth 컬럼활용)
5. 각 주차별 진행계획(2)
- 페이징 처리 (각종 페이징 쿼리 만들기)
- 검색어 처리(like 쿼리), 파일 첨부
- 파일 첨부하기
- 멀티파일 첨부(자바스크립트 동적 dom 생성). 배열데이터 넘
기고 배열로 받기
- 트렐로/맛집검색/웹게임중 택1
- DB테이블 구성
- 기본 CRUD 구성
- 웹소켓 기본
- 트렐로 : redux패턴, 컴포넌트 확장
- 맛집 : 통계, 별점
- 개인별 성과 발표. 부족한 점 / 아쉬운 점 토의
6. 유저관리 (1)
회원을 다루자.
모든 IT의 서비스는 사람이 하는 행위이므
로
회원에 관련된 데이터는 기본이 된다.
보통 MEMBER, USER, CUSTOMER 라는
테이블로 생성한다.
.
세부 진행계획(2주)
- DB세팅 . 테이블 설계
- sns 로그인 연동 구성
- FireBase 연동 구성
- 정규식 활용하기
- 개발환경 세팅(node.js 설치)
- git 활용법 설명
- 호스팅 서버 or AWS 구성 설
명
7. 유저관리 (2)
• DB에서 조회
• PASSWORD가
틀렸을 경우
재발급. 메일
• 아이디 중복체크, 정규식체크
• 패스워드 = 패스워드확인체크
• EMAIL 정규식체크
• 닉네임 중복체크
• FIREBASE 연동
기간은 2주 이며
할 수 있는 양까지만 완료.
2주 후엔 무조건 게시판으로
넘어감
- 네이버 API 연동 : https://developers.naver.com/docs/login/overview/
- 카카오 API 연동 : https://developers.kakao.com/docs/restapi
- 구글 API 연동 : https://firebase.google.com/docs/auth/web/google-signin?hl=ko
- 페이스북 API 연동 : https://developers.facebook.com/docs/facebook-
login/web/?locale=ko_KR
8. 유저관리 (3) : 요구사항
1. 연동 완료 후 콜백 리턴 데이터를 DB에 저
장 : 아이디(계정), 닉네임, 프로필 사진
3. 이메일로 가입시 : 인증메일을 전달하고, 인
증번호를 랜덤하게 생성하여 메일본문에 넣음.
5. 인증메일 링크 클릭시 GET파라미터로 토큰
값과 메일주소를 넘겨서 유효성 체크함.
0. 리액트 기본 프로젝트 생성.
2. 초기 닉네임은 연동 데이터로 세팅되지만
닉네임은 수정 가능. 수정시 중복체크
4. 인증메일의 링크를 클릭해야 인증성공 후
로그인 가능. 인증메일링크는 30분 이내에
클릭해야 함
6. 아이디 / 비밀번호 찾기 : 아이디 찾기의경우 가입된 이메일주소 체크.
비밀번호 찾기의 경우 랜덤 비밀번호를 가입된 이메일로 전송함.
9. 게시판
• 간단한 CRUD를 연습해보자.
• CRUD가 완성되었다면 댓글달기, 답변형만들기(계층구조), 조회수 카운트, 페이징처리
• 검색어처리, 글 수정,삭제, 파일첨부, 멀티파일 첨부 등을 추가해보자.
세부 진행계획
- 계층형 게시판 DB 구성(groupid, depth,
level)
- 댓글 달기 테이블 구성( join 쿼리)
- 조회수 카운트 구성(동일인물 조회수 증
가막기)
- 페이징 처리, 페이징 쿼리
- 검색 기능 쿼리
- 수정, 삭제를 위한 본인인증
- 파일첨부 + 파일다운로드, 리스트 엑셀다
운로드
- 멀티파일 동적 추가기능(자바스크립트)
기간은 2주 이며 할 수 있는 양까지만 완료
2주 후엔 무조건 웹게임으로 넘어감
10. 게시판 구현
• 리액트블로그 : https://github.com/jeonghwan-kim/lecture-react-app-overview
• 리액트 리듀서 : http://huns.me/development/1953
요구사항
1. CRUD 구조를 REDUX 없이 만들기
2. CRUD 구조를 REDUX + REDUCER + STORE + ACTION 구조로 만들어보기
3. 오늘 새글 new 아이콘
4. 조회수 카운트, 한 번 본 유저는 count 증가 막기.
5. 페이징 + 검색어 처리
6. 관리자 로그인시 게시글 일괄 지우기 기능(멀티 체크박스)
7. 답변형 indent 구조
8. 단일 파일업로드/ 다운로드, 멀티파일 업로드
11. 맛집관리
★ 사용자
- 맛집을 검색하고 정렬하는 리스트
- 맛집에 대한 평가를 진행하는 기능
- 내 위치와 가까운 맛집 추천
★ 관리자
- 맛집 등록 / 삭제
- 맛집 통계
기존 예제를 분석하여 강화하는 방식으로 진행
https://github.com/firebase/friendlyeats-web
12. Trello
★ 관리자
- 맛집 등록 / 삭제
- 맛집 통계
★ 주요 기능
- 주제 / 사용자 관리
- 주제별 업무 리스트
- 업무 할당 및 처리 결과
인터페이스는 https://github.com/web-pal/react-trello-board를 참조
13. Front / Backend 시스템구조
REACT.JS
HTML
CSS
JAVASCRIPT
EXPRESS.JS
NODE.JS
FRONTEND
기술
BACKEND
기술
MYSQL
SPRING,
TOMCAT
택1
ORACLE
MongoDB
FireBase
택1
