PRDEN

1. 하이드레이션 https://react.dev/reference/react-dom/client/hydrateRoot hydrateRoot – ReactThe library for web and native user interfacesreact.dev 2. Next.js Server Component https://nextjs.org/docs/app/building-your-application/rendering/server-components Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the se..

제대로 알고 쓰자 1. 등장배경 Front-end frameworks like Vue.js and React.js have arisen primarily to address the challenges and complexities of building modern web applications. These frameworks provide a structured and efficient way to manage the user interface (UI) of web applications. Here are some reasons why these frameworks have become popular: User Experience Demands: Modern web applications require ..

1. ThemeProvider styled-components에서 ThemeProvider를 이용해 공통스타일 속성 관리할 수 있다. 하위 자식의 모든 컴포넌트는 의 props로 넘어가는 theme 값을 사용할 수 있게된. {layout === "dashboard" && ( {/* Context API 활용한 태마 변경 */} {configsButton} )} {layout === "vr" && } {getRoutes(routes)} {/* Dialog popup 전역으로 등록해 두기 */} 2. MUI ThemeProvider 3. reset -css margin 0, padding 0의 의미 : 브라우저마다 default padding 값과, default margin 값이 다 다르다. 그렇기 때문에..

Using Promise.all() is one efficient approach to make multiple API calls concurrently. However, whether it is the most efficient way depends on your specific requirements and circumstances. There are scenarios where calling API requests separately using individual functions might be more suitable. Here are some factors to consider when deciding the most efficient approach for making multiple API..

1. Grid component - The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the DataGrid component. There are two types of layout: containers and items. Item widths are set in percentages, so they're always fluid and sized relative to their parent element. There are five grid breakpoints: xs, sm, md, lg, and xl. https://mui.com/material-u..

1. 미들웨어란?(함수를 반환하는 함수) 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행한다. 예를 들어 전달받은 액션을 단순히 콘솔에 기록, 전달받은 액션 정보를 기반으로 액션을 취소, 다른 종류의 액션을 추가로 디스패치 등 액션 --> 미들웨어1--> next --> 미들웨어2--> next --> 리듀서 --> 스토어 예시 const loggerMiddleware = store => next => action =>{ // 미들웨어 기본구조 }; export default loggerMiddleware // 위와 동일한 의미 const loggerMiddleware = function loggerMiddleware(store){ return func..

1. 자동로그인 1) localStorage에 로그인 유저 정보 담고 (localStorage vs. sessionStorage) 2) 새로고침, 새로운 페이지 접근 시 계속 store에 담아준다. https://velog.io/@devyouth94/%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EC%9E%A5-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [react] 자동 로그인 연장 / 자동 로그아웃 구현하기 ⚠️ token의 보안은 아직 고려하지 못했습니다. 단순히 리프레시 토큰과 액세스 토큰을 핸들링하는 방법에 치중된 내용..

1. useRef https://www.daleseo.com/react-refs/ [React] ref로 HTML 엘리먼트에 접근/제어하기 Engineering Blog by Dale Seo www.daleseo.com 함수 컴포넌트는 인스턴스가 없어서 ref attribute를 사용할 수 없다. forwardRef를 사용하면 부모 컴포넌트로부터 하위 컴포넌트로 ref를 전달할 수 있는데요, 이렇게 전달받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다. 2. forwardRef (useRef와 차이 보여줌) https://merrily-code.tistory.com/121 forwardRef로 함수 컴포넌트의 ref 전달하기 토스의 첫 개발 컨퍼런스,..

1.React의 Router 1) useNavigate() 히스토리 남기지 않고 싶으면 replace: true import {useNavigate} from 'react-router-dom'; export default function App() { const navigate = useNavigate(); const handleClick = () => { // 👇️ replace set to true navigate('/about', {replace: true}); }; return ( Navigate to About ); } 2) 특정 페이지 접근 제한 (Vue와 다르게 Navigation guard 없음) https://www.robinwieruch.de/react-router-private-rou..

1. React.Fragment 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. class Columns extends React.Component { render() { return ( Hello World ); } } 1) short syntax ->빈태그 적어준다. class Columns extends React.Component { render() { return ( Hello World ); } } yarn add sass classnames react-icons (sass, 조건부 스타일링 위한 classnames, 아이콘) 2. Re..