본문 바로가기

리액트 공부11

React - 19장 : 코드 스플리팅(완) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 2.
React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 1.
React - 17장 : 리액트 리덕스 실습 예제(React-Redux) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 2. 28.
React - 16장 : 리덕스(Redux) 라이브러리의 이해 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 2. 28.
추가) React에서의 PWA 1. PWA란 ? - 웹사이트를 어플리케이션처럼 다운받는척하게 만들어서 사용할 수 있게 해주는 브라우저 기능을 이용한 개발기술 - 사용자에게 브라우저에서 '설치하시겠습니까?' 한마디 떤지고 다운받는 척 하게 해서 폰이나 pc에 바탕화면 아이콘처럼 만들어준다. - 실제로 pwa로 설치된 바로가기를 누르면 브라우저를 통해 웹으로 접속되지만, 전체화면으로 작동하므로 사용자는 이게 웹인지 앱인지 모른다. - 실제로 GFN 이나 XBOX Pass 등의 스트리밍 서비스에서 이런식으로 PWA를 적극 활용하고 있다. 실제로 네이티브 앱보다 개발비용이 적고 실시간 반응성이 중요한 게임스트리밍 서비스가 사용할 정도면 꽤 신뢰성이 높다. - 네이티브 앱을 발행하는 것보다 마케팅비용도 적게들고, 오프라인 동작도 가능하게 캐싱.. 2023. 2. 24.
추가) React State 관리 성능개선과 Hooks React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI 1. Automati.. 2023. 2. 24.
React - 13장 : 리액트 라우터로 SPA 개발하기 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기(현재) 13-1. 싱글페이지 애플리케이션(SPA) 이란? - 멀티 페이지 애플리케이션(기존 방식) - 다른 페이지.. 2023. 2. 21.
React - 11장 : 컴포넌트 성능 최적화 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화(현재) 지난 10장에 이어서 같은 프로젝트를 이용해서 설명하므로, 10장의 프로젝트를 만든 다음에 실습해보자. 11.1 많은 데이터 렌더링해보기 - 실제로 Lag을 경험할 수 있또록 많은 데이터를 렌더링 해보자. App.js import {u.. 2023. 2. 18.