코스 이미지

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

이번 3기는 3/27(금) 20시에 마감되었습니다. 다음 기수 대기자 신청은 여기에서 진행해주세요. 결원이 생길 경우 등록 버튼이 활성화되오니 참고 부탁드리며, 혹여나 스터디가 시작한 이후(4/2 이후)에 등록을 원하실 경우 우측 하단의 채팅 상담을 이용하시고 등록 부탁드립니다.



이전에 대기자 신청을 완료했었으나 연락을 받지 못한 경우 우측 하단의 채팅 상담을 이용해주세요. 또한 현재 모집 중인 기수(2020/4 시작) 등록이 어려우신 경우 대기자 신청 을 해주시면 추후 연락드리겠습니다.




한+영 코드리뷰로 색다르게 배우는 리액트!


실무에서 더 나은 코드를 실현하고픈


모든 리액트 사용자들에게 추천합니다.




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


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


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




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







🗓 SCHEDULE 일정



  • 스터디 시작: 2020-04-02(목)

  • 스터디 종료: 2020-04-30(목) 총 4주

  • 문의사항: 우측 하단의 채팅 상담 이용

  • 준비물 및 사용 프로그램:





  • 개인 노트북


    Windows, MacOS 상관 없음




  • Slack


    실시간 채팅 및 Q&A




  • GitHub


    미션 제출 및 코드리뷰




  • School


    프로그래머스 스쿨






🤷 TARGET 참여 대상자



사전 필요 지식


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



  • 리액트, 리덕스 튜토리얼 떼고 오기. 튜토리얼이 그리 길지 않습니다. 조금만 시간을 내서 리액트와 리덕스가 대략적으로 어떤 기술인지 파악하고 참여하세요. 미리 워밍업을 하고 참여하는게 스스로에게 더 남는게 많습니다!

  • 리액트 공식
    튜토리얼
    : 양이 그렇게 많지 않으니 끝까지 따라해보세요.

  • 리덕스 공식
    튜토리얼
    : Basic 까지 다 보시고, Example: Todo List 까지 실습해보세요.






  • 이런 컴포넌트 구성이 최선일까? 고민하는 분


    컴포넌트의 설계의 가장 중요한 부분은 '역할을 정의' 해주는 부분이라는데, 누가 어떻게 짜느냐에 따라 방법이 다양할 수 있어 뭐가 최선인지 감을 잡기가 어려워요.

    그냥 나 편한대로 컴포넌트를 쪼개는게 아니라, 서비스의 특징을 이해하고, 확장성 있게 쪼개는 실무적 방법을 알아가도록 해요!




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


    튜토리얼은 다 따라해봤고, 이제 리액트를 실전에서 활발히 쓰는 실무자들이 각종 사례가 궁금한 분들은 리더들에게 마음껏 조언을 구하세요.

    그리고 같은 미션을 나와 다른 방식으로 구현한 동료 스터디원들의 코드를 마음껏 뜯어보며 기간 대비 많은 인사이트를 얻어보세요.






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





  • 수강생 steven


    4주라는 기간이 짧아보이지만, 역량을 키우기엔 충분했어요.


    저는 비전공자이고 독학으로 개발자가 된 케이스인데요. 현재 업무도 홀로 하고 있어서, 같은 주제를 함께 고민하고 학습할 수 있는 기회를 갖고 싶었습니다. 이 스터디에서 결과물을 만들고 피드백을 주고받는 과정은 단순한 기술의 습득을 넘어 여러 개발자의 다양한 시각과, 같은 문제에 대한 여러 해결방안을 경험할 수 있는 좋은 기회가 되었습니다.


    리더분들의 피드백을 통해 지금보다 더 효율적인 방안, 더 나은 해결방법은 무엇이 있는지 다시 생각해보면서 많은 것을 배울 수 있었습니다. 이 스터디는 개인의 노력 여하에 따라 기간 대비 개발자의 역량을 크게 향상시킬 수 있는 기회가 된다고 생각합니다.


    Steven(2기)





  • 수강생 코알


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


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


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


    코알(1기)







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



🤵 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주차(세션: 4/2 20:30~)


좋은 컴포넌트 설계란 무엇일까?

미션


  • ✅ 페이스북 클론 프로젝트를 바닥부터 세팅한다: Parcel 활용

  • ✅ 클론한 페이스북 프로젝트에 리액트 적용

  • ✅ 스타일 컴포넌트 적용

  • ✅ react-router로 로그인 페이지 연결(실제 로그인 기능은 아직 X)

  • ✅ 포스트 등록, 조회 기능 구현(서버와의 연동 X)


주요 포인트


  1. React 프로젝트 세팅: Parcel로 프로젝트 구성

  2. React 컴포넌트에 대한 재정리

  3. 스타일 컴포넌트

  4. 라우터 개념, 리액트 라우터




🗓 2주차(세션: 4/9 20:30~)


리덕스(Redux) 붙이기

미션


  • ✅ 페이스북 클론에 상태관리를 위한 Redux 추가 및 Action, Store 설계

  • ✅ 포스트에 코멘트 달기 기능 추가

  • ✅ react-router-redux를 적용해보자


주요 포인트


  1. Hooks

  2. Redux 주요 개념

  3. react-redux 의 주요 개념

  4. react-router-redux




🗓 3주차(세션: 4/16 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주차(세션: 4/23 20:30~)


redux-saga 를 활용한 비동기 처리

미션


  • ✅ 로딩 컴포넌트를 추가하고 비동기 작업시에 로딩 화면을 표시

  • ✅ 로그인 기능을 추가하고 로그인이 완료되면 프로필 컴포넌트가 표시되도록 작성

  • ✅ 저장된 토큰을 사용해서 인증 헤더를 담아 포스트/댓글 API 를 호출하도록 변경


주요 포인트


  1. generator 함수

  2. redux-saga, saga 패턴

  3. 인증 정보 처리를 위한 JSON Web Token



*세션이 뭐에요?: 매 주 목요일 동일한 시간에 모두 동시 접속하여, 주차별 미션 소개 & 개념 설명 등을 포함해 스터디에서 꼭 다뤄야 하는 내용을 화상 미팅 형태로 나누는 시간입니다. 실시간성이 중요한 세션이기에 가급적 모두 참여하는걸 권장합니다. 불참한 경우 녹화본을 보면 됩니다.





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


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


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






  • 개발자 마크(이웅재)




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


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









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





  • 수강생 FutureSeller(2기)


    예상한 것 보다 더 많은 것을 경험하고 얻었어요


    이 스터디에서 가장 인상깊었던건 Redux에 대해 심도있게 고민해보고 다뤄볼 기회를 얻은 점, 웹/JS의 기초와 철학을 짚어가며 진행되었던 점, 비동기적인 요청들을 핸들링하며 다양한 경험을 해볼 수 있었던 점입니다.


    스터디에서 진행하는 미션 외에도 현업에서 어떤 라이브러리를 선호하고 사용하고 있는지, 개발자로서 어떻게 성장해나가면 좋을지, 막연하지만 우리에게 꼭 필요한 이야기를 공유하는 값진 경험을 얻을 수 있었습니다!


    FutureSeller(2기)





  • 수강생 돤


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


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


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


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


    돤(1기)





  • 수강생 니블


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


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


    니블(1기)





  • 수강생 손지호(2기)


    '더 잘 하고 싶다' 는 막연한 생각에 방향이 잡혔어요


    저는 React 튜토리얼 정도를 돌려본 상태였는데, 계속 더 깊게 공부하고 제대로 써보고 싶은 열망이 컸습니다. 그 때 제게 딱 맞을만한 스터디로 보여서 참여했구요.


    다루는 내용이 기초보다는 높은 수준이지만, 미션을 하다보면 자연스레 기본적인 것도 많이 얻을 수 있게 됩니다. Redux가 무엇인지, Redux-Saga와 같은 라이브러리도 대체 왜 필요한지 몸소 느끼게 되었고요. 그리고 앞으로 무엇을 더 공부할지 방향을 잡을 수 있어서 좋았어요.


    손지호(2기)









💳 스터디 참여비


2020-04-02(목) ~ 2020-04-30(목), 4주

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




이전 기수 스터디원들의 후기도 확인하셨나요?


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


할인은 늘 마감 기한이 있으니, 일정 확인해주세요!







💵


340,000원(~3/27 24시 까지)


정가: 400,000원





질문 & 답변