BEST

Programming

Web Development

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

Name: ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）
Price: 13200 KRW

Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

（4.9）受講レビュー 18件

受講生 584名

aftercamp

3시간 만에 완강할 수 있는 강의 ⏰

react

렌더링

렌더링문제

최적화

React

react-usememo

Tech Interview

Next.js

学習した受講者のレビュー

こんなことが学べます

リアクトレンダリング原理
リアクト最適化方法
画像の最適化
リアクトの最新機能
Server component rendering

現業リアクト開発でぜひとも悩む、
この講義で解決します！

ブートキャンプで教えてくれないこと✅

_{リアクト（React）開発の実務で必ず体験する複雑で難しい問題、この講義ですべて取り上げます！}

🤔リアクトのレンダリングの原理を知らず、機械的にコードを書いていませんか？

👍 리액트 렌더링 원리原理を学び、最新バージョンでリアクトレンダリングを最適化する方法を学びます。

🤔最適化する方法がわからないので、ウェブサイトがうんざりしていませんか？

😆 React.memo 、 useMemo 、 throttle 、 debounceテクノロジー、画像最適化でウェブサイトを気にしないようにします。

🤔リアクト新バージョンが出ても無関心ではありませんか？

✌️ Automatic batching , Server component rendering , useTransition新しい API とレンダリングパラダイムの変化がわかります。

講義カリキュラム
確認してください📚

講義の特徴✨

理論よりも実際の応用を強調し、さまざまな実例を提供し、重要なReact原則の強力な基礎を提供することに焦点を当てた実践中心の講義です。

リアクトアプリのパフォーマンス測定、最適化、およびReact 18で紹介されている内容を深くカバーしています。
Codesandboxを提供して、講義の内容に簡単に従うことができます。

この講義を行ったアフターキャンプは、

ブートキャンプ修了した方のためのコミュニティを運営しています。
単純な開発者の供給だけを増やす政策に反対し、良質の後学を養成したいという夢を持っています。

Q&A 💬

Q. 講義の難易度はどのくらいですか？

リアクトを通じてある程度開発された方のための中級講座です（最低3ヶ月以上のリアクト開発経験）

Q. この講義が他の講義と違う点は何ですか？

ジュニア開発者たちを教えてみながら、彼らが必ず知ってほしいことを講義に溶かしました。

こんな方に
おすすめです

学習対象は
誰でしょう？

リアクト開発ポジション面接準備する方
リアクトアプリのパフォーマンスを測定して最適化したい人
ブートキャンプで旧バージョンのリアクトを使用する方
社内で旧バージョンのリアクトをお使いの方
Next.js App Routerの原則について知りたい人

前提知識、
必要でしょうか？

基本的なリアクト知識

こんにちは
です。

1,796

受講生

受講レビュー

回答

4.9

講座評価

講座

## 이력서, 포폴 첨삭 등 강의 외 문의사항이 있으시면 이곳으로 문의 주세요

👉 morishjs@gmail.com

강사 깃헙: https://github.com/morishjs

지식저장소: https://wiki.after-camp.com/Home

🎨 포트폴리오: https://morish.dev

📜 이력: https://shorturl.at/gKU68

부트캠프 수료했는데 앞으로 뭘 공부해야 할지 막막하시죠?

👊 부트캠프에서는 취업률 90%라고 하는데... 전 취업이 잘 안돼요! 😢

👊 취업은 했는데 사수가 없어서 너무 불안해요! 🤑

👊 작성한 코드가 동작은 하는데 이렇게 작성하는지 모르겠어요! 🤯

애프터캠프에서는 다음이 가능합니다!

👌 CTO 2번 경험, 다수의 프로젝트를 경험한 풀스택 개발자가 직접 코칭합니다.

👌 코드 리뷰, 커리어 방향성 고민을 같이 해드립니다.

👌 애프터캠프에는 한국, 미국 실리콘밸리 예비 개발자, 현직자가 모인 곳입니다.

カリキュラム

全体

12件 ∙ (1時間 37分)

セクション 1．リアクトレンダリングの最適化

8件 ∙ (52分)

1. イントロ
00:48
2. リアクトレンダリング原理
05:59
3. useTransitionで迅速な反応性でユーザー体験を向上させる
09:01
4. 点滅しないレンダリングのための Automatic batching (React 18)
03:29
5. サーバーへの過度の要求を防ぐ Throttle, Debounce
05:05
6. レンダリングをデバッグする方法＆amp; React.memoで最適化
11:57
7. 不要な計算を減らすuseMemo
07:23
8. 最近ホットな🌶️サーバーコンポーネントレンダリング（サーバーサイドレンダリングではない❌）
08:35

セクション 2．画像の最適化

2件 ∙ (23分)

9. お金を払って画像を最適化する方法
14:01
10. お金を出し、画像を操作して最適化する方法💵
09:44

セクション 3．大量のデータレンダリングを最適化 (Virtualized List)

2件 ∙ (20分)

11. Virtualized Listの実装(1)
17:07
12. Virtualized Listの実装(2)
03:51

講座掲載日:

最終更新日:

受講レビュー

全体

18件

4.9

18件の受講レビュー

Michael Hur
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
많은 강의들에서 아쉽다고 생각했던 최적화 방법, 리액트 18에서 추가된 새로운 기능들에 대해서 설명해주고, 예제로 보여줘서 더 이해하기 쉬웠습니다. 특히나 Throttle, Debounce는 차이를 설명해주고 어떤 상황에서 사용해야할지, 그리고 예제까지 보여주셔서 더 이해하기 쉬웠습니다. 3편도 기대합니다. + 영상의 길이가 짧고, 각 강의가 독립적인 주제여서 더 좋았습니다.
- 애프터캠프
  知識共有者
  정성스러운 리뷰 감사합니다. 일부러 집중이 떨어질까봐 최대한 짧게 구성을 해봤는데 알아봐주셔서 감사합니다
김병호
受講レビュー 4
∙
平均評価 5.0
5
67% 受講後に作成
프론트엔드 최적화에 대해서 찾아보다가 강의를 구매했어요! 강의의 내용들은 짧지만 핵심내용만 잘 알려주시고 어떻게 적용해야할까 라는 생각을 많이 들게 해주십니다. 실무에서 되는 내용들이라 더욱좋았구요 내용이 더있다면 더 많았으면 좋겠어요 !! 강의 추천드립니다!
- 애프터캠프
  知識共有者
  감사합니다 병호님 :)
yoonmin
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
핵심이 딱 정리되어 있는 것 같아요! 감사합니다 :)
- 애프터캠프
  知識共有者
  감사합니다 :)
MJ
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
강사님 다른 강의가 나오면 들어보고 싶을 정도로 깔끔하게 정리된 강의였습니다. 1편을 수강하지 않고 봤는데...1편도 어서 수강하러 가야겠네요!
K1
受講レビュー 3
∙
平均評価 4.3
5
100% 受講後に作成
강의가 길면 지루해지는데, 각 주제별로 핵심만 설명해주셔서 좋습니다.

￥1,673

aftercampの他の講座

知識共有者の他の講座を見てみましょう！

클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편

애프터캠프

도메인 주도 개발(DDD) 방법으로 체계적인 백엔드 설계 및 이것을 마이크로서비스에 적용해봅니다!

Intermediate

DDD, Node.js

클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편

애프터캠프

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

커스텀 훅, TDD, 컨텍스트 API, 리팩토링, 복잡한 상태 관리 등 React 개발의 복잡한 부분을 마스터하세요.

Intermediate

React, React Context, TDD

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

클론코딩에서 알려주지 않는 것들 (시스템 이론과 DB) 1편

애프터캠프

클론 코딩 강의 보면서 왜 이런 기술을 사용하는 것인지 궁금해하셨죠? 백엔드 개발의 큰 그림을 그려드릴게요!

Beginner

DBMS/RDBMS, systems

클론코딩에서 알려주지 않는 것들 (시스템 이론과 DB) 1편

애프터캠프

실전 연습으로 익히는 고급 타입스크립트 기술

애프터캠프

타입스크립트의 기능들을 제대로 활용해보세요!

Intermediate

TypeScript

실전 연습으로 익히는 고급 타입스크립트 기술

애프터캠프

리셀봇 원리로 알아보는 Cypress

애프터캠프

자동 로그인, 자동 상품 구매 동작 원리를 Cypress를 통해서 배워봅니다

Basic

Cypress, 소프트웨어 테스트

리셀봇 원리로 알아보는 Cypress

애프터캠프

似ている講座

同じ分野の他の講座を見てみましょう！

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

커스텀 훅, TDD, 컨텍스트 API, 리팩토링, 복잡한 상태 관리 등 React 개발의 복잡한 부분을 마스터하세요.

Intermediate

React, React Context, TDD

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다.

Intermediate

React, Chrome DevTools

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

Intermediate

React, Next.js, cursor

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

React & Express 를 이용한 웹 어플리케이션 개발하기

velopert(김 민준)

Velopert 님이 알려주는 ReactJS 강좌 입니다. 최근 각광받는 Javascript 라이브러리인 React 를 소개하고, 사용법을 알려주는 강좌 입니다.

Basic

React

React & Express 를 이용한 웹 어플리케이션 개발하기

velopert(김 민준)

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

Basic

Python, Django, React

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

Basic

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

Beginner

nextjs, ChatGPT, React

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

Basic

REST API, GraphQL, React

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

Intermediate

React, TypeScript

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

풀스택으로 나만의 블로그를 만들어 보아요~~!

Intermediate

Bootstrap, MongoDB, Express

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

Intermediate

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

Beginner

Firebase, Next.js, vercel

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

Basic

JavaScript, 면접, 기술면접

클린업 JavaScript: 베이스 빌드업!

김영보