Thumbnail
개발 · 프로그래밍 프론트엔드

지금 바로 React 시작하기

(4.7)
7개의 수강평 ∙ 306명의 수강생
110,000원

월 22,000원

5개월 할부 시
지식공유자: The Oreum
총 64개 수업 (8시간)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

🤔 React를 A-Z까지 공부하고 싶진 않고, 바로 적용할 수 있는 코드를 원하시나요!? 잘 오셨습니다! A-Z까지 강의해 주시는 것은 다른 좋은 강의 구매하시고, 여기서 실용적인 것만 얻어 가세요! 지금 바로! 이 강의로 React에 대한 기본 개념과 활용법을 익혀 쉽고 빠르게 나만의 프로젝트를 만들어보세요

✍️
이런 걸
배워요!
React의 개념과 사용하는 이유
React 프로젝트 생성
JSX 기본 문법
조건에 따른 Component(컴포넌트) 만들기
Router 사용법
여러가지 Hook의 개념과 실습
Component의 라이프 사이클
Redux의 개념과 활용법

React를 공부할 때?
바로 지금, Right Now! 🦾

(커리큘럼 추가 예정)

지금 바로 시작하는 React 🏃

지금 바로 실무에 투입되어야 하나요?
지금 바로 프로젝트를 하셔야 하나요?
지금 바로 과제를 제출하셔야 하나요?
지금 바로 React를 경험해보고 싶으신가요?

그럼 지금 바로 React 시작하기와 함께하세요! 만들어보면 알 수 있습니다!

파일:React-icon.svg

React?

React는 프론트엔드 개발을 위한 '라이브러리'입니다.
컴포넌트 기반으로 다양한 형식의 데이터를 반영하여 재사용이 가능하며,
필요한 만큼 효율적으로 다양한 기능을 사용할 수 있습니다.

React를 사용하는 이유 📌

컴포넌트 기반으로
높은 재사용과 유지보수성

router를 이용하여
SPA 개발에 용이

커뮤니티와 자료가 많아
개발 확장성이 높음


이 강의의 특징 ✨

빠르게 보고
적용하세요!

중요한 핵심 개념만을 다루는 다양한 예제를 준비하였습니다. 대부분 ‘이론 → 프로젝트’ 강의가 아니라 ‘프로젝트→이론’으로 진행됩니다.

강의 자료에서
편하게 찾아보세요!

검색하지 않아도 이해하실 수 있도록 강의 Notion 페이지를 제공합니다.

기초 강의가
아닙니다!

이 강의에서는 '실용적인' 문법만 빠르게 알려드립니다. HTML, CSS, JS를 알고 있다는 전제하에 수업이 진행됩니다. 30분 요약 강좌 시즌1을 참고해주세요. 리액트의 A부터 Z까지 알고 싶으신 분은 타 React 기초 강의를 수강하고 오시기를 권해드립니다. :)


강의에서 무엇을 배우나요? 🕵️‍♀️

  1. React의 개념과 사용하는 이유
  2. React 프로젝트 생성
  3. JSX 기본 문법
  4. 조건에 따른 Component(컴포넌트) 만들기
  5. Router 사용법
  6. 여러 가지 Hook의 개념과 실습
  7. Component의 라이프 사이클
  8. Redux의 개념과 활용법
  9. Project 1
  10. Project 2

📢 수강 전 참고해주세요!

  • VSC(Visual Studio Code)를 사용합니다. (VSC의 유용한 Extension, Extension 사용법을 알려드리지만 VSC 설치부터 진행하지 않습니다.)
  • 일단 만들어보고 이론은 차차 알아가길 원하시는 분은 Project부터 보시길 권해드립니다!

이런 분들께 추천해요 🙋

React를 배우고 싶은데 어떻게
시작해야 할지 모르겠는 분

지금 바로 React 프로젝트를
경험해보고 싶은 분

예제와 함께 중요 핵심 개념을
빠르게 학습하고 싶으신 분


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
React를 배우고 싶은데 어떻게 시작해야할지 모르겠는 분
지금 바로 React 프로젝트를 경험해보고 싶으신 분
예제와 함께 중요 핵심 개념을 빠르게 학습하고 싶으신 분
📚
선수 지식,
필요한가요?
HTML, CSS, JavaScript 기본 문법

안녕하세요
The Oreum 입니다.
The Oreum의 썸네일

더 오름은 제주코딩베이스캠프의 프리미엄 브랜드로 주로 실무, 취업과 연관된 강의를 제작하고 있습니다.

제주코딩베이스캠프에서 이론적인 지식을 획득하셨다면, 더 오름의 실전 강의들을 통해 포트폴리오와 실무 능력들을 모두 가져가세요! 

" 2%를 채우기 위한 여러분의 집념과 열정을 응원합니다! "

공동 지식공유자: 제주코딩베이스캠프의 썸네일 Hojun Lee의 썸네일
커리큘럼 총 64 개 ˙ 8시간의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 지금 바로 React 시작하기
필수 설치 프로그램 + 내 웹페이지에서 1분만에 도입해보기 미리보기 10:33 React 사용 이유와 실용 예제 1 - 페이지 구성 요소의 컴포넌트화 미리보기 11:45
React 사용 이유와 실용 예제 2 - 나아가기 07:56
React 사용 이유와 실용 예제 3 - 실용 예제(쇼핑몰 만들기) 11:49
React 사용 이유와 실용 예제 4 - 실용 예제 고도화 작업 16:55
React 프로젝트 생성, 배포하기 13:48
JSX 13:16
연습문제 풀이 03:08
Fragment 04:32
Component 만들기 14:21
Hook - useState 08:07
연습문제 풀이 03:13
React에서 이벤트 처리하기 11:11
컴포넌트 리스트 만들기 07:16
연습문제 풀이 01:39
컴포넌트 조건에 따라 다르게 만들기 12:16
스타일 적용하기 1 12:46
스타일 적용하기 2 04:50
스타일 적용하기 3 02:47
Render Props - 합성 컴포넌트 06:55
React Router 13:57
Hook - useEffect 08:11
Hook - useRef 08:47
Hook - useMemo 15:56
Context(ContextAPI) 05:42
Hook - useContext 03:25
(참고) 라이프 사이클 - class component 02:30
useState - Lazy initailize 02:28
Functional Component - Hook Flow 10:42
Hook - Custom Hook 04:23
섹션 2. 지금 바로 Redux 시작하기
Redux란? 15:45
Redux, 이것만은 알고 갑시다! 02:22
Node 환경에서 리덕스 사용하기(vanilla JS) 05:42
리액트에서 리덕스 사용하기(React) 11:53
리덕스 툴킷 08:36
섹션 3. Project 1 | 쇼핑몰 메인페이지 구현
요구사항 설명 02:12
기본 세팅 08:30
data 연결과 css 세팅 13:50
Hook 사용 11:17
다른 풀이 04:55
섹션 4. Project 2 | My Blog 만들기
요구사항 설명 01:53
route 구현 07:21
폴더와 파일세팅 05:30
assets와 data 세팅 04:22
axios와 json server 12:09
homepage - header 11:07
homepage - banner 03:50
homepage - about 21:49
homepage - footer 01:06
homepage - css 적용 08:28
homepage - styeld-components 적용 08:15
섹션 5. 부록
npm 미리보기 10:47
state 끌어올리기(lifting-state-up) 04:43
axios 04:21
json server 09:53
리액트 프로젝트 코드리뷰 13:19
useLayoutEffect와 useEffect차이(깜빡임 없애기) 06:06
React Developer Tools 03:23
강의 게시일 : 2022년 07월 20일 (마지막 업데이트일 : 2022년 09월 01일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
7개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
성훈 thumbnail
리액트를 시작하는데 두려움이 컸었는데 강의를 보면서 두려움이 많이 사라졌습니다!
2022-08-25
cw_91 thumbnail
리액트를 처음 접하는 분들께 좋은 강의인 것 같습니다. 수업 시간도 길지 않고 한 강의당 양이 많지 않아 쪼개어 공부하기 좋습니다. 강의를 듣고 난 후 쇼핑몰과 블로그 페이지의 결과물이 생겨 뿌듯합니다.
2022-09-25
FE7 thumbnail
여러가지 예제들과 함께 제공되는 강의. 덕분에 그냥 이론을 공부하는 것 보다 이해가 더 잘됐습니다. 완강을 향해 달리겠습니닷! 감사합니다! 별 다섯개 드세요.
2022-09-25
miniapp thumbnail
강의가 전체적으로 너무 찍먹입니다...
2022-09-13
Eun thumbnail
프로젝트에 도움이 되는 예제로 실습해 볼 수 있어서 좋았어요!
2022-11-26