SlideShare a Scribd company logo
1 of 10
프론트엔드
프로젝트반 진행계획
모두의 코딩
Project plan
프로젝트반 진행계획
1
2
3
4
모집대상 자바스크립트와 react.js의 기본개념을 어느 정도 알고 있거나
잘 모르더라도 그때 그때 구글링해서 작업할 수 있을 정도의 실
력을 가진 구성원으로 팀프로젝트를 통해 단기간에 실력향상을
도모하고 실전 코딩을 통해 실무능력을 배양하고 싶은 분
참여가능 수준 자바스크립트 기본문법(변수, 함수, 연산자, 제어문, 반복문)을
알고 배열, 객체를 다뤄본 분. node.js를 설치하고 React로
todolist 예제정도 해보신 분.
목표
프론트엔드 개발자로 진출하기 위해 퀄리티 높은 포트폴리오를
만들어보면서 단기간에 내공 상승을 하고 미니 프로젝트를 만들
수 있는 코딩능력을 배양하여 자신감을 얻기.
이런 분은 제외
교육 이외의 목적을 갖고 임하는 분.
남에게 불쾌감을 주는 인성을 가진 분.
불성실한 분.
프로젝트반 진행계획
5
6
7
8
진행계획
매주 토요일 3시간(10-13)시. 전문개발자의 코칭 + 참고소스,
접근방법 제시.
나머지 주중 시간(월/수)에 온라인 지속적 미팅.
미팅방법
주중 월/수 저녁 7시 ~ 8시까지 온라인미팅 참여가능한 분은
참여. 참여방법은 온라인 팀뷰어 또는 구글 행아웃으로 화면 공
유 후 각자 발표. 각 팀원별 역할 분배, 진도체크, 산출물 공유
공유방법 github로 소스 산출물 공유. 커밋, 푸시, 풀 등 소스 통합 유지.
준비물
토요일 모임시 개인노트북 지참.
없으면 학원 현장에서 제공가능하나 성능이 좋은 편이 아님.
각 주차별 진행계획(2)
레이아웃 및 페이지 설계
- 레이아웃 설계
- 이메일/소셜 로그인 구현
- 회원가입 구현
- 페이지별 라우트 구성
환경설정 및 기획설정
- 개발환경 설정
- 형상관리 설정
- 에디터툴 선택
- 클론프로젝트 선택
- Node, React 구축 및 기본개념 / 설명
각 주차별 진행계획(2)
핵심기능 구현(2)
- 피드 상세보기 구현
- 덧글달기 구현
- 즐겨찾기 및 추천 기능 구현
- 배포하기
핵심기능 구현(1)
- 글쓰기/에디터 구현
- 이미지 파일 업로드 구현
- 리스트 출력 화면 구현
Node
React
React Router
Async Javascript
Promises
Functional Programming
REST API
JWT
Database Architecture
AWS
SCSS
ES6
배우게될 기술
만들 결과물
만들 결과물
만들 결과물
만들 결과물

More Related Content

What's hot

레거시 프로젝트 개선기 (사내 발표 자료)
레거시 프로젝트 개선기 (사내 발표 자료)레거시 프로젝트 개선기 (사내 발표 자료)
레거시 프로젝트 개선기 (사내 발표 자료)SungChanHwang
 
오픈 소스와 코드 리뷰
오픈 소스와 코드 리뷰오픈 소스와 코드 리뷰
오픈 소스와 코드 리뷰Daniel Juyung Seo
 
Test driven development
Test driven developmentTest driven development
Test driven developmentJinho Song
 
How To Become Better Engineer
How To Become Better EngineerHow To Become Better Engineer
How To Become Better EngineerDaeMyung Kang
 
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)동욱 하
 
훌륭한 프로그래머 되는 법
훌륭한 프로그래머 되는 법훌륭한 프로그래머 되는 법
훌륭한 프로그래머 되는 법Kai [Kyung Seok] Song
 
Better softwareengineer han
Better softwareengineer hanBetter softwareengineer han
Better softwareengineer hanDaeMyung Kang
 
[Live coding 1-23 토] camp-web_browser
[Live coding 1-23 토] camp-web_browser[Live coding 1-23 토] camp-web_browser
[Live coding 1-23 토] camp-web_browser동욱 하
 
TDD in gameserver 발표자료
TDD in gameserver 발표자료TDD in gameserver 발표자료
TDD in gameserver 발표자료Vong Sik Kong
 
(책 소개) 레거시 코드 활용 전략
(책 소개) 레거시 코드 활용 전략(책 소개) 레거시 코드 활용 전략
(책 소개) 레거시 코드 활용 전략Jay Park
 
신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비인서 박
 
TDD: Test Driven Development 첫번째 이야기
TDD: Test Driven Development 첫번째 이야기TDD: Test Driven Development 첫번째 이야기
TDD: Test Driven Development 첫번째 이야기Ji Heon Kim
 
AUSG 공사꾼 팀 소개 발표 자료
AUSG 공사꾼 팀 소개 발표 자료AUSG 공사꾼 팀 소개 발표 자료
AUSG 공사꾼 팀 소개 발표 자료Joon Hee Lee
 
C++ 코드 품질 관리 비법
C++ 코드 품질 관리 비법C++ 코드 품질 관리 비법
C++ 코드 품질 관리 비법선협 이
 
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드NAVER Engineering
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우NAVER Engineering
 

What's hot (19)

레거시 프로젝트 개선기 (사내 발표 자료)
레거시 프로젝트 개선기 (사내 발표 자료)레거시 프로젝트 개선기 (사내 발표 자료)
레거시 프로젝트 개선기 (사내 발표 자료)
 
오픈 소스와 코드 리뷰
오픈 소스와 코드 리뷰오픈 소스와 코드 리뷰
오픈 소스와 코드 리뷰
 
Test driven development
Test driven developmentTest driven development
Test driven development
 
How To Become Better Engineer
How To Become Better EngineerHow To Become Better Engineer
How To Become Better Engineer
 
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
 
훌륭한 프로그래머 되는 법
훌륭한 프로그래머 되는 법훌륭한 프로그래머 되는 법
훌륭한 프로그래머 되는 법
 
TDD
TDDTDD
TDD
 
Better softwareengineer han
Better softwareengineer hanBetter softwareengineer han
Better softwareengineer han
 
[Live coding 1-23 토] camp-web_browser
[Live coding 1-23 토] camp-web_browser[Live coding 1-23 토] camp-web_browser
[Live coding 1-23 토] camp-web_browser
 
TDD in gameserver 발표자료
TDD in gameserver 발표자료TDD in gameserver 발표자료
TDD in gameserver 발표자료
 
프로그래머
프로그래머프로그래머
프로그래머
 
(책 소개) 레거시 코드 활용 전략
(책 소개) 레거시 코드 활용 전략(책 소개) 레거시 코드 활용 전략
(책 소개) 레거시 코드 활용 전략
 
신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비
 
TDD: Test Driven Development 첫번째 이야기
TDD: Test Driven Development 첫번째 이야기TDD: Test Driven Development 첫번째 이야기
TDD: Test Driven Development 첫번째 이야기
 
AUSG 공사꾼 팀 소개 발표 자료
AUSG 공사꾼 팀 소개 발표 자료AUSG 공사꾼 팀 소개 발표 자료
AUSG 공사꾼 팀 소개 발표 자료
 
Tdd ver.2
Tdd ver.2Tdd ver.2
Tdd ver.2
 
C++ 코드 품질 관리 비법
C++ 코드 품질 관리 비법C++ 코드 품질 관리 비법
C++ 코드 품질 관리 비법
 
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드
[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
 

Similar to Team project (for frontend)

Team project(with reactnative)
Team project(with reactnative)Team project(with reactnative)
Team project(with reactnative)형석 장
 
좋은 개발자 되기
좋은 개발자 되기좋은 개발자 되기
좋은 개발자 되기Sunghyouk Bae
 
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서Eunsu Kim
 
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824AWSKRUG - AWS한국사용자모임
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)형석 장
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)형석 장
 
개발자, 성장하는 '척' 말고, 진짜 성장하기
개발자, 성장하는 '척' 말고, 진짜 성장하기개발자, 성장하는 '척' 말고, 진짜 성장하기
개발자, 성장하는 '척' 말고, 진짜 성장하기Donghyun Cho
 
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스Hee Jae Lee
 
자바스크립트 개발자가 되기 위한 플랜 강은심
자바스크립트 개발자가 되기 위한  플랜 강은심자바스크립트 개발자가 되기 위한  플랜 강은심
자바스크립트 개발자가 되기 위한 플랜 강은심은심 강
 
Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정Aree Oh
 
개발자들 오리엔테이션
개발자들 오리엔테이션개발자들 오리엔테이션
개발자들 오리엔테이션Park JoongSoo
 
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
 
코딩테트2205-kucc-220508145530-8015b5d7.pdf
코딩테트2205-kucc-220508145530-8015b5d7.pdf코딩테트2205-kucc-220508145530-8015b5d7.pdf
코딩테트2205-kucc-220508145530-8015b5d7.pdfssuser597fbd
 
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)Suhyun Park
 
2019 nexters x spoqa
2019 nexters x spoqa2019 nexters x spoqa
2019 nexters x spoqaKimHeamin1
 
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)승용 윤
 
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발Jaehoon Oh
 
부스트캠프 웹・모바일 8기 설명회 (2023년)
부스트캠프 웹・모바일 8기 설명회 (2023년)부스트캠프 웹・모바일 8기 설명회 (2023년)
부스트캠프 웹・모바일 8기 설명회 (2023년)CONNECT FOUNDATION
 
스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry Runner스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry RunnerServerDevCamp
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427Will Kim
 

Similar to Team project (for frontend) (20)

Team project(with reactnative)
Team project(with reactnative)Team project(with reactnative)
Team project(with reactnative)
 
좋은 개발자 되기
좋은 개발자 되기좋은 개발자 되기
좋은 개발자 되기
 
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서
프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서
 
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824
공사꾼 개발부장 김종찬_페어코딩으로 테스팅 배우기_ausg_20170824
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)
 
개발자, 성장하는 '척' 말고, 진짜 성장하기
개발자, 성장하는 '척' 말고, 진짜 성장하기개발자, 성장하는 '척' 말고, 진짜 성장하기
개발자, 성장하는 '척' 말고, 진짜 성장하기
 
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스
[오픈소스컨설팅]Session 6. scrum과 jira 기반의 소프트웨어 개발 프로세스
 
자바스크립트 개발자가 되기 위한 플랜 강은심
자바스크립트 개발자가 되기 위한  플랜 강은심자바스크립트 개발자가 되기 위한  플랜 강은심
자바스크립트 개발자가 되기 위한 플랜 강은심
 
Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정
 
개발자들 오리엔테이션
개발자들 오리엔테이션개발자들 오리엔테이션
개발자들 오리엔테이션
 
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
 
코딩테트2205-kucc-220508145530-8015b5d7.pdf
코딩테트2205-kucc-220508145530-8015b5d7.pdf코딩테트2205-kucc-220508145530-8015b5d7.pdf
코딩테트2205-kucc-220508145530-8015b5d7.pdf
 
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
 
2019 nexters x spoqa
2019 nexters x spoqa2019 nexters x spoqa
2019 nexters x spoqa
 
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)
2016 Staccato track3 Android를 더 잘 개발하려면? (MVP, MVVM, Clean Architecture)
 
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발
애자일 개발 프로세스를 이용한 고품질 소프트웨어 개발
 
부스트캠프 웹・모바일 8기 설명회 (2023년)
부스트캠프 웹・모바일 8기 설명회 (2023년)부스트캠프 웹・모바일 8기 설명회 (2023년)
부스트캠프 웹・모바일 8기 설명회 (2023년)
 
스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry Runner스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry Runner
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 

Team project (for frontend)

  • 2. 프로젝트반 진행계획 1 2 3 4 모집대상 자바스크립트와 react.js의 기본개념을 어느 정도 알고 있거나 잘 모르더라도 그때 그때 구글링해서 작업할 수 있을 정도의 실 력을 가진 구성원으로 팀프로젝트를 통해 단기간에 실력향상을 도모하고 실전 코딩을 통해 실무능력을 배양하고 싶은 분 참여가능 수준 자바스크립트 기본문법(변수, 함수, 연산자, 제어문, 반복문)을 알고 배열, 객체를 다뤄본 분. node.js를 설치하고 React로 todolist 예제정도 해보신 분. 목표 프론트엔드 개발자로 진출하기 위해 퀄리티 높은 포트폴리오를 만들어보면서 단기간에 내공 상승을 하고 미니 프로젝트를 만들 수 있는 코딩능력을 배양하여 자신감을 얻기. 이런 분은 제외 교육 이외의 목적을 갖고 임하는 분. 남에게 불쾌감을 주는 인성을 가진 분. 불성실한 분.
  • 3. 프로젝트반 진행계획 5 6 7 8 진행계획 매주 토요일 3시간(10-13)시. 전문개발자의 코칭 + 참고소스, 접근방법 제시. 나머지 주중 시간(월/수)에 온라인 지속적 미팅. 미팅방법 주중 월/수 저녁 7시 ~ 8시까지 온라인미팅 참여가능한 분은 참여. 참여방법은 온라인 팀뷰어 또는 구글 행아웃으로 화면 공 유 후 각자 발표. 각 팀원별 역할 분배, 진도체크, 산출물 공유 공유방법 github로 소스 산출물 공유. 커밋, 푸시, 풀 등 소스 통합 유지. 준비물 토요일 모임시 개인노트북 지참. 없으면 학원 현장에서 제공가능하나 성능이 좋은 편이 아님.
  • 4. 각 주차별 진행계획(2) 레이아웃 및 페이지 설계 - 레이아웃 설계 - 이메일/소셜 로그인 구현 - 회원가입 구현 - 페이지별 라우트 구성 환경설정 및 기획설정 - 개발환경 설정 - 형상관리 설정 - 에디터툴 선택 - 클론프로젝트 선택 - Node, React 구축 및 기본개념 / 설명
  • 5. 각 주차별 진행계획(2) 핵심기능 구현(2) - 피드 상세보기 구현 - 덧글달기 구현 - 즐겨찾기 및 추천 기능 구현 - 배포하기 핵심기능 구현(1) - 글쓰기/에디터 구현 - 이미지 파일 업로드 구현 - 리스트 출력 화면 구현
  • 6. Node React React Router Async Javascript Promises Functional Programming REST API JWT Database Architecture AWS SCSS ES6 배우게될 기술