react-pdf generator

1. 유드림스 페이지 구현

• 학적부열람
• 교과수업 내 개인강의시간표 조회
• 성적 내 금학기 성적관리

2. 이클래스 페이지 구현

• 강의실가기를 통해 수강중인 강의 이클래스 페이지 컴포넌트 구현
• 과제제출하면 칸반보드 todo -> done으로 가도록

3. 성적증명서

• react-pdf gen
  사용할 오픈소스
  react-pdf
  react-pdf-github
• QR gen
  QR gen

4. 메인페이지 로그인 권한에 교직원그룹 추가

React.lazy()

📌 기존 문제점
React에서 컴포넌트 파일을 코드의 최상단에 import로 정의하고 동적으로 불러오기를 사용하면 에러가 발생한다.

📌 React.lazy 를 사용하는 이유
규모가 큰 react 어플리케이션은 많은 요소, 라이브러리 등으로 구성된다. 필요할 때만 어플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 javascript 번들이 사용자에게 전송된다. 이때 react.lazy() 메서드 요소들을 손쉽게 개별 javascript 청크로 분리되는 기본 제공방법을 제공한다.

📌 예제

import React, { Suppose } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App{
	const About = React.lazy(() => import('./About'));
    // import 구문을 반환하는 콜백함수를 인자로 받는다 
    // 1) React 컴포넌트를 포함한다 2) default export를 가진 컴포넌트여야 한다
    
    return(
    	<Router>
        	<Suspense fallback={<div>Loading..</div>}>
            //fallback prop는 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 react엘리먼트를 받아들임
				<Routes>
                	<Route path="/" element=<About/>} />
                </Routes>
            </Suspense>
        </Router>
    );
}
//Router 아래에 supsense -> route로 보여줄 컴포넌트들을 react.lazy()로 불러올것