Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
BEST
개발 · 프로그래밍

/

프론트엔드

얄코의 리액트(React) - (Korean ver.)

설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

(5.0) 수강평 41개

수강생 440명

ReactNode.jsJavaScript웹앱
Thumbnail

초급자를 위해 준비한
[프론트엔드, React] 강의입니다.

이런 걸 배울 수 있어요

  • 리액트의 핵심 개념과 기능들

  • 웹 애플리케이션 동작 원리, Node.js 등 배경지식

  • 최종 프로젝트를 통한 실무 지식 및 팁

  • 리액트 이해에 필요한 자바스크립트 지식들

🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take the course available at the link below.

https://inf.run/hxiWd

🪙 10만 유튜버 얄코가 알려주는 리액트

리액트(React)는 웹페이지를 빠르고 효율적으로 만들 수 있는 강력한 도구로, 많은 기업과 개발자들에게 사랑받고 있습니다. 웹개발자가 되려면 꼭 배워야 하는 기술이죠.

코딩컨텐츠 찐 고인물, 설명대장 얄코가 리액트를 지구에서 가장 쉽게 알려드립니다.

얄코의 리액트

⏳ 인생은 짧고 여러분의 시간은 소중합니다.

AI와 함께 코딩하는 시대!

이제는 배워온 한 땀 한 땀 코드를 작성하는 능력보다는, 사용하는 기술의 핵심 개념과 기능들을 빠르게 익히고, AI에게 어떤 일을 지시할지 결정하는 능력이 중요합니다.

한 순간의 낭비도 없는 굵직한 압축 강의를 통해 리액트 프로그래밍에 필요한 모든 핵심 지식을 빠르고도 쉽게 익혀가세요!

🎊 리액트 19의 최신 기능 및 수정사항들이 반영되어 있습니다.

이 강의의 특징

얄코의 강의는 다릅니다.

설명대장 얄코가 알려주는 리액트

어떤 어렵고 복잡한 개념들도 뚝딱 알려주는 얄코가 고심을 거듭한 예제들을 통해, 리액트 프로그래밍을 쉽고 빠르게 배울 수 있습니다.

자바스크립트 초보자도 👌

리액트에서 활용되는 자바스크립트 문법 및 개념 중 초보자들이 모를 수 있는 부분들을 강의 중간중간 쉽고 명쾌하게 알려드립니다.

시각자료를 통한 풍부한 설명

머리아프고 지루할 수 있는 각종 개념들과 원리들을 깔끔하고도 다채로운 애니메이션으로 눈이 즐겁게 알려드립니다.

눈과 귀와 손이 편안한 영상

모든 장면의 대사들이 자막으로 제공되며 화면상 언급되는 코드들은 하이라이트됩니다. 대부분의 예제 코드를 한 화면에서 모두 볼 수 있습니다.

1초의 낭비도 없는 녹진함, 꽉꽉 눌러담은 꾸덕함

코드를 타이핑하는 과정이 생략되어 러닝타임이 짧으면서도, 자막과 하이라이트가 늘 제공되어 영상을 따라가기 어렵지 않도록 설계했습니다.

모든 실습 예제 코드 제공

강의의 예제코드들이 Notion 페이지에 업로드되어 있습니다. 수강자분들이 해당 페이지에 직접 다는 질문들을 통해 추가지식을 얻을 수 있습니다.

이런 내용을 배워요

프론트엔드 개발의 중요한 개념들

'왜 배우는가'를 아는 것이 중요합니다. 웹 애플리케이션의 동작 방식부터 프론트엔드의 과거와 현재, 리액트가 등장한 이유, 가상 DOM의 개념까지! 시각 요소와 비유들로 쉽게 알려드립니다.

리액트 프로젝트의 구조와 원리

Node.js와 번들러를 사용하여 프로젝트를 구축하고 실행하는 방법, 테스트 모드와 배포에 관한 개념, 리액트 애플리케이션의 구성 등 리액트 개발을 위한 필수 지식들을 갖춥니다.

컴포넌트 렌더링 기초

컴포넌트들로 애플리케이션을 구축하고 JSX를 활용하여 원하는 요소들을 렌더링하는 방법, 조건부 렌더링과 리스트 렌더링을 통해 데이터를 효율적으로 시각화하는 방법들을 배웁니다.

데이터와 이벤트 다루기

State를 사용하여 상태를 관리하고 Prop으로 컴포넌트간 데이터를 공유하는 방법, 각종 이벤트를 핸들링하고 Reducer로 로직을 분리하는 방법 등을 다양한 예제들을 통해 알아봅니다.

각종 리액트 훅

리액트에 내장되어 있거나 사용자가 직접 작성한 훅을 통해서 애플리케이션의 상태와 생명주기를 제어하고 원하는 기능을 자유자재로 구사할 수 있는 지식과 능력을 갖춥니다.

최적화, 컨텍스트, 라우팅

불필요한 연산을 최소화하는 법, 원하는 범위 내에 공유되는 데이터를 컨텍스트로 관리하는 법, 라우팅을 통해 여러 페이지들과 파라미터를 다루는 법을 배웁니다.

파이널 프로젝트

도서 목록을 관리하는 프론트엔드 애플리케이션을 제작합니다. 앞서 배운 개념들을 고루 활용하여 각 기능들이 실무에서 어떻게 사용되는지 알아갈 수 있습니다.
강의에서 제공하는 테스트 서버에 요청을 보내어 데이터를 읽고 쓰고 수정하는 과정을 통해 실무 개발을 미리 경험해 볼 수 있습니다.

궁금한 점이 있나요?

Q. HTML, CSS, 자바스크립트를 얼마나 알고 있어야 할까요?

HTML와 CSS는 기본기만 갖추었다면 충분합니다. 특히 CSS의 경우는 이 강의에서 직접 작성하실 필요 없이, 예제에 코드들이 미리 작성되어 있습니다.
자바스크립트의 경우 많이 알고 있을 수록 좋지만, 문법 지식이 부족하신 분들이 어려워할 수 있는 부분들은 강의에서 중간중간 설명드립니다. 때문에 자바스크립트 역시 기초 부분을 익히셨다면 별다른 어려움 없이 이 강의를 수강하실 수 있습니다.

Q. 전체 강의시간이 4시간 가량인데 짧거나 부족하지 않을까요?

코드를 타이핑하는 과정 등, 지식 전달 외의 요소들을 최대한 걷어내어 영상들을 제작했기 때문에 강의하는 분량에 비해 전체 길이는 짧습니다. 8~10시간 이상의 타 일반 강의에서 전달하는 분량의 지식을 절반 이하의 시간으로 압축하면서도, 모든 장면에서의 자막과 코드 하이라이팅을 통해 수강에 어려움은 겪지 않도록 주의를 기울여 만들었습니다.

수강 전 참고 사항

실습 환경

  • 운영 체제 : Windows, macOS 모두 가능

  • 설치할 것: Node.js, VS Code 등 코드 에디터

학습 자료

  • 제공하는 학습 자료 형식 (PPT, 클라우드 링크, 텍스트, 소스 코드, 애셋, 프로그램, 예제 문제 등)

  • 분량 및 용량, 기타 학습 자료에 대한 특징 및 유의사항 등

선수 지식 및 유의사항

  • HTML, CSS, JavaScript 기본기

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프론트엔드 개발자를 꿈꾸는 모든 분들

  • HTML, CSS, JavaScript의 기초 과정을 마친 분들

  • 멋진 아이디어를 웹앱으로 실현하고자 하시는 분들

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript의 기초 지식

안녕하세요
얄팍한 코딩사전입니다.

27,073

명

수강생

1,168

개

수강평

80

개

답변

4.9

점

강의 평점

14

개

강의

유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, IT서적들을 집필하는 작가입니다.  풀스택 개발자로 일해 온 경험을 살려, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.

🎬   YouTube 얄팍한 코딩사전 채널 (클릭!)
📕  얄코의 책들 보러가기 (클릭!)

더보기

커리큘럼

전체

30개 ∙ (4시간 10분)

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

수강평

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