처음 만난 리액트(React) v2 - goormEDU
Family Service
goormEDU
Sign InSign Up
All Lectures
RouteNoticeQ&A

처음 만난 리액트(React) v2

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

Lecture Introduction
Difficulty
Easy
Category
Web Programming - Programming
Tag
리액트, 자바스크립트, CSS, HTML
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
소플Captain
hello.Goorm Edu Captain 소플.Let's start learning together!
Lecture Reviews
Free
Average Rating
4.3
Difficulty
Easy
Lecture Period
Unlimited