Jonghyun Jonghyun

오랜만에 지킬(jekeyll) 테마 기반의 깃헙 페이지에서 탈출하려고 합니다. Next.js 리액트 서버사이드 렌더링 프레임워크로 옮겨보았습니다. Mui + Next.js (feat. Typescript) https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 리액트 진영의 컴포넌트는 거의 대부분 MUI를 활용하죠. 그래서 Next.js 예제를 찾아보았더니- 역시 최신 소스가 있군요. Next.js 는 이번 13버전으로 올라오면서 기존 page 라우터 기반에서 App 라우팅 방식으로 구조가 좀 변경되었습니다. 물론 기존 page 기반 라우팅도 선택적으로 활용할 수 있죠. 위 깃헙 소스를 클론하거나 적용하게 되면 아래와 같..

https://redux-toolkit.js.org/introduction/getting-started#rtk-query Getting Started | Redux Toolkit redux-toolkit.js.org RTK Query 소개 RTK Query는 @redux/toolkit 패키지내에서 애드온으로 제공됩니다. 데이터 fetching 및 캐싱의 유즈 케이스를 해결하기 위해 개발되었으며 애플리케이션의 API 인터페이스 계층을 정의하기 위해 작지만 강력한 tool set를 제공합니다. 웹 애플리케이션에서 데이터를 로드하는 일반적인 경우를 단순화하여, 데이터 fetching 및 캐싱 로직을 직접 작성할 필요가 없도록 도와줍니다. RTK Query는 Redux Toolkit 코어 위에 구축되며, 내부적..

2023년 1월부터 시작된 신규 프로젝트를 위해서 NEXT.js 프로젝트에 RTK Query를 사용하기로 결정했습니다. 그러려면 공홈 문서부터 봐야겠죠. https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 열심히 읽어봅니다. 우선, 리덕스 툴킷을 사용하는 목적을 먼저 언급하고 있습니다. 어떤 주제든 먼저 배경에 대해 설명하는게 먼저겠죠. 목적: 자. Redux Toolkit은 Redux 로직을 작성하는 표준 방법입니다. 원래 Redux에 대한 일반적인 세가지 문제를 해결하기 위해 만들어졌습니다. Redux store를 구성하는 것이 너무 복잡하다. Redux를..

안녕하세요? 이번 글에서는 모든 스킬 레벨에서의 개발자들이 고민하는 세션에 대해 생각해 보겠습니다. 여러 블로그들과 포스트들을 참고해 보면 다음과 같습니다. 브라우저의 local storage, session storage 활용하기 및 쿠키 관리, redux-react-session, redux-persist 등등 매우 많은 전략들이 있습니다. Local Storage와 Session Storage 모두 브라우저에서 제공되는 저장소 인데 둘 모두 동일한 기능을 제공합니다. 다만 세션 스토리지의 경우 세션이 유지되는 동안에만 데이터가 유지됩니다. (여기서 세션은 브라우저 탭이라고 이해하면 됩니다.) 간단하게 생각해서 세션 데이터는 쿠키로 유지해보도록 하겠습니다. 필요한 경우 만료기간을 지정할 수 있습니다...

안녕하세요! 신규 프로젝트를 시작할 때 우리 개발자들이 흔히 하게 되는 고민 중에 하나이죠. 새로운 마음으로 이번에는 잘(?) 해보자!! 프로젝트의 폴더(파일) 구조를 잡는 것입니다. 지난(2021) 과제에서 React를 처음 사내 도입할 때는 React 공홈에 있는 "파일구조" 페이지를 잠시 둘러보고 개발하면서 리펙토링을 진행하였습니다. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 동시에 다른 분들의 기술 블로그도 조금 차용하였죠. 최근 구성한 구조는 아래와 같습니다. 보시다시피... 정리가 안되어 있죠. 프로젝트가 끝난지 ..