개발 · 프로그래밍

/

프론트엔드

처음 만난 리액트(React)

자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다.

(4.8) 수강평 395개

수강생 18,251명

Thumbnail

입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸
배워요!

  • 자바스크립트 기초 문법

  • CSS 기초 문법

  • 리액트 기초 탄탄하게 다지기

  • 미니 프로젝트를 통한 웹애플리케이션 개발

깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리액트 강의입니다. 👨‍🏫

리액트의 세계로
초대합니다 💫

리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다.
현재 웹 애플리케이션 개발에 가장 많이 사용되고 있으며
빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등 많은 장점을 갖고 있어요.


강의의 특징을

알려드려요 🔎

  • JavaScript 기초 문법을 익힙니다.
  • CSS의 개념과 자주 사용되는 속성을 배웁니다.
  • 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
  • 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.
  • 입문자분들을 위해 HTML, CSS, JS의 기초 내용을 포함하고 있습니다.


강의를 책으로도
만나볼 수 있어요! 📖

강의를 책으로도 볼 수 있도록
강의 내용을 고스란히 책에 담았습니다.
동영상 강의와 함께 책을 보면서
리액트의 세계로 빠져보세요!

🌟 소문난 명강의 🌟

소플의 처음 만난 리액트 [2판]
- 리액트 기초 개념 정리부터 실습까지

 


강의가 끝나도
질문&답변 제공 💬

강의를 모두 수강한 이후에도 리액트로 개발을 하면서 생기는 궁금증들을 모두 해결해드립니다.
지식공유자 소플이 만든 프론트엔드 지식 포털 FrontOverflow에 언제든지 질문을 남겨주세요!

🔗 FrontOverflow 방문하기


강의를 들은 후 수강생의 변화 🙋‍♂️

JS 기초 문법에 대해
이해할 수 있어요!

자주 사용되는 CSS를
이해할 수 있어요!

리액트의 기초를
잘 다질 수 있어요!

실전 프로젝트 경험을
쌓을 수 있습니다.


학습 내용 엿보기 📚

섹션 0 [준비하기]

  • HTML, CSS의 개념과 자바스크립트 기초 문법에 대해 배우고, 실습을 위한 환경을 세팅합니다.

섹션 1, 2 [리액트 소개, 시작하기]

  • 리액트에 대한 소개, 장단점에 대해 학습합니다.
  • 리액트를 직접 연동하는 방법과 create-react-app에 대해 학습합니다.

섹션 3 [JSX]

  • JSX의 정의와 역할, 그리고 사용법에 대해 학습합니다.

섹션 4 [Rendering Elements]

  • 리액트 엘리먼트의 정의와 특징 및 렌더링 방법에 대해 학습합니다.

섹션 5 [Components and Props]

  • 리액트 컴포넌트와 Props의 정의 및 사용법에 대해 학습합니다.

섹션 6 [State and Lifecycle]

  • State의 개념과 컴포넌트 Lifecycle에 대해 학습합니다.

섹션 7 [Hooks]

  • 리액트 훅의 개념과 대표적인 훅들 및 커스텀 훅에 대해 학습합니다.

섹션 8 [Handling Events]

  • 리액트에서 이벤트를 다루는 방법에 대해 학습합니다.

섹션 9 [Conditional Rendering]

  • 조건부 렌더링의 개념과 구현 방법에 대해 학습합니다.

섹션 10 [Lists and Keys]

  • 리스트와 키의 개념과 실제 렌더링 방법에 대해 학습합니다.

섹션 11 [Forms]

  • 다양한 Form과 제어 컴포넌트에 대해 학습합니다.

섹션 12 [Lifting State Up]

  • Shared State와 컴포넌트간 State를 공유하는 방법에 대해 학습합니다.

섹션 13 [Composition vs Inheritance]

  • 다양한 컴포넌트 합성 방법과 상속의 의미에 대해 학습합니다.

섹션 14 [Context]

  • Context의 개념과 Context API에 대해 학습합니다.

섹션 15 [Styling]

  • 대표적인 CSS의 속성들과 styled-components에 대해 학습합니다.

섹션 16 [미니프로젝트]

  • 지금까지 배운 내용들을 종합하여 미니 블로그를 함께 만들어봅니다. 

예상 질문 Q&A 💬

Q. 자바스크립트를 잘 몰라도 들을 수 있는 강의인가요?

네! 자바스크립트에 대해 잘 모르시는 분이라고 해도, 강의에서 기초 문법을 포함하여 설명드리기 때문에 상관없이 들으실 수 있습니다.

Q. CSS에 대해 잘 몰라도 들을 수 있는 강의인가요?

네, CSS의 대표적인 속성들을 함께 다루기 때문에 잘 몰라도 강의를 수강하실 수 있습니다.

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

리액트를 통해 내가 원하는 대로 웹 애플리케이션을 개발할 수 있습니다.


학습 관련자료 💡

 

3강 ~ 15강. 실습 소스코드

리액트 v17 소스코드
https://github.com/soaple/first-met-react-practice

리액트 v18 소스코드
https://github.com/soaple/first-met-react-practice-v18

16강. 미니 블로그 소스코드

https://github.com/soaple/mini-blog

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹애플리케이션 개발에 관심있는 분

  • 리액트를 처음 접하시는 분

이인제(소플)

개발을 사랑하는 개발자이자 1인 스타트업의 창업자입니다.
오래 전부터 소프트웨어 교육에 관심을 가지고 꾸준히 활동하고 있습니다 😀 

 

커리큘럼

전체

62개 ∙ (5시간 15분)

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!