1204(월) BE 회의록

어드민 페이지 구현

프로젝트 생성

yarn create vite admin
# React, TypeScript로 생성

모노레포 workspace 생성

yarn workspace admin add [패키지명] # 의존성 설치
yarn workspace admin dev # 개발서버 실행
yarn workspace admin build # 빌드

기본 명령들.

Nav바 및 테스트 컴포넌트 구현

// App.tsx
import { Route, Routes } from 'react-router-dom';
import './App.css';
import { TestComponent } from './components/TestComponent/TestComponent.tsx';
import { Nav } from './components/Nav.tsx';

function App() {
	return (
		<>
			<Nav />
			<Routes>
				<Route path="/" element={<div>Home</div>} />
				<Route path="/about" element={<div>About</div>} />
				<Route path="/abc" element={<TestComponent />} />
			</Routes>
		</>
	);
}

export default App;

// Nav.tsx
// nav바 컴포넌트
export const Nav = () => {
	return (
		<div>
			<a href="/">Home</a>
			<a href="/about">About</a>
			<a href="/abc">Test</a>
		</div>
	);
};

폴더 구조

폴더구조.

components 폴더에 생성하고자 하는 컴포넌트 하위 폴더 생성

그 안에 그 컴포넌트에 필요한 하위 컴포넌트 폴더 또는 파일 생성

TODO

1. 각자 기능을 컴포넌트로 만들어 (기능별로 폴더 만들기)
2. App.tsx에 추가하여 라우트 경로를 등록하고,
3. Nav.tsx 에 추가하여 링크로 접근 가능하게 함.

하고싶은 어드민 페이지 기능

재하

• 서버 자원 사용량 모니터링
• 게시글 관리 페이지 → 모든 게시글 조회
• 어드민 페이지용 인증

준섭

• 회원 관리 페이지 → 회원 10명씩 페이지네이션, 조건으로 필터링
• 에러 로그 모니터링 페이지 → Exception Filter로 에러 로그 파일로 저장, 로그를 읽어 에러 모니터링, 통계 구현
  • 도커 로그 별도로 저장하는 것 필요

이외 하고 싶은거

• 부하테스트랑 오토스케일링, 로드 밸런싱
• E2E 테스트, 유닛 테스트
• 리팩토링
• 코드 개선