처음 만난 리액트(React) v2 - goormEDU
Family Service
구름 EDU 로고
Sign InSign Up
All Lectures
RouteNoticeQ&A
Teacher Applicationfor Business

처음 만난 리액트(React) v2

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

Lecture Introduction
Difficulty
Easy
Category
Web Programming - Programming
Tag
HTML, CSS, JavaScript, React, 자바스크립트, 리액트, 프론트엔드
Certificate
You can issue a certificate of completion
Target Audience
- 웹애플리케이션 개발에 관심있는 분
- 리액트를 처음 접하시는 분

💫 깔끔한 강의자료, 꼼꼼한 설명, 소플과 처음 만나는 리액트 💫

- 리액트를 처음 만난다면 소플과 함께, 처음 만난 리액트로 시작하세요! -


📝 강좌 소개

🎉 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI 라이브러리 리액트의 세계로 초대합니다!

👍 리액트는 현재 웹 개발에 가장 많이 사용되며, 빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등의 수많은 장점을 가지고 있어요!

💡 웹 개발에 처음 입문하는 분들을 위해서 자바스크립트 기초 문법과 CSS의 대표적인 속성들에 대해서도 함께 배워요!



📖 관련 도서 소개


📌 강의를 책으로도 볼 수 있도록 강의 내용을 고스란히 책에 담았습니다.

📌 동영상 강의와 함께 책을 보면서 리액트의 세계로 빠져보세요!


🌟 소문난 명강의 🌟

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

🔗 교보문고, YES24, 알라딘, 인터파크



🎯 학습 목표

  • JavaScript 기초 문법을 익힙니다.
  • CSS의 개념과 자주 사용되는 속성을 배웁니다.
  • 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
  • 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.



📣 참고 사항

  • 본 강좌는 입문자분들을 위해 HTML, 자바스크립트, CSS의 기초 내용을 포함하고 있습니다.
  • 본 강좌를 학습하기 위해 별도의 선행 지식이 없어도 괜찮습니다.





✍ 강의자 소개


이인제(소플)

  • Hottest Lab Inc. 대표

  • 개발 경력
    - 前 소플 Software Engineer
    - 前 DDRAGON GAMES Manager
    - 前 KAIST ISILAB Researcher
    - 前 Lingofly Inc. CTO
    - 前 NemusTech Co.,Ltd Senior Researcher
    - 前 KTNET Assistant Manager

  • 강의 콘텐츠
    - 처음 만난 리액트
    - 처음 만난 AWS

Curriculum
Expand All
  • 01
    준비하기
    • HTML과 CSS
    JavaScript 소개 및 자료형
    JavaScript의 연산자
    JavaScript의 함수
    (실습) 개발환경 설정하기
  • 02
    리액트 소개
    • 리액트는 무엇인가?
    리액트의 장점과 단점
  • 03
    리액트 시작하기
    • (실습) 직접 리액트 연동하기
    (실습) create-react-app
  • 04
    JSX
    • JSX의 정의와 역할
    JSX의 장점 및 사용법
    (실습) JSX 코드 작성해보기
  • 05
    Rendering Elements
    • Elements의 정의와 생김새
    Elements의 특징 및 렌더링하기
    (실습) 시계 만들기
  • 06
    Components and Props
    • Components와 Props의 정의
    Props의 특징 및 사용법
    Component 만들기 및 렌더링
    Component 합성과 추출
    (실습) 댓글 컴포넌트 만들기
  • 07
    State and Lifecycle
    • State와 Lifecycle의 정의
    (실습) state 사용하기
  • 08
    Hooks
    • Hooks의 개념과 useState, useEffect
    useMemo, useCallback, useRef
    Hook의 규칙과 Custom Hook 만들기
    (실습) Hooks 사용해보기
  • 09
    Handling Events
    • Event의 정의 및 Event 다루기
    (실습) 클릭 이벤트 처리하기
  • 10
    Conditional Rendering
    • Conditional Rendering의 정의와 Inline Conditions
    (실습) 로그인 여부를 나타내는 툴바 만들기
  • 11
    List and Keys
    • List와 Key
    여러 개의 Component 렌더링 하기
    List의 Key
    (실습) 출석부 출력하기
  • 12
    Forms
    • Form과 Controlled Component
    다양한 Forms
    (실습) 사용자 정보 입력 받기
  • 13
    Lifting State Up
    • Shared State
    하위 컴포넌트에서 State 공유하기
    (실습) 섭씨온도와 화씨온도 표시하기
  • 14
    Composition vs Inheritance
    • Composition 방법과 Inheritance
    (실습) Card 컴포넌트 만들기
  • 15
    Context
    • Context란?
    Context API
    (실습) Context를 사용하여 테마 변경 기능 만들기
  • 16
    Styling
    • CSS와 selector
    레이아웃과 관련된 CSS 속성
    Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성
    styled-components
    (실습) styled-components를 사용하여 스타일링 해보기
  • 17
    Mini Project
    • (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치
    (실습) 주요 컴포넌트 및 폴더 구성하기
    (실습) UI 컴포넌트 및 List 컴포넌트 구현하기
    (실습) 가짜 데이터 만들기
    (실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기
    (실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기
Instructor Introduction
user
소플Teacher
Lecture Reviews
Free
Average Rating
5.0
Difficulty
Easy
Lecture Period
Unlimited