코스 이미지

[5주 완성] React 초보 탈출하기

[5주 완성] React 초보 탈출하기

코스 대표 이미지
  • 코스 난이도

    초급
  • 사용 언어

    # javascript
    # html
    # css
    # typescript

강의 소개

📍 왜 React를 해야 하는가!

페이스북에 의해 개발된 React는 높은 유입 트래픽을 가진 웹 페이지의 동적 UI를 개발하고 운영하는 데 사용됩니다.

웹 개발자들의 반복적인 작업을 수월하게 해주는 자바스크립트 프레임워크! 그 중 에서 가장 인기 있는 것은 단연 React 라고 할 수 있습니다. React는 많은 기업 & 개발자들이 사용하고 있기 때문에 생태계가 잘 구축되어 있고 국내의 전자 정부 프레임워크에서도 채택이 되었기 때문에 국내 수요도 꾸준히 늘어날 가능성이 높습니다. 그러므로 프론트엔드 개발자로 현업을 시작하게 된다면 React를 많이 접하게 되실 겁니다.

< 다양한 프레임워크를 현업에서 바로 사용할 수 있도록 가이드 제공! >

IT 업계라면 특히나 그렇지만 웹 프론트엔드의 경우 역사가 더욱더 짧은 만큼 트렌드 변화가 빠릅니다. 취업 준비하면서 학습한 내용은 현업에선 쓰지 않는 경우도 많고 회사에서는 호환성, 생산성을 고려하여 프레임워크, 라이브러리를 선택하기 때문에 상이한 경우도 흔합니다. SPA, 사용하는 문법, 내부 구조가 다를 뿐 표현하고자 하는 목표는 동일하므로 React, Vue 등 다양한 프레임워크 사용하게 되는 것입니다. 이 때 어떻게 공부할지 망설이는 분들에게 필요한 최소한의 가이드라인을 제공해 드립니다.

스터디의 목표 🧑🏻‍🏫

React 에서 자주 사용되는 컴포넌트들을 직접 개발하며 SPA 개념에 익숙해지는 것입니다. 상황에 따라 경험하지 않은 프레임워크나 라이브러리로 개발하게 되더라도 어떻게 개발해야 할지, 어떤 식으로 개발해야 할지에 대한 고민을 해결해 나가는 과정의 첫 걸음을 안내하고 싶습니다. 🙌

✏️ 커리큘럼 상세 안내

1주차 개발환경 설정 및 React를 쓰는 이유, 트렌드 소개

  • 리액트 소개
  • VScode, Chrome 개발 환경 설정하기
  • Node 설치 및 Vite로 리액트 실행하기
  • 실무에서 주로 사용하는 개발환경 설정하기와 그 이유
  • Github 설치하기, 간단한 사용법
  • Typescript 기초 지식 익히기

2주차 컴포넌트 만들기

  • 툴팁 만들기
  • 드롭다운 만들기
  • 탭 버튼 만들기
  • 토글버튼 만들기
  • 모달(팝업) 창 만들기
  • 페이지네이션 만들기
  • 토스트 만들기

3주차 주로 쓰는 리액트 개발 프레임워크 & 라이브러리 소개

  • 리액트 라우터
  • CSS-in-JS, CSS-In-Module
  • 네트워크 통신에 대한 플러그인 소개
  • Jest

4주차 상태관리 라이브러리

  • 상태 관리 라이브러리 등장 이유와 그 개념
  • Redux 가볍게 알아보기
  • Atoms 학습
  • 다크테마, 라이트 테마 만들기
  • 앞서 만든 컴포넌트를 Recoil에 담아 폼 데이터 전송해보기
  • Selectors를 배우고 활용해보기

5주차 페이지 만들어보며 복습하기

  • Github 로그인 해보기
  • React-query 활용하여 API 요청하기
  • CRUD 만들어보기
  • Suspense 활용하여 사용자 환경 개선

🗓 스터디 기간

  • 시작 : 2022/10/19(수)
  • 종료 : 2022/11/22(화) 총 5주

📌 주간 라이브 세션 시간

  • 매 주 수요일 저녁 20시 시작, 약 2시간 소요예정
  • 10/19, 10/26, 11/2, 11/9, 11/16 총 5회

수강 후 기대 효과 및 추천 대상

이렇게 될 거예요.

  • React 프레임워크를 잘 이해하여 사용할 수 있습니다.
  • 최근 트렌드인 SPA(Single Page Application) 개념을 이해할 수 있습니다.
  • React 코드를 주도적으로 수정하고 응용하여 코드 생산성을 높일 수 있습니다.

이런 분들에게 추천해요.

  • React를 처음 접하시는 분
  • 퍼블리셔로 활동하면서 웹 프론트엔드 개발자가 되려고 하시는 분
  • SPA 웹 사이트를 개발하려고 준비하시는 분

수강 시 꼭 확인해 주세요.


강사소개

강사 프로필 이미지

독학으로 공부하여 프리랜서로 일하고 있는 웹개발자입니다.

  • 2019년 프리랜서 활동 시작
  • 개인 & 기업 홈페이지 유지 보수 및 제작
  • 호텔 홈페이지 프론트(Vue2) 개발
  • 실시간 코인차트(React) 개발
  • 노노그램(Vanila Javscript) 개발
  • React 포인트 게임 퍼블리싱
  • 크롬 익스텐션 개발 등등..

  • React 프론트앤드 개발자로 근무 중


커리큘럼

React를 쓰는 이유, 개발환경 설정 총 6개

컴포넌트 만들어보기 총 6개

주로 쓰는 리액트 개발 프레임워크 & 라이브러리 소개 총 4개

상태관리 라이브러리(Recoil) 총 6개

페이지 만들어보며 복습하기 총 4개

질문 & 답변