코스 이미지

[온라인 스터디] 삽질탈출! React.js + Redux 스터디

다음 기회에 참여를 원하는 분들은 대기자 신청 을 꼭 완료해두세요! 할인 쿠폰과 함께, 꼭 빨리 연락드릴게요.




페이스북을 만들며 리액트, 리덕스 스킬업!🤓


4주간 미션 수행 + 코드리뷰로 가장 효과적인 단기 성장을 이뤄요.




자유도가 높지만 그만큼 Best Practice를 스스로 찾기 어려운 리액트!


실제 개발 단계에서 리액트 유저가 고민해야 하는 것과 길러야 하는 스킬을 안내해줄게요.


4주 미션 내용을 잘 살펴보고, 리액트와 리덕스의 꿀조합을 잘 활용하는 개발자로 성장합시다.






🗓 SCHEDULE 일정



  • 스터디 시작: 2019-07-23(화)

  • 스터디 종료: 2019-08-20(화) 총 4주

  • 문의사항: 02-539-1885, learn@programmers.co.kr

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





  • 개인 노트북


    Windows, MacOS 상관 없음




  • Slack


    실시간 채팅 및 Q&A




  • GitHub


    미션 제출 및 코드리뷰




  • School


    프로그래머스 스쿨







🤷 TARGET 참여 대상자





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


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

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




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


    기초 수준은 넘겼고, 리액트를 실전에서 활발히 쓰는 선배 개발자들의 각종 사례가 궁금한
    분들!

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




사전 필요 지식



  • 리액트, 리덕스 튜토리얼 떼고 오기. 만약 현재 실무에서 리액트를 쓰고 있거나, 도입을 고민하는 수준이 아닌 '이 기회에
    0부터 배워야지!' 라고 생각하셨다면, 스터디 시작하기 전에 기초 지식은 꼭 습득하고 참여해주세요. 미션을 수행하기에도 바쁜데, 리액트와 리덕스
    기초 내용까지 혼자 챙기려면 너무 힘들어요. 미리 워밍업을 하고 참여해야 내용을 충분히 따라갈 수 있어요.

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

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






🤵 LEADER 스터디 리더


Harry & Aiden, 해리와 에이든



스터디 리더 에이든


Aiden, 에이든 현 카카오 웹 개발자

기존 프로젝트에 리액트를 도입하면서 경험했던 것들을 돌이켜보며 미션을 짰습니다. 먼저 실수해보고 먼저
깨달았던 것들을 코드리뷰를 통해 많이 공유할게요.



  • 현 카카오 웹 개발자

  • 전) 커머스 플랫폼 웹 개발자

  • 'RxJS 프로그래밍: 75가지 핵심 문법과 예제로 익히는 RxJS 기초'(한빛미디어) 공저






스터디 리더 해리


Harry, 해리 현 금융 IT분야 웹 개발자

여러분이 원하는건 구글링으로 쉽게 나오는 그런 지식이 아닌, 실무 적용 사례나 Best Practice 일 것 같아요. 그런 내용을 많이 전달할게요.



  • 다수의 자바스크립트 관련 도서 저자 활동 및 강연

  • 표준프레임워크 오픈커뮤니티 리더

  • Java, Spring 실무 경험, 강의 경력 다수

  • 전) 글로벌 스타트업 소프트웨어 엔지니어

  • 전) 국내 Top 통신사 플랫폼 엔지니어







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


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

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



  1. 스터디 리더와 스터디원들 전체가 하나의 개발팀이라고 가정

  2. 리더들이 미리 준비해둔 페이스북 프로젝트를 기반으로, 조금씩 살을 붙여나간다

  3. 매 주 리액트를 쓰는 개발자(당신!)에게 떨어지는 기능 개발 업무(미션)을 수행한다

  4. 리더들의 기존 소스코드를 읽고 컨벤션을 맞춰가고, 지식을 습득하며 실무 스킬 업

  5. 상호 정기적 코드리뷰를 진행하며 프로젝트를 완성해나간다






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


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

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


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





  • 1) 매 주 진행되는 실시간 세션에 참여해 미션 설명, 기술 소개, 리더의 라이브
    코딩 보기




  • 2) GitHub을 활용해, 실무 개발팀들이 쓰는 방식과 동일하게 코드리뷰
    받기






  • 3) Slack을 통해 리더, 스터디원들과 질의응답하고 유용한 자료
    공유하기




  • 4) 스터디 리더, 스터디원들과 힘내서 1~3을 5주 내내 반복 훈련하기






🗓 1주차


프로젝트 세팅과 컴포넌트 쪼개기

미션


  • ✅ App 컴포넌트로 만들어진 애플리케이션을 여러개의 단위로 쪼개기

  • ✅ 상태를 가지는 컴포넌트와 가지지 않는 컴포넌트를 구분하기

  • ✅ Styled.jsx 사용하기

  • ✅ 포스트 등록과 조회 기능 구현하기(일단 서버 없이)


세션 주제(7/23 20:00~)


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

  2. 스테이트가 있는 컴포넌트와 없는 컴포넌트에 대한 설명

  3. 스타일 컴포넌트에 대한 설명

  4. Hooks: useState, useEffect, useRef 소개


create-react-app(CRA) 없이 Parcel을 활용해 프로젝트를 구성해본 뒤, 컴포넌트를 나누는
Best Practice를 알아보고 주어진 프로젝트를 직접 쪼개보도록 한다. 컴포넌트를 각각 역할에 따라 나눈다는 것은 무엇인지, 추후 기능이 추가되고
고도화될 때에도 발에 치이지 않게 설계하려면 어떻게 해야할지 함께 고민해본다.




🗓 2주차


리덕스(Redux) 붙이기

미션


  • ✅ 상태 관리를 위한 Redux를 추가하고 Action과 Store 설계하기

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

  • ✅ React-redux 설치 및 Smart & Dumb Component 에 대해 생각하기


세션 주제(7/30 20:00~)


  1. Redux의 주요 개념 설명

  2. liStore에 둘 상태와 Component에 둘 상태에 대한 기준

  3. Store 설계 관련 주의사항: 최대한 Flat하게


난이도가 높아지기 시작. 프로젝트에 리덕스를 붙이기 시작한다. Store에 둘 상태와 컴포넌트에 둘 상태에
대한 기준을 고민해본다. Store 설계는 개발자가 마음대로 해도 되지만, 지나치게 nested 되지 않고 최대한 flat 하게 관리할 수 있도록
해보자.




🗓 3주차


리덕스 미들웨어로 Side effect 처리하기

미션


  • ✅ 1~2주차에 개발한 내용을 Hooks 기반으로 모두 바꾸기

  • ✅ configureStore 에 redux-thunk 미들웨어를 추가

  • ✅ 서비스 폴더를 추가하고 axios 를 사용해서 서버 API를 호출하는 서비스를 작성

  • ✅ 기존 글 작성, 글 목록 조회 기능을 서비스를 호출하는 비동기 작업을 수행하는 액션으로 전환

  • ✅ 포스트로딩 컴포넌트를 만들고 IntersectionObserver 를 적용해서 페이지 하단에 스크롤이 오면 다음 페이지가 추가되는 기능 개발


세션 주제(8/6 20:00~)


  1. Hooks: useMemo, Custom Hook

  2. Thunk 미들웨어에 대한 간단한 설명, 존재하는 다양한 미들웨어

  3. 사가 패턴, 프로세서 매니저 패턴

  4. axios 소개

  5. 서비스 개념 소개

  6. IntersectionObserver 소개 및 이를 활용한 동적 로딩 방법 설명

비동기 처리를 위해 필요한 미들웨어 라이브러를 써보기 시작하는 구간. 여러 개의 미들웨어를 소개할테지만 그 중
처음 접근하기에 가장 좋은 thunk를 사용하도록 한다. service 개념, IntersectionObserver 를 활용한 동적 로딩 방법을
소개받고 적용해보자.




🗓 4주차


리덕스를 활용한 SPA

미션


  • ✅ 최상위 컴포넌트에 리액트 라우터로 네비게이션 구성

  • ✅ 기존 포스트 컨테이너 외에 추가적으로 Home, Login, Signup, NotFound 컨테이너를 추가

  • ✅ 인증 API를 다룰 인증 서비스를 추가하고 관련 리듀서, 액션도 작성

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

  • ✅ 회원 가입, 로그아웃 기능 추가

  • ✅ 반복되는 처리를 HoC로 분리

  • ✅ 로딩 컴포넌트를 추가하고 로그인, 회원가입 등 비동기 작업시에 로딩 화면을 표시

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


세션 주제(8/13 20:00~)


  1. Thunk 미들웨어에 대한 간단한 설명, 존재하는 다양한 미들웨어

  2. 사가 패턴, 프로세서 매니저 패턴

  3. axios 소개

  4. 서비스 개념 소개

  5. IntersectionObserver 소개 및 이를 활용한 동적 로딩 방법 설명

여러 페이지를 표현하기 위해 꼭 필요한 라우팅 작업을 위해, 써드파티 라이브러리인 react-router 를
사용해보고 지금까지 만든 프로젝트를 SPA 기반으로 바꿔나간다. 인증을 위한 JWT 소개, 리액트의 FP적 특징 중 하나인 High-order
Component를 통한 컴포넌트간 횡단 관심사 처리에 대해서도 추가적으로 알아보며 마무리! 코드리뷰는 스터디 종료일인 8월 20일까지
계속한다.



*세션이 뭐에요?: 스터디가 100% 온라인에서 진행하기 때문에, 모두가 동시접속해서 커뮤니케이션 하는 시간을 주기적으로
가집니다. 리더가 주차별 미션에 대한 소개를 진행하고, 새로 소개해야 하는 지식에 대한 설명도 진행하며, 스터디원들은 모르는 것에 대한 질문 또는 취업/이직에
대한 질문도 해볼 수 있는 시간입니다. 녹화본이 제공되지만, 실시간성이 중요한 세션이기에 가급적 모두 참여하는걸 권장합니다. 시간이 애매한 경우, 모바일로도
접속 가능합니다.





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


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


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






  • 개발자 마크(이웅재)




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


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










💳 스터디 참여비


2019-07-23(화) ~ 2019-08-20(화), 4주

스터디 리더 Harry & Aiden(해리, 에이든)




너도나도 리액트를 외치는 지금, 남다르게 배우자구요.


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


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







💵


320,000원(~마감 시)



정가 400,000원



질문 & 답변