Next.js8 React 애플리케이션의 고급 권한 관리 시스템 구현하기: 실제 코드와 주석으로 이해하기 0. React 애플리케이션의 권한 관리 시스템 흐름도초기 접근 프로세스사용자 접근토큰 확인토큰 유효성 검사권한 검증기능별 권한 검증 프로세스CRUD 작업별 권한 확인권한에 따른 UI 요소 표시/숨김기능 실행 전 권한 재확인에러 처리 프로세스권한 없음 처리토큰 만료 처리리프레시 실패 처리1. 소개안녕하세요! 오늘은 프로덕션 레벨의 React 애플리케이션에서 권한 관리 시스템을 어떻게 구현하는지, 상세한 코드와 주석을 통해 알아보겠습니다.2. 권한 관리의 핵심 구조2.1 withAuth HOC (Higher-Order Component)/** * 권한 검증을 위한 Higher-Order Component *@paramgssp - getServerSideProps 함수 *@paramrequiredPermis.. 2024. 11. 13. Next.js의 라우팅 시스템 이란 1. 기본 용어 설명1.1 주요 용어라우팅(Routing): 웹 애플리케이션에서 URL에 따라 다른 페이지를 보여주는 시스템페이지(Page): Next.js에서 route와 연결된 React 컴포넌트동적 라우팅(Dynamic Routing): URL 파라미터를 사용하여 동적으로 페이지를 생성하는 방식Middleware: 페이지 렌더링 전에 실행되는 코드SSR(Server Side Rendering): 서버에서 페이지를 렌더링하는 방식CSt Side Rendering: 브라우저에서 페이지를 렌더링하는 방식1.2 Next.js 라우팅 흐름도 2. File-based 라우팅 시스템2.1 기본 구조 설명pages/ ├── index.tsx # 홈페이지 (/) ├── about.tsx # 정적 페이지 (/abou.. 2024. 11. 12. Next.js의 렌더링 전략: SSR과 CSR, SSG (Hydration, Pre-rendering, Dynamic Routes, Build Time, ISR ) 1. 웹 렌더링의 이해1.1 렌더링이란?렌더링은 코드를 사용자가 볼 수 있는 인터페이스로 변환하는 과정입니다. 웹에서는 HTML, CSS, JavaScript를 브라우저가 이해하고 화면에 표시할 수 있는 형태로 바꾸는 것을 의미합니다.1.2 주요 용어 설명Hydration: 서버에서 보낸 정적 HTML에 JavaScript 이벤트 핸들러와 상태를 입히는 과정Pre-rendering: 미리 HTML을 생성하는 과정Dynamic Routes: URL 패턴에 따라 다른 콘텐츠를 보여주는 페이지Build Time: 애플리케이션을 배포용으로 빌드하는 시점 2. 클라이언트 사이드 렌더링 (CSR)2.1 CSR의 작동 방식const ProductPage = () => {// 상태 관리 const [product.. 2024. 11. 11. React의 고차 컴포넌트(HOC) 1. HOC(High Order Component)란?고차 컴포넌트(HOC)는 React에서 컴포넌트 로직을 재사용하기 위한 고급 기술입니다. 코드로 보면 다음과 같습니다:/** * 기본적인 HOC 구조 *@paramWrappedComponent - 감싸질 컴포넌트 *@returns 새로운 컴포넌트 */const withSomething = (WrappedComponent) => { return class extends React.Component { render() {// 추가적인 props와 함께 컴포넌트 반환 return ; } }} 2. HOC가 필요한 이유2.1 횡단 관심사(Cross-Cutting Concerns) 해결여러 컴포넌트에서 공.. 2024. 11. 10. React 기본 용어 및 개념 (Component, Props, State, 랜더링....) 핵심 흐름 0. React Component의 핵심 흐름React Component는 크게 4가지 핵심 요소로 구성되며, 이들이 서로 상호작용하며 동작합니다: 1. Props와 State Props: 부모가 자식에게 전달하는 데이터 State: 컴포넌트 자체적으로 관리하는 데이터 이 두 데이터는 Data Flow를 통해 앱 전체의 데이터 흐름을 만듭니다. 2. Lifecycle (생명주기) 컴포넌트가 생성되고(mount), 업데이트되고(update), 제거되는(unmount) 전체 과정을 관리 각 단계에서 필요한 작업을 수행할 수 있게 해줍니다. 3. Rendering Props나 State가 변경되면 컴포넌트를 다시 그립니다. Virtual DOM을 통해 변경사항을 효율적으로 실제 화면에 반영합니다. 4. Dat.. 2024. 11. 9. [Next.js] TOAST UI POPUP(팝업 창) 활용 2편 들어가며이번에는 Toast UI 를 활용해서 간단하게 메인 페이지에 팝업창을 띄우는 예시를 포스팅하게 되었다. Toast UI 기본 설명https://hunseop2772.tistory.com/360 [Next.js] TOAST UI 이미지 Blob 처리 및 활용 1편들어가며해당 코드는 회사 코드는 아니고 간단하게 요약한 코드여서 바로 사용한다고 해도 퀄리티에 문제가 될 수 있다. 해당 Toast UI를 사용하게 된 이유는 기존 회사 업무를 진행하며 WEB, API, GWhunseop2772.tistory.com POPUP 창 미리보기 제목은 헤더 쪽 문구를 표현하고 시작일과 종료일은 팝업이 뜨는 기간을 설정하게 하였다. 해당 설정한 날짜와를 DB에 저장하게 되고 이 날짜와 현재 날짜가 동일하면 .. 2024. 11. 4. [Next.js] TOAST UI 이미지 Blob 처리 및 활용 1편 들어가며해당 코드는 회사 코드는 아니고 간단하게 요약한 코드여서 바로 사용한다고 해도 퀄리티에 문제가 될 수 있다. 해당 Toast UI를 사용하게 된 이유는 기존 회사 업무를 진행하며 WEB, API, GW 등 버전 업데이트 및 수정사항이 있으면 사용설명서 등 파일을 직접 서버로 이동하여 올려야 한다는 문제점과 인력 낭비라는 문제가 있어 해당 운영측이나 개발측에서 일일히 수정하고 팝업 같은 경우에는 해당 DB에 직접 접속하여 업데이트를 해야한다는 보안 측면이나 인력낭비를 해결하기 위해 (신) 프로젝트에서는 이를 운영측에서 Toast UI를 활용하여 직접 수정이 가능하게 만들게 되었다.이를 통해 서버, DB로 직접 접속하기 힘든 측에서 권한만 있으면 신규 자료 및 POPUP 창 등을 관리 할 수 있다는 .. 2024. 10. 27. React에서 Redux, Reducer, 그리고 Redux-Saga를 활용한 상태 관리(Redux-DevTools) 리액트 애플리케이션을 개발하다 보면 상태 관리가 복잡해지는 경우가 많습니다. 이런 상황에서 상태 관리를 보다 체계적으로 관리하기 위해 Redux를 사용할 수 있습니다. 또한, 비동기 작업을 효율적으로 처리하기 위해 Redux-Saga를 활용할 수 있습니다. 이번 글에서는 리덕스(Redux), 리듀서(Reducer), 사가(Saga)에 대해 자세히 알아보겠습니다. 1. Redux란?Redux는 애플리케이션의 상태를 중앙에서 관리하는 라이브러리입니다. Redux는 상태를 예측 가능하게 관리하며, 다양한 컴포넌트 간에 데이터를 쉽게 공유할 수 있도록 돕습니다.Redux의 주요 개념은 다음과 같습니다:스토어(Store): 애플리케이션의 상태를 담고 있는 객체입니다.액션(Action): 상태에 변화를 일으키는 .. 2024. 7. 28. 이전 1 다음
