[React] 구글 Keep만들기1

리액트 생성 및 전체 구조 생성하기

vite를 이용한 리액트 생성

npm init vite

npm install

필요한 패키지 설치

npm install dayjs html-react-parser @reduxjs/toolkit react-quill uuid react-toastify styled-components react-icons react-router-dom react-redux

• dayjs: 시간포맷
• html-react-parser
• @reduxjs/toolkit
• react-quill : editor를 위한 모듈
• uuid
• react-toastify
• styled-components
• react-icons
• react-router-dom
• react-redux
  npm i --save-dev @types/styled-components @types/uuid
• dev dependency 설치

폴더 구조 생성

src
	> assets
    > components
    > hooks
    > layout
    > pages
    > store
    > styles
    > types
    > utils

pages 구조 생성

src > pages > AllNotes > AllNotes.tsx
						 AllNotes.styles.ts
			  ArchiveNotes > ArchiveNotes.tsx
              				 ArchiveNotes
              TrashNotes > TrashNotes.tsx
              			   TrashNotes.styles.ts
              TagNotes > TagNotes.tsx
              			 TagNotes.styles.ts
              ErrorPage > ErrorPage.tsx
              			  ErrorPage.styles.ts

src/pages/index.ts에서 컴포넌트를 모아서 한번에 내보낸다.

export {default as AllNotes} from './AllNotes/AllNotes';
export {default as ArchiveNotes} from './ArchiveNotes/ArchiveNotes';
export {default as TrashNotes} from './TrashNotes/TrashNotes';
export { default as TagNotes } from "./TagNotes/TagNotes";
export { default as ErrorPage } from "./ErrorPage/ErrorPage";

그러면 사용할때
import { AllNotes, ArchiveNotes, TrashNotes, TagNotes, ErrorPage } from './pages' 이렇게 쓸 수 있다.

그냥 export해서 import가져와도 되지만.. 이런 방식도 사용한다는점 알아두고 여러가지 방법에 익숙해져보기!