logo logo
코스 이미지

[온라인 스터디][2기] React 개발자를 위한 코드리뷰 스터디

400,000원400,000원
할인 기간을 확인 후 등록하시고, GitHub 유저네임을 정확히 입력해주세요(레포 전체 주소가 아닌, 본인의 유저네임). 만약 이번 기수 참여가 어려워 차기수 참여를 원하는 경우 꼭 대기자 신청 을 완료해주세요.

페이스북 클론 프로젝트로 React 스킬업 🤓

리액트와 리덕스 튜토리얼을 마친 분이면 누구나,

이 과정을 통해 코드리뷰에 참여할 수 있어요!

페이스북 클론 프로젝트를 진행하며 최대한 실제 개발팀의 상황과 유사한 미션을 부여합니다.

그러한 과정에서 리액트 개발자가 매일 고민해야 하는 것들, 길러야 하는 스킬을 안내합니다.

코드리뷰를 통해 나의 코드 단점도 빠르게 잡고, 풍부한 피드백을 함께 나눠요.

🗓 SCHEDULE 일정

  • 스터디 시작: 2019-11-19(화)
  • 스터디 종료: 2019-12-17(화) 총 4주
  • 위 기간동안 코드리뷰는 상시 진행
  • 문의사항: 02-539-1885, learn@programmers.co.kr
  • 준비물 및 사용 프로그램:

  • 개인 노트북

    Windows, MacOS 상관 없음

  • Slack

    실시간 채팅 및 Q&A

  • GitHub

    미션 제출 및 코드리뷰

  • School

    프로그래머스 스쿨

운영자의 과정 소개 영상을 확인해보세요. 페이지에는 다 설명하기 어려운 내용들이 담겨있습니다! (좀 길어요)

🤷 TARGET 참여 대상자

사전 필요 지식

본 과정은 튜토리얼 내용을 기본적으로 숙지한 상태에서 시작하는 것이 가장 좋습니다. 아예 리액트를 '완전히 처음' 접하는 경우에는, 첫 미션 수행과 동시에 리액트 자체에 대한 튜토리얼도 병행해야 하기에 미션 규모가 상당히 커질 수 있습니다.

  • 리액트, 리덕스 튜토리얼 떼고 오기. 그리 길지 않습니다. 조금만 시간을 내서 리액트와 리덕스가 대략적으로 어떤 기술인지 파악하고 참여하세요. 미리 워밍업을 하고 참여하는게 스스로에게 더 남는게 많습니다!
  • 리액트 공식 튜토리얼: 양이 그렇게 많지 않으니 끝까지 따라해보세요.
  • 리덕스 공식 튜토리얼: Basic 까지 다 보시고, Example: Todo List 까지 실습해보세요.




  • 컴포넌트에 대한 이해가 약한 분


    컴포넌트의 설계의 가장 중요한 부분은 '역할을 정의' 해주는 부분이라는데, 처음엔 감이 잘 오지
    않아요.

    그냥 나 편한대로 쪼개는게 아니라, 확장성 있게 쪼개는 실무적 방법을 알아가도록 해요!




  • 리액트 기초 이상을 원하는 분


    튜토리얼은 다 따라해봤고, 이제 리액트를 실전에서 활발히 쓰는 선배 개발자들의 각종 사례가 궁금한
    분들!

    순전히 학습용이 아닌, 실무 레벨에 근접한 미션으로 각종 사례, 실수, 팁 등을 우적우적
    먹고가요.



💯 이전 스터디원들의 후기도 확인하세요!

  • 수강생 코알

    일반 강의와 다르게 직접 몸으로 부딪히며 많이 배웠습니다!

    React 기초는 알고 있지만 구조를 어떻게 잡아야 할지, 어떻게 응용해야할지 막막할 때 아주 유용한 스터디가 될 것 같습니다. 기본 지식을 알려주는 강의 형식이 아니라, 주차별 미션을 수행하는 데에 필요한 개념 정도를 가이드하고 실전에서 접할만한 문제를 직접 풀어보는 방식이기 때문에 몸으로 직접 배울 수 있어서 머릿속에 잘 남게 됩니다.

    일반적인 강의와는 다르게 모르는 것도, 심지어 스터디에서 다루는 내용과 거리가 있는 질문이라도 물어볼 수 있었던 것이 가장 큰 장점인 것 같습니다. 열정적인 스터디 리더분들이 코드를 아주 꼼꼼하게 읽어주시고 리뷰를 진행해주셔서 값진 경험을 얻었습니다. 감사합니다.

    코알 ― 프론트엔드 개발자

유명 오픈소스 커미터, 프론트 / 백엔드 가리지 않고 풍부한 웹 개발 경험을 쌓아온 두 명의 리더에게 아낌없는 피드백을 얻으세요. 코드리뷰를 통해서도, 또 슬랙을 통해서도 다양한 의견을 얻을 수 있습니다.

🤵 LEADER 스터디를 이끄는 사람들

Harry & John, 해리와 존
스터디 리더 해리
Harry, 해리 현 금융 IT분야 웹 개발자

해리는 다년간의 웹 개발 경험을 쌓으며 프론트엔드, 백엔드 가리지 않고 많은 것을 경험해온 개발자입니다. 이번 스터디에서는 온라인 세션 진행과 코드리뷰를 전체 담당하며, 다양한 React 실무 경험이 있어야만 들려드릴 수 있는 조언을 아낌없이 드릴 예정입니다.

  • 다수의 자바스크립트 관련 도서 저자 활동 및 강연
  • 표준프레임워크 오픈커뮤니티 리더
  • Java, Spring 실무 경험, 강의 경력 다수
  • 전) 글로벌 스타트업 소프트웨어 엔지니어
  • 전) 국내 Top 통신사 플랫폼 엔지니어
스터디 리더 존
John, 존 현 금융 IT분야 웹 개발자

존은 골드만삭스를 포함 다양한 핀테크 스타트업에서 활발히 활동해온 풀스택 개발자입니다. (외국인이에요!) 국내 리액트 유저들에게 조금 더 글로벌한 리액트 생태계에 대한 이해를 도와드리기 위해 이번 스터디에 함께 참여합니다. 코드리뷰와 Q&A 에만 참여합니다.

  • 현 싱가폴 유망 핀테크 스타트업 근무 중
  • 전 골드만삭스 엔지니어링 팀 근무
  • 대규모 블록체인 지갑 Blockchain.info 개발 참여
  • 리액트 시각화 라이브러리 react-vis by Uber 커미터
  • 기타 다수의 오픈소스 프로젝트에 기여

이번 기수의 코드리뷰는 한글과 영문 피드백을 동시에 진행합니다.

해리는 한국어로, 존은 영문으로 남길 예정이며 만약 영문 피드백이 명확히 이해가 되지 않을 경우 얼마든지 도움을 드릴 수 있습니다(그 과정에서 영어 실력은 덤으로 얻어가세요). 평소 영어에 두려움이 있었다면 이번 기회를 통해 해리와 존에게 많은 도움을 받아보세요. 구글링 뿐만 아니라 각종 자료를 이해하는 데에 아주 큰 도움이 될 것입니다.

👩‍💻 실무 웹 개발 팀 처럼 움직이는 스터디

여러분이 어떤 회사를 가던, 특수 케이스를 제외하고는 이미 운영 중인 서비스나 개발하고 있는 기능을 토대로 뭔가를 담당하게 될 것입니다.

이미 만들어져있는 소스코드를 읽고 이해하고, 결함이 있으면 빠르게 잡아내고, 직접 기여할 수 있는 주니어 개발자가 현재 시장에는 너무나도 절실합니다. 하지만 경험이 부족한 주니어가 그런 역량을 스스로 갖추긴 힘듭니다. 그 힘듦을 알기에, 여러분의 성장에 기여하고자 우리 스터디는 이렇게 진행합니다.

  1. 스터디 리더와 스터디원들 전체가 하나의 개발팀이라고 가정
  2. 리더들이 미리 준비해둔 페이스북 프로젝트를 기반으로, 조금씩 살을 붙여나간다
  3. 매 주 리액트를 쓰는 개발자(당신!)에게 떨어지는 기능 개발 업무(미션)을 수행한다
  4. 리더들의 기존 소스코드를 읽고 컨벤션을 맞춰가고, 지식을 습득하며 실무 스킬 업
  5. 상호 정기적 코드리뷰를 진행하며 프로젝트를 완성해나간다

⚙️ 페이스북 개발 미션 + 코드리뷰를 4주간 끊임없이!

리액트와 리덕스의 꿀조합과 Best Practice를 알려드리기 위해, 실무 레벨에 가까운 미션을 준비해두었어요.

스터디 진행을 위해 미리 웹 개발 프로젝트(Facebook) 소스코드를 준비해놨어요. 이를 토대로 시작합니다. 단순히 '리더를 따라서 똑같이 이런걸 만들어봐요' 과정으로 진행하지 않습니다.

스터디원은 4주간, 해당 프로젝트에 추가할 기능 & 기술적으로 보완해야 할 부분을 주간 미션으로 받고 스스로 개발합니다. 그리고 그 과정에서 계속 코드리뷰를 진행합니다. 리더가 둘이니, 조금 더 다양한 의견을 들을 수 있어 더욱 좋을 뿐만 아니라 다른 스터디원들의 구현 사례를 보며 팁을 얻기도 좋겠죠? (정원은 약 20명을 생각하고 있어요!)

  • 1) 매 주 진행되는 실시간 세션에 참여해 미션 설명, 기술 소개, 리더의 라이브 코딩 보기
  • 2) GitHub을 활용해, 실무 개발팀들이 쓰는 방식과 동일하게 코드리뷰 받기
  • 3) Slack을 통해 리더, 스터디원들과 질의응답하고 유용한 자료 공유하기
  • 4) 스터디 리더, 스터디원들과 힘내서 1~3을 5주 내내 반복 훈련하기

🗓 1주차(세션: 11/19 20:30~)

좋은 컴포넌트 설계란 무엇일까?
미션
  • ✅ 페이스북 클론 프로젝트를 바닥부터 세팅한다: Parcel 활용
  • ✅ 클론한 페이스북 프로젝트에 리액트 적용
  • ✅ 스타일 컴포넌트 적용
  • ✅ react-router로 로그인 페이지 연결(실제 로그인 기능은 아직 X)
  • ✅ 포스트 등록, 조회 기능 구현(서버와의 연동 X)
주요 포인트
  1. React 프로젝트 세팅: Parcel로 프로젝트 구성
  2. React 컴포넌트에 대한 재정리
  3. 스타일 컴포넌트
  4. 라우터 개념, 리액트 라우터

🗓 2주차(세션: 11/26 20:30~)

리덕스(Redux) 붙이기
미션
  • ✅ 페이스북 클론에 상태관리를 위한 Redux 추가 및 Action, Store 설계
  • ✅ 포스트에 코멘트 달기 기능 추가
  • ✅ react-router-redux를 적용해보자
주요 포인트
  1. Hooks
  2. Redux 주요 개념
  3. react-redux 의 주요 개념
  4. react-router-redux

🗓 3주차(세션: 12/3 20:30~)

redux middleware 와 redux-form 적용
미션
  • ✅ 서비스 폴더를 추가하고 axios 를 사용해서 서버 API를 호출하는 서비스를 작성
  • ✅ 기존 글 작성, 글 목록 조회 기능을 서비스를 호출하는 비동기 작업을 수행하는 액션으로 전환
  • ✅ 글 작성폼과 코멘트 작성 폼에 redux-form을 적용
  • ✅ 회원 가입폼에 redux-form을 적용하여 Validation
주요 포인트
  1. middleware에 대한 소개와 Thunk를 적용하기
  2. Thunk 미들웨어에 대한 간단한 설명, 존재하는 다양한 미들웨어
  3. 서비스 개념
  4. axios
  5. redux-form

🗓 4주차(세션: 12/10 20:30~)

redux-saga 를 활용한 비동기 처리
미션
  • ✅ 로딩 컴포넌트를 추가하고 비동기 작업시에 로딩 화면을 표시
  • ✅ 로그인 기능을 추가하고 로그인이 완료되면 프로필 컴포넌트가 표시되도록 작성
  • ✅ 저장된 토큰을 사용해서 인증 헤더를 담아 포스트/댓글 API 를 호출하도록 변경
주요 포인트
  1. generator 함수
  2. redux-saga, saga 패턴
  3. 인증 정보 처리를 위한 JSON Web Token
*세션이 뭐에요?: 매 주 화요일 동일한 시간에 모두 동시 접속하여, 주차별 미션 소개 & 개념 설명 등을 포함해 스터디에서 꼭 다뤄야 하는 내용을 화상 미팅 형태로 나누는 시간입니다. 실시간성이 중요한 세션이기에 가급적 모두 참여하는걸 권장합니다. 불참한 경우 녹화본을 보면 됩니다.

리엑트 오픈소스 커미터와 함께 나만의 페이스북을 만들어보세요!

400,000원300,000원

😘 선배 개발자들이 이 스터디 주제와, 리더를 추천해요!

리더가 아닌 다른 실무 개발자들도 이 스터디 내용과 진행 방식을 신뢰하고 있어요.

주변에서 알아서 추천하는 스터디 👍


  • 개발자 마크(이웅재)

    "리액트 문법을 익혀서 컴포넌트를 만드는 것 자체는 크게 어렵지 않습니다만, 규모가 있는 웹 어플리케이션을 만들다보면 컴포넌트 설계 방법과 사용 방식이 어려워지기 시작합니다. 결국, 이미 큰 규모의 리액트 기반 어플리케이션을 제작해본 경험이 있는 분들로부터 설계 노하우를 엿보고 배우는게 가장 좋다고 생각합니다. 충분한 경험을 갖춘 두 스터디 리더와 함께 유익하고 즐거운 스터디 기간을 보낼 수 있으리라 믿어요."

    마크(이웅재) ― StudioXID, Inc 개발자

💯 생생한 후기 더 보고 가실까요?

  • 수강생 돤

    제대로 하고 있는 것인가에 대한 막연한 고민이 많았는데, 큰 도움을 받았어요

    사수가 없는 환경에서 일하고 있는데, '내가 잘 하고 있는건가?' 에 대한 의문이 들고 새로운 자극을 받고 싶어 참여했습니다. 결과적으로는 일하면서 해보기 힘든 고민을 해볼 수 있었고, 향후 학습 방향을 잡는 데도 도움이 되었습니다.

    그간 Redux 공식 문서를 Redux 사용 안내서 정도로만 생각했는데, 주간 세션에서 문서에 프론트엔드의 철학이 많이 들어 있다는 이야기를 들었습니다. 그래서 문서를 열심히 읽어보기 시작했고 많이 배웠습니다. 또 저는 TS, React, Redux, Redux-saga를 현업에서 쓰는데 과제에서 요구하는 스택은 JS, React, Redux, Redux-thunk 여서 다른 스택을 비교해보는 경험을 할 수 있었어요. 뭐가 다르고, 장단이 무엇인지 생각해보는 것이 재밌었습니다. 리더분들이 미리 작성해둔 과제 베이스 코드와 다른 스터디원들의 코드를 보면서 다양하게 영감을 얻을 수도 있었고요.

    과제를 어서 해야겠다는 생각에 구현에만 급급했던 자신이 아쉽긴 합니다. 다시 돌아간다면 구현한 컴포넌트의 책임 설계에 대해 스터디원들(+리더님들)과 적극적으로 이야기를 나눠볼 것 같아요. 리더분들 경험이 풍부해서 질문에 대한 답변을 무척 잘해주시는데 제가 활용을 잘 하진 못했다는 생각이 끝날 쯤에 들었습니다. 새로 등록하시는 분들은, 리뷰를 요청할 때 특히나 중점적으로 피드백을 받고 싶은 포인트를 꼭 노트에 서술해서 보내는게 좋겠습니다.

    돤 ― 스타트업의 잡부 프로그래머
  • 수강생 니블

    혼자 공부하면서 한계를 느껴왔는데, 좋은 자극이 되었어요

    이직 준비를 위해 React 를 공부하고 있었지만 개념을 이해하는 데에 한계를 느껴왔고, 올바른 방향으로 하고 있는건지 알고 싶어서 과정에 참여했습니다. 사실 일과 함께 참여하다보니 다른 스터디원들에 비해 뒤쳐졌었지만, 리더분들이 미리 준비해두신 소스코드를 읽고 수정해 나가면서 어떤 코드가 더 나은 코드인가에 대한 생각을 해볼 수 있었습니다. 또 실무자들이 진행하는 과정이라 실제 사용 용례나 여러가지 썰을 솔직하게 들을 수 있어서 많이 얻고 갑니다.

    니블 ― 프론트엔드 개발자

💳 스터디 참여비

2019-11-19(화) ~ 2019-12-17(화), 4주

스터디 리더 Harry & John(해리, 존)


튜토리얼까진 꼭 하고 참여하셔야 해요. (정원: 15인)

온라인 카드결제(할부), 무통장 입금 모두 가능합니다.

스터디 첫 런칭 기념 할인도 놓치지 마세요.


💵

400,000원

질문 & 답변

질문을 작성하세요.