BEST

개발 · 프로그래밍

웹 개발

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

Name: 부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편
Price: 13200 KRW

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

(4.9) 수강평 17개

수강생 573명

애프터캠프

React react-usememo 기술면접 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,749

명

수강생

개

수강평

개

답변

4.8

점

강의 평점

개

강의

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

👉 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. 렌더링 디버깅하는 법 & 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

강의 게시일: 2023. 07. 05.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

17개

4.9

17개의 수강평

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

애프터캠프님의 다른 강의

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

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

애프터캠프

₩38,500

중급이상 / TypeScript

5.0

(29)

200+

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

중급이상

TypeScript

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

애프터캠프

₩24,200

중급이상 / DDD, Node.js

4.5

(8)

100+

Update

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

중급이상

DDD, Node.js

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

애프터캠프

₩22,000

입문 / DBMS/RDBMS, systems

4.7

(18)

100+

Update

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

입문

DBMS/RDBMS, systems

리셀봇 원리로 알아보는 Cypress

애프터캠프

₩11,000

초급 / Cypress, 소프트웨어 테스트

5.0

(3)

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

초급

Cypress, 소프트웨어 테스트

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

애프터캠프

₩27,500

중급이상 / React, React Context, TDD, Jest, 소프트웨어 테스트

4.7

(11)

400+

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

중급이상

React, React Context, TDD

비슷한 강의

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

React 기반 Gatsby로 기술 블로그 개발하기 v2

주현도

₩22,000

중급이상 / Gatsby, React, 블로그, TypeScript

5.0

(5)

Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.

중급이상

Gatsby, React, 블로그

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

애프터캠프

₩27,500

중급이상 / React, React Context, TDD, Jest, 소프트웨어 테스트

4.7

(11)

400+

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

중급이상

React, React Context, TDD

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

₩88,000

중급이상 / React, Redux, Node.js, Express, Next.js

4.9

(178)

3,700+

답변 활발

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

₩22,000

초급 / OAuth, Next.js, JavaScript

4.9

(9)

100+

Update

OAuth 2.0을 구글이나 깃헙같은 계정으로 간편 로그인을 사용해봐서 이미 친숙하게 느껴질지도 모릅니다. 소셜 로그인은 OAuth 2.0을 확장하여 만들어진 것으로 핵심 기술은 OAuth 2.0 인가 프레임워크에 있습니다. OAuth 2.0의 원리를 이해하면 그것을 바탕으로 필요에 맞게 적절히 구현하고 조정하는 능력을 기를 수 있습니다.

초급

OAuth, Next.js, JavaScript

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

₩22,000

초급 / PostgreSQL, Next.js, TailwindCSS, supabase

4.9

(83)

1,900+

Update

답변 활발

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

PostgreSQL, Next.js, TailwindCSS

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

₩143,000

입문 / JavaScript, React, Node.js, Express, React Native, 머신러닝, HTML/CSS, Tensorflow

4.8

(156)

3,100+

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

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

김영보

₩44,000

초급 / JavaScript, 면접, 기술면접

5.0

(3)

100+

Update

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

초급

JavaScript, 면접, 기술면접

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

₩55,000

초급 / React Native, React, ES6

4.6

(120)

1,800+

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

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

ludgi

₩16,500

중급이상 / Next.js, React, GraphQL, Prisma, AWS

5.0

(2)

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

중급이상

Next.js, React, GraphQL

앱 개발 입문을 위한 React Native 완벽 기초 클래스

정현우

무료

입문 / JavaScript, React, Node.js, React Native, TypeScript

5.0

(2)

New

앱 개발을 하고 싶은데 어디서부터 시작해야될 지 막막하신 분들을 위해 준비했습니다. 이 강의로 그 고민, 이젠 끝내세요!

입문

JavaScript, React, Node.js

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

₩22,000

25%

₩16,500

입문 / JavaScript, React, Node.js, React Native, TypeScript

2.2

(6)

100+

Update

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

공식문서로 배우는 실전 타입스크립트

어쩔코딩

₩22,000

입문 / TypeScript, JavaScript, ES6, Node.js, Next.js

5.0

(2)

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

TypeScript, JavaScript, ES6

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

이웅재

무료

중급이상 / React, TypeScript

4.7

(42)

6,000+

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

중급이상

React, TypeScript

면접 전에 알고 가면 좋을 것들 - 신입 Java 백엔드 개발자편

널널한 개발자

₩66,000

초급 / 기술면접, 이력서, DBMS/RDBMS, tcpip

5.0

(43)

1,300+

답변 활발

신입 Spring Java 백엔드 개발자로 취업을 원하는 사람, 특히 면접을 앞둔 사람이 미리 알고 가면 좋을 내용들에 대해 종합적으로 정리한 강의 입니다.

초급

기술면접, 이력서, DBMS/RDBMS

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

체험코딩

₩11,000

70%

₩3,300

입문 / Firebase, Next.js, vercel, CursorAI

5.0

(3)

New

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

입문

Firebase, Next.js, vercel

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

스킬 업! 프로가 되는 실전 프론트엔드 with React

인프런 프리즘

₩13,200

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

중급자를 위해 준비한 [웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

부트캠프에서 알려주지 않는 것들 ✅

강의 커리큘럼을 확인해 보세요 📚

강의 특징 ✨

이 강의를 만든 애프터캠프는

Q&A 💬

이런 분들께 추천드려요!

안녕하세요 애프터캠프입니다.

커리큘럼

수강평

애프터캠프님의 다른 강의

비슷한 강의

연관 로드맵

중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

강의 커리큘럼을
확인해 보세요 📚

이런 분들께
추천드려요!

안녕하세요
애프터캠프입니다.