프론트엔드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 - 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 - 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. React - 10장 : To-do 앱 실습(컴포넌트 렌더링최적화, 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앱 실습(현재) 누구나 만들어보는 투두앱을 빠르게 만들어서 컴포넌트최적화와 Hooks를 적용해보자. 10-1. 프로젝트 생성 - npx create-react-app todo-app 10-2. UI 구성 - TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여준다. chil.. 2023. 2. 17. React - 9장 : 컴포넌트의 스타일링 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장 : 컴포넌트의 스타일링(현재) 리액트에서 컴포넌트를 스타일링 할때는 다양한 방식을 사용한다. 여러 방식 중에서 정해진 것은 없지만 자주 사용하는 방식을 알아보자. 어차피 css에 대한 포스팅은 아니므로 빠르게 넘어간다. 9-1. 일반 css (제일 많이 사용) - .css파일을 별도로 생성하여 사용한다. 별거 없다. - 이름 짓는 규칙 : BEM을 주로 사용.. 2023. 2. 16. React - 8장 : React 자주 쓰이는 Hooks 총 정리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 (현재) Hooks는 v16.8에 도입된 기능으로 함수컴포넌트에서도 useState, useEffect등의 기능을 제공하여 다양한 작업을 할 수 있도록 해준다. 8-1. useState - 함수 컴포넌트에서 가변적인 상태를 지닐 수 있도록 해준다. import {useState} from 'react'; const Counter = ()=>{ const [value, setVa.. 2023. 2. 15. React - 7장 : 컴포넌트의 Lifecycle Method React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 해당 포스팅은 23년 기준 지금은 잘 사용하지 않는 class형 Component의 라이프사이클에 대해서 설명하고 있다. 현재에는 함수형 Component를 주로 사용한다. 참고로만 알아두자. 7-1. 라이프사이클 메서드의 이해 - 모든 리액트 컴포넌트에는 라이프사이클이 존재하며, 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. - 라이프사이클 메서드는 class형 컴포넌트에만 사용할 수 있다. - 총 세 가지 [마운트, 업데이트, 언마운트] 의 카테고리로 나.. 2023. 2. 14. 이전 1 2 다음
