프로그래밍 공부방

1. lazy importReact는 Single page Application으로, html js 파일이 하나만 생성된다. 그래서 파일사이즈가 크기 때문에 첫 페이지 로딩속도가 느리다. 이를 해결하기 위해서 메인페이지가 아닌 다른 페이지들의 로딩을 나중에 할 수 있게 하는것이 lazy import이다.//일반적인 importimport Detail from './routes/Detail.js'import Cart from './routes/Cart.js'//lazy importimport {lazy, Suspense, useEffect, useState} from 'react'const Detail = lazy( () => import('./routes/Detail.js') )const Cart = l..

react-queryajax 요청중 자동으로 데이터를 다시 가져오거나, 요청 실패시 몇초 간격으로 재시도, 다음 페이지 미리 가져오기 등 실시간 데이터를 보여주는 사이트에서 유용하다. react-query 설치npm install react-query@3 react-query 셋팅import { QueryClient, QueryClientProvider } from "react-query" //1번const queryClient = new QueryClient() //2번const root = ReactDOM.createRoot(document.getElementById('root'));root.render( //3번 ); react-quer..

1. 컴포넌트 안에서 쓰는 if/elsefunction Component() { if ( true ) { return true; } else { return null; }} 2. 삼항연산자function Component() { return ( { 1 === 1 ? true : null } )} 3. && 연산자function Component() { return ( { 1 === 1 && true } )} 4. switch/case 조건문function Component2(){ var user = 'seller'; if (user === 'seller'){ return 판매자 로..

localStorage사이트마다 존재하는 저장공간. 5MB 정도의 '문자' 데이터 저장 가능localStorage.setItem('데이터이름', '데이터'); //추가localStorage.getItem('데이터이름'); // 읽기localStorage.removeItem('데이터이름'); // 삭제 localStorage에 array/object 자료 저장, 읽기localStorage.setItem('obj', JSON.stringify({name:'kim'}) );var a = localStorage.getItem('obj');var b = JSON.parse(a) 최근 본 상품 기록 저장하기최근 본 상품의 id를 localStorage의 watched배열에 저장하고, 다른 상품을 봤다면 그 상품의 ..

Redux 장점props 없이 state를 공유할 수 있게 도와주는 라이브러리js 파일 하나에 state를 보관하고, 모든 component에서 직접 꺼내 사용한다. Redux 설치npm install @reduxjs/toolkit@1.8.1 react-redux Redux 세팅//store.jsimport { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }})//index.jsimport { Provider } from "react-redux";import store from './store.js'const root = ReactDOM.createRoot(document.getElementById(..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.