프론트엔드 자잘한 피드백

vite proxy 설정을 통해서 백엔드 연동시도가 좋음

// vite.config 파일
export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

디렉토리 구조

• features 중심?

src/
├── app/
├── entities/
├── features/
├── shared/
├── widgets/
├── pages/

• 룰을 만들고 => 코드리뷰를 AI에게 부탁.

확장자

• 타입파일이면 ts로
• /types/Window.ts

any 타입

interface BootStoreState {
  bootStatus: BootStatus;
  systemData: any; 
  errorMessage: string | null;
  bootSuccess: (data: any) => void; 
  ...

• 명확한 타입정의...
• unknown 도 좋은건 아님.

동적 타입 검증

• 동적으로 실행되는 response 데이터의 타입도 검증가능한가?

const SyscallResponseSchema = z.object({
  output: z.string(),
});

...
const response = await fetch('어쩌구...')
const parsed = SyscallResponseSchema.safeParse(response.data);

• 스키마에서 타입 정보 가져오기

const SyscallResponseSchema = z.object({
  output: z.string(),
});

//스키마에서 타입 정보 가져오기
type SyscallResponse = z.infer<typeof SyscallResponseSchema>;

...
executeCommand: async (payload: SyscallRequest): Promise<SyscallResponse> => {
  ...
 

불필요한 props

//props 나머지것들 전달할필요가 없다면? 
function WindowFrame({ title, children, x, y, ...props }: WindowFrameProps) {

Error 위임하기

• ErrorBoundary 사용.

function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <SystemError error={error} onReset={reset} />
      )}
    >
      <Monitor />
    </ErrorBoundary>
  );
}

• EB 예시

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  // 자식에서 에러 발생 시 호출됨
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 로깅 등 부가 작업 가능
  componentDidCatch(error, info) {
    console.error("ErrorBoundary caught:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

response.ok 아닐때의 지저분한 처리

• fetch쪽 코드

  try {
      const response = await fetch('어딘가 패칭...');
      
    //handleApiResponse 호출(아래)
      const data = await handleApiResponse<SystemBootData>(response);
      executeSuccess(data);
    } catch (error) {
      if (error instanceof ApiException) { //뭔 에러인지 정확히 판별도 가능
        fail(`[${error.status}] ${error.message}`);
        ....
     }

async function handleApiResponse<T>(response: Response): Promise<T> {
  if (!response.ok) {
    let errorData: ApiError;
    
    try {
      errorData = await response.json();
    } catch {
      throw new ApiException(
        `Server error: ${response.status}`,
        response.status
      );
    }
    
    throw new ApiException(
      errorData.message || `Server error: ${response.status}`,
      response.status,
      errorData.code
    );
  }
  
  return response.json();
}

• 에러클래스

class ApiException extends Error {
  constructor(
    message: string,
    public status: number,
    public code?: string
  ) {
    super(message);
    this.name = 'ApiException';
  }
}

reducer

• redux 에서 나온 개념.
• state 변경작업(setXXX)이 많다면 그런 메서드를 늘리기보다.. reducer방식으로 풀어보기.
• dispatch({ type, payload })

마우스 무브~

• 매번 리렌더링?
• debounce 직접구현해서 사용

디버깅코드지우기

• console.log..

window.console.log = () => alert("죽음이야..");

리액트메모

• 컴포넌트 전체를 감싸서, 받는 props가 바뀌지 않으면 그 컴포넌트를 다시 렌더하지않음

• const List = React.memo(function List({ items }) {
    return items.map(..<li>.);
  });
  

• items 가 그대로면 그냥 컴포넌트 그대로 재사용 (shallow equality)

커스텀훅

SVGR

• SVG를 React 컴포넌트로 사용 가능. 그라믄 React props로 제어도 가능하겠군..
• 빌드단계에서 svg정보를 최소한으로 빌드.(압축/기타정보 제거등)

테스트 코드 구현

• 문제가 있는 부분의 테스트를 수행
• 비UI
• 서버로직

high number

export const WINDOW_CONSTRAINTS = {
  MIN_WIDTH: 300,
  MIN_HEIGHT: 200,
  DEFAULT_WIDTH: 600,
  DEFAULT_HEIGHT: 400,
} as const;

빈번한 서버 동기화

• 1초 드래그 -> 수십번 API요청...?
• 낙관적 업데이트 (가기도 전에 로컬반영)
• 디바운스로 전송
  • 드래그 종료시에는 즉시 동기화 ?(최종상태만)
• 배치로 처리.
  • 전송해야할 여러가지 일들을 묶어서 보내볼까.

애니메이션

• requestAnimationFrame 사용이 왜 좋을까