강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

프론트엔드

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

(4.9) 수강평 1,117개

수강생 13,467명

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

이런 걸 배울 수 있어요

  • 실제 배포되는 감정일기장 프로젝트 개발

  • 자바스크립트, Node.js, Web 동작 방식 All-in-One

  • React 깔끔한 코드 작성, 성능 최적화 기법

이미지를 클릭하면 로드맵으로 이동하실 수 있습니다. 
> 로드맵 링크 : https://link.onebitefe.com/r/3wokpi

시리즈 강의 링크
> 한 입 크기로 잘라먹는 리액트 :https://inf.run/v3XAj
>
한 입 크기로 잘라먹는 타입스크립트 : https://inf.run/FpLm4
한 입 크기로 잘라먹는 넥스트 : https://inf.run/v3XAj


 

리액트, 한 강의로 끝장낼 수 있어요.
한 입 크기로 잘라먹을 수 있도록 도와드릴게요. 🔥

많은 수강생 여러분이 사랑해 주신 덕분에 인사이트 출판사와 함께 강의를 도서로 펴낼 수 있었습니다.
다시 한번 모든 수강생 여러분, 관심 가져주신 여러분들께 진심으로 감사드립니다.

 


2024 리뉴얼 버전 
한 입 크기로 잘라먹는 리액트
세상에서 가장 친절하고, 세상에서 가장 쉬운 리액트 강의를 향해

JavaScript 기초부터,
React.js 실전 프로젝트까지

React.js는 Node.js 환경에서 구동되는 JavaScript의 라이브러리입니다.
그러므로 React.js는 결국 JavaScript를 더 잘 활용할 수 있도록 도와주는 도구에 불과합니다.
따라서 JavaScript와 Node.js를 제대로 이해하고 있지 못하다면 React.js를 제대로 활용할 수 없습니다.

이 강의는 JavaScript 기초부터 Node.js를 거쳐 React.js를 배웁니다.
그런데 그냥 배우면 또 재미없죠! 총 3번의 프로젝트를 통해 React.js를 배웁니다.
이런 과정 속에서 여러분은 탄탄한 기본기를 갖춘 프론트엔드 개발자로 거듭나시게 될 겁니다.

18시간의 분량
총 3번의 React.js 프로젝트

이 강의는 React.js의 단순 사용법만 알려주는 강의가 아닙니다.
React.js를 둘러싼 다양한 CS 지식도 함께 다루며 총 3번의 프로젝트 
카운터앱, 투두리스트, 감정일기장을 만들어보며 프로그래밍 사고력도 함께 기를 수 있습니다.


강의 구성

📌 섹션 1~2. 자바스크립트 기초 및 심화

React.js를 배우기 앞서 JavaScript의 기초 및 심화 개념을 살펴봅니다.
자료형 및 연산자같은 기본적인 개념부터,
배열메서드나 비동기 작업같은 심화적인 내용도 함께 살펴봅니다.

만약 JavaScript를 이미 알고 있다 하더라도 복습 차원에서 다시둘러보기 좋습니다.

 

📌 섹션 3. Node.js

React.js는 Node.js를 기반으로 동작하는 기술입니다. 따라서 Node.js를 모르는데 React.js를 알 수는 없죠
3섹션에서는 Node.js란 무엇이고, 왜 탄생하게 되었고, 어떤 기능을 가지고 있는지 실습과 함께 살펴봅니다.

 

📌 섹션 4. React.js 개론

React.js란 무엇이고 타 기술과 비교해 어떤 차별점을 갖고 있는지 알아보고, 기존의 기술들이 갖던 한계점을 어떻게 해결했는지 자세히 살펴봅니다. 이 과정에서 우리는 React.js에 대해 더 깊이 이해하게 될 것 입니다.

 

📌 섹션 5. React.js 입문

새로운 React App을 생성하고 React의 Component, State, Props 등의 기본적인 기능에 대해 살펴봅니다.
실습과 함께 모든 기본 기능을 사용해 보고 그림자료와 함께 시각적으로 완벽히 이해합니다.

 

⛳️ 섹션 6. React.js 프로젝트 1. 카운터 앱

첫번째 리액트 프로젝트 "카운터 앱"을 직접 만들어봅니다.
간단하지만 React.js의 동작 원리와 설계 철학을 엿볼 수 있는 좋은 프로젝트입니다.

 

📌 섹션 7.  라이프사이클

모든 인간이 태어나 유아기, 청소년기, 청년기, 노년기를 거쳐 황혼에 도달하는 것 처럼 모든 리액트 컴포넌트도 태어나, 변화되고, 사라집니다. 이런 컴포넌트의 생애주기를 라이프사이클 이라고 표현합니다.

컴포넌트의 라이프사이클을 이해하고 제어할 수 있게 되면 원하는 타이밍에 원하는 동작을 수행시킬 수 있게 됩니다. 따라서 7섹션에서는 라이프사이클에 대해 살펴보고 실습과 함께 이를 제어하는 방법을 살펴봅니다.

 

⛳️ 섹션 8. React.js 프로젝트 2. 투두리스트

두번째 리액트 프로젝트 "투두리스트 앱"을 직접 만들어봅니다.
이 프로젝트를 구현하면서 데이터 CRUD(추가, 조회, 수정, 삭제) 및 검색 기능 등의
React에서 배열 형태의 데이터를 다루는 여러가지 방법을 살펴봅니다.

 

📌 섹션 9.  useReducer - 상태관리 로직 분리하기

역할에 따른 코드의 분리는 언제나 소프트웨어 개발의 미덕입니다.
복잡한 상태 관리 코드를 분리할 수 있도록 도와주는 useReducer에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

📌 섹션 10.  최적화

우리 프로젝트에 불필요한 연산이 존재한다면? 과감히 제거해야 겠죠!
낭비되는 연산을 제거하는 React App의 여러가지 최적화 기법을 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

📌 섹션 11.  Context

더 간결하고 더 깔끔하게 다양한 컴포넌트에 데이터를 공급하는 Context에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

 

⛳️ 섹션 12. React.js 프로젝트 3. 감정 일기장

지금까지 배운 개념을 총 동원 해최종 프로젝트 감정 일기장을 직접 만들어봅니다.
추가로 브라우저의 데이터베이스를 사용하고, 프로젝트를 배포해 사용자들이 접속할 수 있도록 만듭니다.
데모 링크 :https://emotion-diary.winterlood.com/

 

📌 섹션 13.  마치면서

강의는 끝나지만 우리의 학습은 끝나지 않습니다.
앞으로 어떤 방향성을 가지고 나아가야 할지 이야기 해 봅니다.


세상에서 가장 친절한
리액트 강의를 위한 4가지 원칙

📣 원칙 1. 반드시 쉽고 친절하게, 시각적으로 설명할 것

아무리 복잡하고 어려운 내용이더라도!
시각자료와 함께 친절하고 쉽게 설명하기 위해 부단히 노력했습니다.
모두 직접 만든 이미지들이라 캡처해서 학습 블로그 포스팅에 이용하셔도 됩니다. 😃

 

📣 원칙 2. 배속으로 재생해도 다 들리도록 발음할 것

복습을 위해 다시 듣는 중이거나, 바쁘다면 배속으로 들어보세요! 
최대 2배속 까지 발음이 잘 들리도록 각별히 신경썼어요 😎
(아래의 1.5배속으로 재생되는 영상을 한번 들어보세요!)

📣 원칙 3. 코드를 찾아보기 쉽게 저장해둘 것

애써 작성한 실습 코드들을 아무렇게나 보관하면 아쉽죠? 
언제든 다시 돌아볼 수 있도록 코드를 섹션별로 잘 나누어 보관할 수 있도록 신경 썼어요.
코드 보관소 링크 :https://github.com/winterlood/onebite-react-v2

📣 원칙 4. 끊임없이 소통할 것

수강생 전용 커뮤니티에 모여 서로 지식과 소식을 공유하며 성장합니다.

디스코드 채널 참가 : https://discord.gg/YDqhkH8XkN
(오픈채팅방은 수업 자료에서 확인하실 수 있습니다)

예상 질문 Q&A 💬

Q. 강의 수강 대상이 어떻게 되나요?

HTML, CSS에 대한 이해가 있으신 분들이 듣기에 최적화된 강의입니다.
다만 강의 중간중간에 설명이 존재하기에 내용 숙지가 빠삭하지 않아도 됩니다!

Q. 이제 막 시작하려 합니다. 자바스크립트, Node.js는 잘 모르는데 들어도 괜찮을까요?

네, 환영합니다! 🙋‍♂️
본 강의는 리액트를 학습하는데 꼭 필요한 자바스크립트 지식과 Node.js 지식까지 알려드려요.
따라서 본 강의 하나로 리액트에 필요한 기초 지식을 먼저 학습하고, 리액트까지 학습할 수 있습니다.

Q. 수업에서 어느 정도의 수준까지 다뤄지나요?

React가 탄생한 이유부터 기본적인 사용법, 실제 프로덕션 개발을 위한 성능 최적화 기법을 다룹니다.
또, Vercel를 이용하여 실제로 배포하고 Open Graph 설정으로 마무리하여
웹 프로젝트의 처음부터 끝까지 개발할 수 있는 모든 지식을 담고 있습니다.


포트폴리오 및 개인 영상

 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 리액트를 처음 접하는 입문자

  • 자바스크립트와 Node.js는 잘 모르지만! React.js를 배워보고 싶은 사람

  • 완강 챌린지 등을 통해 다수의 수강생과 함께 학습하고 싶은 사람

  • 강의 완주 시 자랑할만한 결과물을 만들고 싶은 사람

  • HTML & CSS를 한번이라도 작성해 본 경험이 있는 사람 (잘 하실 필요는 없어요!)

선수 지식,
필요할까요?

  • 👋 HTML, CSS에 대한 아주 기초적인 지식

안녕하세요
입니다.

34,580

수강생

2,190

수강평

1,475

답변

4.9

강의 평점

8

강의

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

커리큘럼

전체

98개 ∙ (18시간 33분)

해당 강의에서 제공:

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

수강평

전체

1,117개

4.9

1,117개의 수강평

  • sunjune18284435님의 프로필 이미지
    sunjune18284435

    수강평 27

    평균 평점 4.7

    5

    100% 수강 후 작성

    I actually bought the lecture for a thousand won on April Fool's Day, just in case... like a lottery ticket... but I feel like I really won the lottery. I feel bad that I'm studying such a good lecture at almost a free price... The lecture is so kind and the examples are explained in a way that's easy to understand, so it's really great. Thank you so much, I love you... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      수강평 2

      평균 평점 5.0

      5

      32% 수강 후 작성

      茂みをゴマの葉に包む感じ 講義内容を感じずに美味しいです〜

      • inchestry님의 프로필 이미지
        inchestry

        수강평 5

        평균 평점 5.0

        5

        64% 수강 후 작성

        まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。

        • samgangjumak님의 프로필 이미지
          samgangjumak

          수강평 8

          평균 평점 4.9

          5

          76% 수강 후 작성

          他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            수강평 2

            평균 평점 5.0

            5

            100% 수강 후 작성

            これらの説明力とその内容は含まれていますが、この価格は言葉ではありません。 倍増してもらえそうなのに本当に上司が狂ったような講義.. まだすべて消化したとは言い難いですが、繰り返し学習しながらマスターしてみます。 良い講義を作ってくれてありがとう:)!

            ₩48,400

            이정환 Winterlood님의 다른 강의

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

            비슷한 강의

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