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

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

기초부터 심화까지, 프로젝트를 진행하며 React를 배워봅시다!

Lecture Introduction
Difficulty
Normal
Category
Programming - Web Programming
Tag
Web, Programming, React, React 가지고 놀아보기, Frontend
Certificate
You can issue a certificate of completion
Target Audience
- 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








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

주현도

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

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


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

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








아무리 주니어 개발자가 만든 강의라 하더라도

충분히 좋은 강의가 될 수 있다는 것을 보여드리고 싶습니다

강의자와 수강자 모두 성장하는 그런 강의가 됐으면 좋겠습니다

동영상도 차츰 업데이트 해나갈 예정입니다!

동영상을 모두 업로드하기 전까지는 무료로 강의를 공개할 생각입니다




Preview
Expand All
  • 01
    React 개념 및 개발 환경 설정
  • React는 왜 만들어졌는가?
    React의 특징 및 장점
    React 개발 환경 설정
Curriculum
Expand All
  • 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 컴포넌트 변경하기
Instructor Introduction
user
주현도Teacher

Lecture Reviews
  • No reviews have been written.

Free


Average Rating
5
Difficulty
Normal
Lecture Period
Unlimited
URL