Thumbnail
BEST 개발 · 프로그래밍 프론트엔드
만들고 비교하며 학습하는 리액트 (react)
(4.8)
25개의 수강평 ∙ 438명의 수강생

55,000원

지식공유자 : 김정환
총 96개 수업˙총 8시간 44분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 767 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

✍️
이런 걸
배워요!
웹 어플리케이션 개발 실습을 통해 React.js의 핵심 개념 이해
순수 JS 개발과 리액트 개발의 비교
실습을 통한 디자인 패턴 적용의 이점

프론트 실무 최고 인기 리액트(React), 
강의 하나로 확실하게 잡아보세요! 🚩

혹시, 이런 고민 중이시라면 주목!💡 

Case 1 
리액트가 가장 인기라는데, 어디서부터 시작할지 모르겠어요!

"프론트엔드 채용 시장에서 가장 인기가 많은 도구인 리액트,
하지만 막상 시작하려니 어디서부터 어떻게 해야 할 지 감이 오지 않습니다."

Case 2 
나의 리액트 개발 프로세스에 대한 확신이 없어요.

"리액트를 활용해 어찌저찌하여 개발을 했지만,
이 방법이 과연 효율적인지 감이 오지 않습니다.


리액트 기초부터 실전까지, 확실히 알려드려요 🎯

어 저 이야기. 내 이야기 같다구요? 그러면 이 강의와 함께 하셔야겠네요!
이 강의의 목표는 다음과 같아요.

  • 결과물을 JS와 리액트 버전으로 만들며 리액트의 역할과 장점을 한눈에 깨달을 수 있어요.
  • 실습 어플리케이션 코딩과 12번의 과제를 통해 이론을 몸과 머리로 익힐 수 있어요.

이런 분들이 들으면 좋아요! 🧑‍🎓

  • 리액트 공식 문서를 읽어 보았지면 여전히 어디서부터 시작해야할지 막막한 난감 유형
  • 이론보다는 헬로월드로 시작하는 것을 선호하는 실행가 유형
  • 리액트를 써보긴 했는데 도대체 어떤 점이 좋은지 꼭 짚어 설명하기 어려운 알쏭달쏭 유형

제 강의만의 특징 😎 

  • React.js의 특징을 명확히 이해할 수 있어요!
    • 순수 자바스크립트와 리액트 개발을 비교하면서 리액트의 특징을 더욱 확실하게 이해해보세요.
  • 리액트 공식 문서를 바탕으로 한 밀도 있는 수업!
    • 리액트 공식 문서가 말하는 주요 개념을 바탕으로 구성된 "리액트 핵심 수업"이에요.
  • 철저한 실습 위주의 강의에요!
    • 쇼핑몰 검색 화면을 직접 코딩하면서 만들고 12가지 실습 과제를 풀면서 몸으로 익힐 수 있어요.
  • 각 영상마다 Git Branch를 준비했어요.   
    • 실습 중 따라오기 어렵거나 실습 없이 수업하시는 분들을 위해 영상마다 깃 브랜치를 준비했어요.
    • 매 영상마다 사용한 코드를 브랜치 이동으로 간편하게 볼 수 있어요.
  • 복습 후 바로 볼 수 있는 강의노트 제공!
    • 수업에서 사용한 강의 노트는 전부 블로그에서 얻을 수 있어요. (링크: 🖋김정환 블로그)
    • 수업 전에 전체 글을 가볍게 읽고 시작하면 좋아요. 예습👍
    • 수업 후에도 읽으면 더 좋아요. 복습👍👍

이런 내용을 배워요 📖 

  1. 준비편
    • 디자인과 요구사항 분석 문서를 보면서 수업에서 만들 결과물의 미리 소개해요.
    • 순수 자바스크립트와 MVC 디자인 패턴으로 결과물을 만들며 UI 라이브러리의 필요성을 깨달아요.
  2. 소개편
    • 리액트의 리액티브와 가상돔 개념을 소개하고 리액트를 사용하는 이유에 대해 알 수 있어요.
    • 리액트 개발에 사용되는 몇 가지 도구의 역할과 사용법을 익히고 실습을 준비해요.
  3. 사용편 1
    • 리액트를 이용해 결과물을 다시 처음부터 구현하면서 리액트의 기본 개념을 익힐 수 있어요.
    • State, 이벤트 처리, 조건부 렌더링, 폼, 리스트와 키 등 리액트 핵심 원리를 이해할 수 있어요.
  4. 사용편 2 (컴포넌트)
    • 리액트 컴포넌트를 소개하고 이전 편에서 만든 결과물을 리액트 컴포넌트로 개선해요.
    • 클래스/함수 컴포넌트, State 끌어 올리기, 상속, 조합 등 컴포넌트를 다루면서 마주치는 이슈를 배울 수 있어요.

기본 화면

검색 결과 화면

최근 검색어 화면

저를 소개합니다 🧑‍🏫

김정환

웹 기술을 학습하고 정리하는 걸 좋아하는 실무 개발자
웹 기술 및 개발자로서의 생각을 담은 기술 블로그를 운영하고 있어요.

학습한 기술과 실무에서 배운 노하우를 모아 발표나 강의 형식으로 공유하는 활동도 하고 있어요.

우아한형제들에서 프론트엔드 개발자로 일하고 있어요.

리액트 기술과 관련된 컨텐츠도 작성했어요.


수강생 분들을 위한 Q&A 🙋 

Q. 비전공자도 들을 수 있는 강의인가요?

아니요. 웹개발에 대한 경험이 조금은 있어야 수강할 수 있습니다.

Q. 왜 리액트를 배워야 하나요?

최근 채용 시장에서는 모던 웹 프레임워크 지식을 가진 개발자를 찾고 있습니다.

가장 인기있는 리액트 기술 역량을 갖춘다면 많은 회사에서 찾는 인재가 될 수 있을 거예요.

Q. 리액트를 배우면 뭐가 좋은가요?

유저 인터페이스 개발에 대한 공통 문제를 리액트가 상당 부분 해결해 주는데요.

개발자는 조금 더 비즈니스 로직 개발에 집중할 수 있고 빠르게 제품을 만들어 낼 수 있는 힘을 얻을 수 있어요.

Q. 강의를 듣기 전, 준비해야 할 것이 있나요?

한 번이라도 웹 개발에 대한 경험이 있어야 수업을 듣는 의미가 있어요.

HTML, JavaScript 문법을 숙지하고 있다는 전제하에 수업을 진행하기 때문이죠.

아직 웹 기초가 부족하신 분들은 먼저 학습하신 다음에 수강해 주실 것을 추천드려요.

Q. 수업 내용을 어느 수준까지 다루나요?

리액트 공식 문서의 주요 개념과 고급 안내서 일부를 바탕으로 준비한 내용이에요.

리액트에서 핵심이라고 할만한 부분을 다루고 있습니다.

Q. 수강 관련 참고 사항이 있나요?

수업에서 사용할 도구는 4가지예요: Node.js, 개발 에디터, 웹 브라우저, Git.

미리보기 수업에서도 확인할 수 있어요. (링크: 🎥 수업 미리보기)

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트 공식 문서를 읽어 보았지면 여전히 어디서부터 시작해야할지 막막하신 분들
이론보다는 "Hello world" 로 시작하는 것을 선호하시는 분들
리액트를 써보긴 했는데 도대체 어떤 점이 좋은지 꼭 짚어 설명하기 어려운 분들
📚
선수 지식,
필요한가요?
웹 개발에 대한 기초 지식이 있어야 수강할 수 있어요.
한 번이라도 웹 개발을 해보신 분이라면 수강할 수 있어요

안녕하세요
김정환 입니다.
김정환의 썸네일

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 점심 시간마다 확인하고 답변 드리겠습니다.

커리큘럼 총 96 개 ˙ 8시간 44분의 수업
이 강의는 영상, 수업 노트, 첨부 파일, 미션이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 준비편 - 순수JS
[순수JS 1] MVC 패턴 미리보기 05:11 [순수JS 1] 폴더 구조 미리보기 16:43 [순수JS 1] 검색폼 1 미리보기 09:10 [순수JS 1] 검색폼 2 미리보기 06:32 [순수JS 1] 검색폼 3 미리보기 08:40 [순수JS 1] 검색폼 4(실습) 미리보기 02:58
[순수JS 1] 검색폼 4(풀이) 05:09
[순수JS 1] 검색결과 1 15:22
[순수JS 1] 검색결과 2(실습) 02:03
[순수JS 1] 검색결과 2(풀이) 03:39
[순수JS 1] ⭐중간정리 02:45
[순수JS 2] 탭 1 11:11
[순수JS 2] 탭 2 06:07
[순수JS 2] 탭 3(실습) 02:16
[순수JS 2] 탭 3(풀이) 05:35
[순수JS 2] 추천 검색어 1 11:52
[순수JS 2] 추천 검색어 2 05:35
[순수JS 2] 추천 검색어 3(실습) 01:57
[순수JS 2] 추천 검색어 3(풀이) 03:35
[순수JS 2] 최근 검색어 1 14:42
[순수JS 2] 최근 검색어 2 09:07
[순수JS 2] 최근 검색어 3(실습) 01:31
[순수JS 2] 최근 검색어 3(풀이) 05:09
[순수JS 2] ⭐중간정리 01:47
🌟최종 정리 01:33
섹션 2. 소개편
[React 소개] 데이터를 화면에 출력하는 방법 04:25
[React 소개] 리액티브 06:38
[React 소개] 가상돔 05:56
[React 소개] ⭐️중간정리 02:25
[헬로월드] Hello world 03:04
[헬로월드] React 05:48
[헬로월드] ReactDOM 02:56
[헬로월드] Babel 03:20
[React 시작하기] 템플릿 언어 03:50
[React 시작하기] JSX 03:43
[React 시작하기] ⭐중간정리 02:01
[실습에 맞게 개선하기] 시작점 04:30
[실습에 맞게 개선하기] 헤더 구현 03:37
🌟최종 정리 01:28
섹션 3. 사용편 1 - 리액트
[검색폼 1] Input 요소 사용하기 06:01
[검색폼 1] 리액트 컴포넌트 04:50
[검색폼 1] 입력 값을 기억하기 - State 03:44
[검색폼 1] 상태를 갱신하기- 이벤트 처리 07:40
[검색폼 1] ⭐중간정리 01:52
[검색폼 2] 조건부 렌더링 07:10
[검색폼 2] 폼 제출 03:25
[검색폼 2] 폼 초기화(실습) 02:05
[검색폼 2] 폼 초기화(풀이) 07:08
[검색폼 2] ⭐중간 정리 03:02
[검색결과] 검색 결과가 없을 경우 03:36
[검색결과] 검색 결과가 있을 경우 11:35
[검색결과] 리스트와 키 07:53
[검색결과] 검색결과 초기화(실습) 02:45
[검색결과] 검색결과 초기화(풀이) 03:05
[검색결과] ⭐중간 정리 02:14
[탭] 탭 보여주기 04:18
[탭] 기본 탭 설정과 탭 선택(실습) 02:17
[탭] 기본 탭 설정과 탭 선택(풀이) 06:04
[추천/최근 검색어] 추천 검색어 1 08:58
[추천/최근 검색어] 추천 검색어 2(실습) 01:07
[추천/최근 검색어] 추천 검색어 2(풀이) 03:30
[추천/최근 검색어] 최근 검색어 1 08:25
[추천/최근 검색어] 최근 검색어 2 06:08
[추천/최근 검색어] 최근 검색어 3(실습) 01:41
[추천/최근 검색어] 최근 검색어 3(풀이) 05:08
[추천/최근 검색어] ⭐중간 정리 06:36
🌟최종 정리 06:27
섹션 4. 사용편 2 - 컴포넌트
[소개] 컴포넌트를 사용하는 이유 03:50
[소개] 작은 컴포넌트로 나누기 04:13
[소개] 프로젝트 구조 변경하기 10:07
[소개] Header - 함수 컴포넌트 06:03
[소개] 리액트 개발 도구 02:27
[소개] 재활용 가능한 컴포넌트로 개선 - Props 05:46
[소개] ⭐중간정리 02:32
[구현하기 1] SearchForm 1 07:05
[구현하기 1] SearchForm 2 11:21
[구현하기 1] State 끌어올기 13:12
[구현하기 1] SearchResult 12:07
[구현하기 1] Tabs 10:00
[구현하기 1] ⭐중간정리 03:18
[구현하기 2] KeywordList, HistoryList 02:10
[구현하기 2] 상속 1 12:01
[구현하기 2] 상속 2(실습) 01:38
[구현하기 2] 상속 2(풀이) 07:34
[구현하기 2] 조합: 컴포넌트 담기 1 10:45
[구현하기 2] 조합: 컴포넌트 담기 2(실습) 01:00
[구현하기 2] 조합: 컴포넌트 담기 2(풀이) 04:53
[구현하기 2] 조합: 특수화 1 09:22
[구현하기 2] 조합: 특수화 2(실습) 01:22
[구현하기 2] 조합: 특수화 2(풀이) 03:49
[구현하기 2] ⭐중간정리 03:34
🌟최종 정리 05:49
강의 게시일 : 2021년 05월 04일 (마지막 업데이트일 : 2021년 05월 04일)
수강평 총 25개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
25개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
세계수 thumbnail
리액트에 입문하는데 있어 최고의 강의입니다. 단순히 리액트만 사용하는게 아니라 바닐라JS로 먼저 만들어보는 작업으로 인해 리액트가 제공하는 기능이 얼마나 훌륭한지 깨닫게 되었습니다. 거창하게 이것저것 붙여 많은 양을 설명하는게 아니라 정말 리액트공부에 있어 필요한 것만 뽑아 담백하게 알려주어서 리액트 입문하시는 분들은 꼭 이 강의로 시작하세요!
2021-09-18
Go9 thumbnail
리액트를 처음 공부하며 어떻게 시작해야 할지 어려움이 있었는데, 간결하게 강의를 구성해주신 덕분에 많은 도움을 받고 있습니다. 한 강의 당, 그리고 전체 강의 구성이 길지 않은 덕에 여러 번 반복해서 볼 수 있을 것 같다는 점도 장점입니다 :) 한편, 바닐라 자바스크립트도 다뤄주심으로 리액트가 어떤 문제점을 해결하기 위해 나타난 프레임워크인지 파악하기에 수월했습니다. 하지만 아직 둘 다 어려운 건 마찬가지네요.. ㅎ_ㅎ 이후로도 여러 번 보고 구현해가며 프론트엔드 개발 기초를 잘 다지도록 해야겠습니다. 좋은 강의 감사합니다.
2021-06-01
현중박 thumbnail
인프런에서 결제하는 첫 강의인데 프론트앤드 개발자를 목표로 하면서 공부하는데 너무나도 좋은 경험이 된거 같습니다. 너무 감사합니다
2021-07-10
arcturus thumbnail
이미 react 프로젝트에 참여한 개발 경험이 있는데, 조금 시간이 지나기도 했고, 다시 한번 강의를 들으면서 기초 공부를 하는데에 많은 도움이 되었습니다. 감사합니다.
2021-06-02
김진수 thumbnail
바닐라 JS로 실습 후 리액트를 사용해서 이해하기 더 쉬웠습니다
2021-07-08

55,000원

폴더에 추가 767 공유
지식공유자 : 김정환
총 96개 수업˙총 8시간 44분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스