1. 목적 - 웹의 frontend 에 대해 하드 트레이닝 해서 웹 시장을 정복한다.
2. 대상 - 코딩을 어느정도 접해본 학생, 혹은 개발자를 대상으로 하며, Javascript에 대한 기초적인 이해가 있으면 좋다. (자세한건 밑에 Prerequisite Skillset 참조)
3. 본 스터디는 세부 주제(세션)를 잡고 기간을 정해 파도록 한다.
4. 질문은 해당 Repository의 Issue란, GDG Campus 슬랙의 #frontend 채널에서의 질문, 혹은 @kevinOriginal 에게 Message 를 주시면 됩니다.

• 현재 예정되어 있는 세션 - React + Redux, CSS

• 1주일치 개인적으로 공부를 해야할 것과, 과제가 나갑니다.
• 모든 공지사항과 과제 설명 및 제출은 해당 이 레포지토리에서 이루어집니다.
• 따라서 git 과 github 에 대한 기초적인 이해가 필요하며, 잘 모를경우 슬랙에 마구마구 물어보시면 돼요 :)
• 커뮤니케이션은 슬랙의 private 채널과 github 레포지토리를 통해서 합니다.
• 과제는 서로 코드 리뷰를 해주고 스터디원들이 돌아가면서 냅니다.
• 본 스터디에 유동적으로 참여하기 위해서는 협업툴인 Zenhub Chrome extension을 설치해야 합니다.

https://www.zenhub.com

1. GDG KR Campus 슬랙 가입
2. frontend 채널 가입 및 frontend_1 private 채널 가입. (문의주세요)
3. 슬랙 아이디 @kevinoriginal 에게 본인의 Github 아이디를 직접 메세지로 전해주면 collaborator 등록이 됩니다..
4. Zenhub.com 에 들어가서 zenhub을 설치한다 (설치를 누르면 크롬 익스텐션이 자동으로 설치됨)

• zenhub는 깃헙과 바로 연동이 되는 트렐로 같은 협업툴 입니다.

5. 이 레포지토리의 issues 탭에 들어가 Create new issue 를 누른다.

• 해당 issue에 대해 오른쪽 설정에서 다음과 같이 설정을 한다.
• pipeline 을 Members로 바꾸고 Lables 그냥 붙이고싶은거 붙이세요ㅎㅎ
• Assignees 는 본인 이름으로 바꾸세요.
• issue 의 제목은 본인슬랙이름 + @깃헙아이디 이다. ex) Kevin Jin @kevinOriginal
• issue 의 본문은 자신의 과제 상황을 체크표시로 나타내고, 현재 자신이 힘쓰고 있는것을 써주면 된다.

6. Wiki 에 해당 주의 공부할 내용과 과제가 모두 나옵니다.
7. 현재 맴버들의 진행상황과 공지 등 여러가지는 Board 에 들어가서 볼 수 있습니다.
8. 그래도 wiki 를 매주 확인해주세요.

• 10/7 - GDG Campus Starting Day 스터디 홍보 및 새로운 인원 모집
• 10/11 - START!!!!
• 10/?? - 첫 번째 오프라인 MeetUp 및 친목친목

View를 만드는 최신 라이브러리인 react.js를 공부함으로써 Component 식 구성 방법과 Redux를 통해 Functional Programming에 익숙해진다. 러닝 커브를 고려하여 맨 처음 React 만으로 view를 구성하는 것에 충분히 익숙해진 후에 자바스크립트의 가장 최신 문법인 ES6 (ECMAScript6)는 React 와 함께 곁 가지로 공부하도록 한다.

• 대상 : 본인이 스터디를 참여하기에 기본적인 지식이 충분한지 아닌지는 밑에 Prerequisite Skillset 을 참조하세요.
• 목적 : 아직 Javascript 에 대한 이해가 부족하다고 느끼시는 분들, React를 하다가 막히시는 분들을 위해 한주동안 프리 세션의 기간을 가집니다.
• 본인이 대상자인지 아닌지 판별하는 나름 괜찮은 Test :
• 다음 레포지토리에 있는 “오목” 게임을 javasciprt 로 완성할 수 있다. (이는 DOM mannipulation 에 관한 것이라 사실 React 와는 상관이 없지만 그래도 어느정도 js 에 대한 기본? 을 묻기 때문에 일단 은 요걸 넣어둡니당)
• Test 문제 : https://github.com/kevinOriginal/omokjs
• Test 답안 : https://github.com/kevinOriginal/omok_node

자바스크립트의 [초급] 단계 까지는 알고 시작을 하는 것을 권고합니다. [중급]까지 안다면 배우는데 매끄러운 진행이 가능하며, [기초] 단계만 아는 상태이면 React 를 배우면서 지속적인 공부가 요구 됩니다. 만약 본인이 JS에 대한 기본지식이 아예 없다면, (Pre-session)의 주를 이용해서 굉장히 빠르게 훑어본 다음에, React를 배우면서 학습을 꾸준히 해야 합니다. 아래에 참고할 만한 좋은 자료를 다 모아뒀으니 이걸로 보고 직접 본인의 Curriculum 을 짜보시기 바랍니다. 이에 따라 기준을 다음과 같이 정의합니다.

• [기초] - (튜토리얼) 코드카데미(https://www.codecademy.com/learn/javascript)

• [초급] - (책) Javascript & Jquery - 존 두켓

• [중급] - (책) 자바스크립트 완벽 가이드 6E - 데이비드 플래너건 or (책) 프론트앤드 개발자를 위한 자바스크립트 프로그래밍 or (강의) Javascript: Understanding The Weird Parts (https://www.udemy.com/understand-javascript/learn/v4/overview)

• [중고급] - [책] 함수형 자바스크립트 - 마이클 포거스 and JS Framework로 빌드 경험 유

• [넘사벽] - 그냥 JS 로 된 프레임워크로 프로덕션 해봄. 이럼 걍 위에 다 바름

HTML 은 그냥 적당히 알아서 어느정도 안다고 자신을 가정합시다.. (코드카데미 html,css 정도면 충분할듯)

• 첨언 : Javascript를 공부하는 좋은 방법론에 대한 블로그 입니다. https://nolboo.kim/blog/2014/03/13/how-to-learn-javascript-properly/

1. Pro-react (원서만 무료) 책 원본 pdf 가 드라이브에 있습니다. 한글판을 원하는 분들을 알아서 사세욤 ㅡ3ㅡ 이 책은 가장 기본 공부 교재로써 최소한 pdf 파일이나, 영어가 어려우신 분은 번역본도 나름 괜찮게 되더 있으니 구매 부탁 드립니다. (http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791158390426&orderClick=LAG&Kc=)

2. Velopert blog (무료) 여기에 상당히 많은 양의 자료가 정리되어 있습니다. 민준님은 꽤 react에 대해 오래동안 연구해오신 분으로써 자료가 체계적이고 좋습니다. 링크 : https://velopert.com/reactjs-tutorials

3. Udemy 강좌 예제 내용, 및 내용정리 구매가 필수는 아니지만 권장해드립니다. 제가 지금까지 본 강좌중에 제일 좋습니다. 구매하신 분들이 예제 자료좀 같이 share 할 수 있도록 합시다. 링크 - https://www.udemy.com/react-redux/learn/v4/overview

4. Learn Redux (무료) Redux를 제일 잘가르친다고? 소문이 난 강사입니다. 저도 아직 안들어봐서 모르겠는데, 곧 들을 예정이고 우리가 Redux 시작하기 전까지는 전까지는 ½ 이상 듣고 피드백 드리겠습니다. 링크 - https://learnredux.com/

원하는 디렉토리[폴더명]에 React boilerplate 설치하고 시작하기

1. $sudo npm install -g create-react-app // global에 create react app 설치

2. $create-react-app 폴더명 // '폴더명' 의 폴더를 만들고 react boilerplate 설치

3. $cd 폴더명 //change directory to 폴명

4. $npm start //서버 start!

이렇게 하시면 boilerplate 가 원하는 [폴더명]에 깔리고 localhost에 서버가 실행됩니다.

None yet...

@kevinOriginal