리액트 정리16 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 - 14장 : 비동기작업 처리와 Axios 패턴을 이용한 예제 프로젝트 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장 : 뉴스 뷰어 예제프로젝트(현재) 오늘의 예제 실습 순서 비동기작업의 이해 -> axios로.. 2023. 2. 22. 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 - 12장 : Immer 라이브러리를 사용하여 불변성 유지 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 라이브러리를 사용하여 불변성 유지(현재) 객체가 복잡해지고 깊어지면 불변성을 유지하며 업데이트가 힘들어진다. immer 라는 라이브러리를 사용하면 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트.. 2023. 2. 20. 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. 이전 1 2 다음
