PRDEN

React Query의 이점1. 캐싱 반복적인 비동기 데이터 호출 방지, 최신데이터 : fetch, 기존데이터 : stale 2. Client 데이터와 Server 데이터간의 분리  3. React-Query가 데이터를 다루는 방법 : Context API 기반server 데이터를 관리하는 QueryClient가 Query를 사용할 때 명시하는 Key 기반으로 데이터를 저장한다. QueryClient는 단순히 서버에서 불러온 데이터를 저장하는 용도로 사용 4. get의 useQuery첫 번째 파라미터로 unique key를 포함한 배열이 들어간다. 이후 동일한 쿼리를 불러올 때 유용하게 사용된다.첫 번째 파라미터에 들어가는 배열의 첫 요소는 unique key로 사용되고, 두 번째 요소부터는 query ..

1. Next-Auth소셜로그인, 자체 로그인 구현 쉽게 가능.  https://next-auth.js.org/getting-started/example Getting Started | NextAuth.jsThe example code below describes how to add authentication to a Next.js app.next-auth.js.org

CSS Module -> SASS로 && UI Framework (Ant Design or MUI)섞어서 사용. TailwindCSS && Headless UI(무제한 사용은 유료임)CSS-in-JSCSS-in-JS libraries such as styled-jsx, styled-components, and emotion 특징1. Styled JSX- Next.js의 내장 기능으로 별도의 패키지 설치 필요없음2. 자바스크립트 코드 안에 정의한 CSS는 실행 도중 또는 컴파일 시점에 CSS로 변환된다.  단점 :1. 코드 내에서 CSS에 대한 의존성이 점점 더 커지며, 애플리케이션 번들이 커지고 느려지게 될 가능성이 있다. -> 큰 사이트 적절하지 않음. 2. 서버가 미리 CSS 규칙을 생성해 놓아도 클..

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의 보안은 아직 고려하지 못했습니다. 단순히 리프레시 토큰과 액세스 토큰을 핸들링하는 방법에 치중된 내용..