패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

가장 핫한 FE 라이브러리🔥, React 가지고 놀아보기

기초부터 심화까지, 프로젝트를 진행하며 가장 핫한 프론트엔드 라이브러리인 React를 배워봅시다!

강좌 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
리액트, 자바스크립트
수료증
발급 가능
추천 수강대상
- React를 활용하여 웹 개발을 하고 싶어하시는 분
- 단순 HTML, CSS, Javascript로 웹 개발하는 데 질리신 분
- 동영상보다 줄글로 된 설명으로 학습하는 것이 더 효과적이신 분


※ 본 강좌는 텍스트로 이루어진 강좌입니다 ※



이게 웹 페이지를 만드는 데 필요한 코드라고요??🤔

네 맞습니다! 이 강의를 수강하면서 작성하게 될 코드랍니다 :)







이 강의에서 배울 프론트엔드 라이브러리, React

어떻게 하면 조금 더 쉽게 배울 수 있을까?


그런 고민으로부터 나온 강의가 바로

가장 핫한 프론트엔드 라이브러리🔥, React 가지고 놀아보기!

(실제로 React의 인기는 엄청나게 높습니다)





그러면 우리는 여기서

무엇을, 어떻게, 얼마나 배울까요?




🌈무엇을?


1. React 기초 문법

2. React Component

3. Component Styling

4. State & Props

5. LifeCycle API

6. React Hooks

7. React Redux

8. Connect with Backend Server



⁉️


뭘 배운다는 건가요...?


1. React를 사용하여 어떻게 코드를 작성하는지

2. 어떻게 웹 페이지에 스타일을 입히는지

3. 어떻게 여러 값을 관리하고, 기능을 구현하는지

4. 어떻게 백엔드 서버와 연결하는지




☀️어떻게?



첫 번째로,

프로젝트를 통해서!

이 강좌를 통해 프로젝트를 두 개 만들어봅시다.


1. Counter


2. PhoneBook



두 번째로,

반복 학습을 통해서!


몇몇 개념에 한하여 처음으로 입문할 때에는

Counter 프로젝트를 통해 쉽게!


입문을 끝내고 응용 단계에 들어갈 떄에는

PhoneBook 프로젝트를 통해 자세하게!




🔥얼마나?


처음부터 끝까지?!

기초부터 심화까지?!


아마도 아래 문장이 제일 적절하지 않을까 싶네요

좁고 깊게가 아닌, 넓고 얕게


React에서 필수적인 내용은
거의 다 배운다고 생각하시면 됩니다!

하지만 어떤 원리로, 왜 그렇게 작동하는지에 대한
설명을 자세하게 담지는 않았습니다.


좁고 깊게 들어가는 것에 대한 선택은 강의를 듣
 여러분들이 선택하시는 것이라 생각합니다 :D







이 강의를 제작한 저는 누구일까요?😄

주현도

한국디지털미디어고등학교 졸업

서울시립대학교 수학과 재학 중


스타트업 크날개발 웹 프론트엔드 개발자

서울시립대학교 멋쟁이 사자처럼 강의자



체험하기
모두 펼치기
교육 과정
모두 펼치기
  • 01
    React 개념 및 개발 환경 설정
    • React는 왜 만들어졌는가?
    체험하기
    React의 특징 및 장점
    체험하기
    React 개발 환경 설정
    체험하기
  • 02
    React 개발 준비 및 기초 문법
    • React Project Setting
    React Project 구조
    전화번호부 따라 쳐보기
    React 기초 문법
  • 03
    React Components
    • Class Component
    Functional Component
  • 04
    Split Component & Styling
    • Split Component
    Split Component - InputBox
    Split Component - PhoneList
    Split Component - PhoneItem
    Component Styling - CSS
    Component Styling - Sass
    Component Styling - styled-components
  • 05
    State & Props
    • State 정의 방법
    State 활용 방법
    Props를 받을 컴포넌트 만들기
    Props 활용 방법
  • 06
    State & Props 전화번호부에 적용하기
    • 전화번호부 데이터 화면에 출력하기
    Input 값 State로 관리하기
    dummyData.js 파일 변경하기
    전화번호부 데이터 추가 함수 만들기
    전화번호부 데이터 삭제 함수 만들기
  • 07
    LifeCycle API
    • LifeCycle API란?
    Component Mount LifeCycle API
    Component Update LifeCycle API
    Component Unmount LifeCycle API
    Counter 프로젝트에 만들어보기
  • 08
    React Hooks
    • useState
    useEffect
  • 09
    React Hooks 전화번호부에 적용하기
    • Custom Hooks으로 Input 값 관리하기
    전화번호부 목록 관리 함수 수정하기
  • 10
    React Redux
    • Redux를 왜 사용할까?
    Redux 용어 정리
    Redux의 3가지 원칙
    Counter에 Redux 적용하기 (1)
    Counter에 Redux 적용하기 (2)
    Counter에 Redux 적용하기 (3)
  • 11
    React Redux 전화번호부에 적용하기
    • 전화번호부에 Redux 적용하기 (1)
    전화번호부에 Redux 적용하기 (2)
    전화번호부에 Redux 적용하기 (3)
  • 12
    Django Server 환경 설정
    • Django Server 환경 설정
  • 13
    Counter 프로젝트 기능 추가 및 Backend와 연결하기
    • 라이브러리 설치 및 디렉토리 구조 변경하기
    CountInput 컴포넌트 만들기 및 Hooks 적용하기
    Axios로 API 연결 및 Redux 코드 변경하기
    App 컴포넌트 변경하기
  • 14
    전화번호부 프로젝트 Backend와 연결하기
    • 라이브러리 설치 및 디렉토리 구조 변경하기
    useInput Custom Hooks 만들기
    Axios로 API 연결 및 Redux 코드 변경하기
    App 컴포넌트 변경하기
마지막 업데이트|2021년 07월 30일
강의자 소개
주현도캡틴
안녕하세요. 구름에듀 캡틴 주현도입니다. 함께 학습을 시작해봐요!
강좌 후기
무료
평균평점
4.8
난이도
보통
수강기간
평생 무제한