Quiz

• codeMirror : 코드 입력창 생성

• 입력 언어 java 로도 설정 가능함
  

• MarkDown 처리

• 기본 사용을 위한 MarkDown , 이쁘게 출력을 위한 rehypeHighlight
  

• AnimatePresence 동작 효과 설정

• y 축 기준 위쪽이 - , 아래쪽이 +
  

• x 축 방향

   ↑ y축 -
   |
   |
   ●────────────→ x축 +
   |
   |
   ↓ y축 +

• 단, 위 기능들을 이용 시 먼저 라이브러리 설치해야 함
  

vite + React

왜 vite 로 React App 을 생성하는가?

• 속도가 훨씬 빠르며 CRA 의 임포트 문제를 해결할 수 있다.

vite 생성 과정

• React 파일에서 프롬프트 실행

• vite 프로젝트 생성 과정
  
  

• 5173 서버로 실행된다
  
  

• main.jsx = index.js

• 스토어 설정 장소
  

• 웹브라우저 자동 실행
  (프로젝트 생성 후 한 번 설정하기)
  

• vite.config.js 에서 프록시 설정
  

• index.js 에서 경로가 붙어있는 axios 객체를 만듬
  

  "/api" 라는 요청경로가 붙어있는 axios 객체

• eslint 로 작성 규칙을 만들어서

useEffect 내부의 return

useEffect(() => {
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize); // 정리
  };
}, []);

"다시 실행되기 전이나 리렌더링되기 전에 정리해주는 느낌"

Timeout

• Timeout Id 를 여러곳에서 사용해야 하니 store 에 저장

대댓글의 답글 수정 삭제

• css 가 아닌 상태값으로 요소를 제어

• cx는 object 로 제어가 가능함
  

보완메모

1. Vite Proxy 는 왜 설정하는 건가?
2. 2번 창이 왜 띄웠는가?