강의

멘토링

로드맵

Inflearn brand logo image
BEST
개발 · 프로그래밍

/

프론트엔드

얄코의 가장 쉬운 리액트(React)

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

(4.9) 수강평 109개

수강생 799명

이론 실습 모두
유튜버
JavaScriptReactNode.js웹앱

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

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

  • 웹 애플리케이션 동작 원리, 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/FTpMS

💬 댓글 달고 반값에 수강하기 이벤트 진행중!
아래의 유튜브 영상(본 강의의 무료파트)에 힘이 되어주는 댓글을 달아주신 뒤(한 줄도 괜찮습니다)
yalco@yalco.kr 로 스크린샷을 보내주시면 반값 쿠폰을 보내드립니다.
영상 링크: https://youtu.be/aC55WY8jxX0

🪙 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의 기초 지식

안녕하세요
입니다.

30,155

수강생

1,548

수강평

85

답변

4.9

강의 평점

17

강의

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

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

커리큘럼

전체

31개 ∙ (4시간 10분)

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

수강평

전체

109개

4.9

109개의 수강평

  • 23sdf7060님의 프로필 이미지
    23sdf7060

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    I watched the free part of the YouTube video and waited for the January class to open because of the simple and easy explanation, and now I have taken all the classes. It was a very satisfying and helpful class. I look forward to the next class. Thank you.

    • yalco
      지식공유자

      I'm really glad the lecture was helpful! I'll make better content in the future. Thank you!

  • silverhozan님의 프로필 이미지
    silverhozan

    수강평 8

    평균 평점 4.9

    5

    43% 수강 후 작성

    The video and quality are just insanely good, I can't listen to other lectures anymore.

    • yalco
      지식공유자

      Thank you! Please feel free to ask anytime if you have any difficulties during the remaining process!

  • seungtaemoon625289님의 프로필 이미지
    seungtaemoon625289

    수강평 1

    평균 평점 5.0

    수정됨

    5

    37% 수강 후 작성

    It explained the core of React in a way that allowed me to quickly grasp it and easily apply it to development. It's not overwhelming compared to other courses, and it was enough to jump straight into a project after taking this course.

    • yalco
      지식공유자

      Thank you! I'm glad the lecture was helpful!

  • harbinger님의 프로필 이미지
    harbinger

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    I studied React on my own through a light book and did some practice, but there was something frustrating, so I bought a lecture to review. I revisited what I had studied and re-established the concepts, and when I entered the code, I didn't just blindly follow along, but thought about the structure, which helped me study. If you open a React intermediate level or higher course later, I am willing to take it. Thank you.

    • yalco
      지식공유자

      I'm glad the content I worked hard to prepare was helpful! Thank you!!

  • woojung230님의 프로필 이미지
    woojung230

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    I really liked the free YouTube episodes because they were compact but full of great content. I've completed the paid portion as well! Even with my experience doing React projects, I learned so much from the final project. You can't get full on the first bite, so I need to review it from time to time to make it my own. Please make TypeScript and Next.js courses too!

    • yalco
      지식공유자

      Thank you!! I hope the lecture was helpful. I'll prepare the TypeScript lecture as soon as possible!

₩33,000

얄팍한 코딩사전님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!