Thumbnail
BEST 개발 · 프로그래밍 프레임워크 및 라이브러리
만들면서 학습하는 리액트 (react)
(4.7)
13개의 수강평 ∙ 257명의 수강생

55,000원

지식공유자 : 김정환
총 96개 수업˙총 8시간 44분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 574 공유
초급자를 위해 준비한
[프레임워크 및 라이브러리, 웹 개발] 강의입니다.

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

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

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

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

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

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

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

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

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

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

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

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

제 강의만의 특징 😎 

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

이런 내용을 배워요 📖 

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

기본 화면

검색 결과 화면

최근 검색어 화면

저를 소개합니다 🧑‍🏫

웹 기술을 학습하고 정리하는 걸 좋아하는 실무 개발자

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

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

  • Q. 비전공자도 들을 수 있는 강의인가요?
    • A. 아니요. 웹개발에 대한 경험이 조금은 있어야 수강할 수 있습니다.
  • Q. 왜 리액트을 배워야 하나요?
    • A. 최근 채용 시장에서는 모던 웹 프레임워크 지식을 가진 개발자를 찾고 있습니다.
    • A. 가장 인기있는 리액트 기술 역량을 갖춘다면 많은 회사에서 찾는 인재가 될 수 있을거에요.
  • Q. 리액트를 배우면 뭐가 좋은가요?
    • A. 유저 인터페이스 개발에 대한 공통 문제를 리액트가 상당 부분 해결해 주는데요.
    • A. 개발자는 조금 더 비지니스 로직 개발에 집중할 수 있고 빠르게 제품을 만들어 낼 수 있는 힘을 얻을 수 있어요.
  • Q. 강의를 듣기 전, 준비해야 할 것이 있나요?
    • A. 한 번이라도 웹 개발에 대한 경험이 있어야 수업을 듣는 의미가 있어요.
    • A. HTML, JavaScript 문법을 숙지하고 있다는 전제하에 수업을 진행하기 때문이죠.
    • A. 아직 웹 기초가 부족하신 분들은 먼저 학습하신 다음에 수강해 주실것을 추천 드려요.
  • Q. 수업 내용을 어느 수준까지 다루나요?
    • A. 리액트 공식문서의 주요 개념과 고급 안내서 일부를 바탕으로 준비한 내용이에요.
    • A. 리액트에서 핵심이라고 할만한 부분을 다루고 있습니다.
  • Q. 수강 관련 참고 사항이 있나요?
    • A. 수업에서 사용할 도구는 4가지에요. Node.js, 개발 에디터, 웹 브라우져, Git.
    • A. 미리보기 수업에서도 확인할 수 있어요. (링크: 🎥 수업 미리보기)

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트 공식 문서를 읽어 보았지면 여전히 어디서부터 시작해야할지 막막하신 분들
이론보다는 "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일)
수강평 총 13개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
13개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
arcturus thumbnail
이미 react 프로젝트에 참여한 개발 경험이 있는데, 조금 시간이 지나기도 했고, 다시 한번 강의를 들으면서 기초 공부를 하는데에 많은 도움이 되었습니다. 감사합니다.
2021-06-02
현중박 thumbnail
인프런에서 결제하는 첫 강의인데 프론트앤드 개발자를 목표로 하면서 공부하는데 너무나도 좋은 경험이 된거 같습니다. 너무 감사합니다
2021-07-10
Go9 thumbnail
리액트를 처음 공부하며 어떻게 시작해야 할지 어려움이 있었는데, 간결하게 강의를 구성해주신 덕분에 많은 도움을 받고 있습니다. 한 강의 당, 그리고 전체 강의 구성이 길지 않은 덕에 여러 번 반복해서 볼 수 있을 것 같다는 점도 장점입니다 :) 한편, 바닐라 자바스크립트도 다뤄주심으로 리액트가 어떤 문제점을 해결하기 위해 나타난 프레임워크인지 파악하기에 수월했습니다. 하지만 아직 둘 다 어려운 건 마찬가지네요.. ㅎ_ㅎ 이후로도 여러 번 보고 구현해가며 프론트엔드 개발 기초를 잘 다지도록 해야겠습니다. 좋은 강의 감사합니다.
2021-06-01
김진수 thumbnail
바닐라 JS로 실습 후 리액트를 사용해서 이해하기 더 쉬웠습니다
2021-07-08
Geonil Jang thumbnail
기본을 학습하는 분에게 도웅이 됩니다.
2021-05-16

55,000원

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