인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST

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

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

초급자를 위해 준비한
[프론트엔드, 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,281

수강생

1,197

수강평

80

답변

4.9

강의 평점

14

강의

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

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

더보기

커리큘럼

전체

30개 ∙ (4시간 10분)

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

수강평

전체

47개

4.9

47개의 수강평

  • 라라올라님의 프로필 이미지
    라라올라

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    유튜브 무료편 보고 컴팩트하지만 알찬 내용이 너무 좋아. 유료파트까지 완강하게 되었습니다! 리액트로 프로젝트를 해본 경험이 있음에도 불구하고 마지막 파이널 프로젝트는 얻어갈 내용이 정말 많았습니다. 첫술에 배부를 수는 없으니 틈틈히 반복 수강해 제것으로 만들어야겠네요. 타입스크립트나 넥스트 강의도 부탁드립니다!

    • 얄팍한 코딩사전
      지식공유자

      감사합니다!! 강의가 도움되어드렸기를 바랍니다. 타입스크립트 강의도 얼른 준비하겠습니다!

  • silverhozan님의 프로필 이미지
    silverhozan

    수강평 6

    평균 평점 4.8

    5

    43% 수강 후 작성

    영상이랑 퀄리티가 진짜 미친듯 다른강의는 이제 못듣겠네요

    • 얄팍한 코딩사전
      지식공유자

      감사합니다! 남은 과정 중 어려운 부분 있으면 언제든 질문주세요!

  • 종근님의 프로필 이미지
    종근

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    유튜브 영상의 무료 파트를 보고 군더더기 없고 쉬운 설명에 1월 강의 오픈을 기다리다 이제야 모두 수강 하였습니다. 매우 만족스럽고 도움이 많이 되는 강의였습니다. 다음 강의도 기대하겠습니다. 감사합니다.

    • 얄팍한 코딩사전
      지식공유자

      강의가 도움되어드려 정말 기쁩니다! 앞으로도 더 좋은 컨텐츠 만들겠습니다. 감사합니다!

  • seungtae.moon62님의 프로필 이미지
    seungtae.moon62

    수강평 1

    평균 평점 5.0

    수정됨

    5

    37% 수강 후 작성

    리액트의 핵심을 설명해줘서 가장 빠르게 습득하고 직접 개발에 적용하기 수월했어요. 타 강의에 비해 많지 않아 부담이 없고, 해당 강의만 듣고 바로 프로젝트에 투입되기 충분했습니다.

    • 얄팍한 코딩사전
      지식공유자

      감사합니다! 강의가 도움되어드려 기쁩니다!

  • harbinger님의 프로필 이미지
    harbinger

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    리액트를 가벼운 책을 통해서 혼자 학습하고, 실습도 해봤지만 뭔가 답답한 것이 있어서 복습할 겸 강의를 구매했습니다. 공부했던 것들을 되새김질하면서 다시 개념을 잡았고, 코드를 입력할때도 단순하게 따라 치는게 아니라 구조를 생각하면서 입력하니까 나름 공부에 도움이 되었습니다. 나중에 리액트 중급 이상 강의도 개강하신다면 볼 의향이 있네요. 감사합니다.

    • 얄팍한 코딩사전
      지식공유자

      열심히 준비한 내용들이 도움되어드려 기쁩니다! 감사합니다!!

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

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

비슷한 강의

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

₩24,750

25%

₩33,000