- 개인 블로그 작성
- createBrowserRouter 사용하여 작업
- npm i @toast-ui/react-editor
- 이미지 삽입 시, img 태그 src에 이미지 데이터 전체가 base64로 인코딩 되어 주입 -> DB 저장 시, 레코드 한줄마다 몇 Mb씩 차지하는 상황 발생
- Toast-UI Editor 에서 첨부한 이미지를 File 객체에 담아서 다뤄야함!
- editor 자체에 메소드 [addImageBlobHook] 훅 사용. ( 첨부된 이미지를 file 객체로 받고, img 태그의 src와 alt 속성을 설정해 화면에 표시하는 역할)
인자로 받은 url(이미지 경로)를 img 태그 src에 주입하고, text인자로 받은 값은 alt에 주입한다.
type HookCallback = (url: string, text?: string) => void;
export type HookMap = {
addImageBlobHook?: (blob: Blob | File, callback: HookCallback) => void;
};
-
이미지 파일 서버로 전송
-
파일이 저장된 경로만 DB저장 후, img 태그의 src 속성으로 사용.
-
blob : 첨부된 이미지를 file 형태로 받기
-
callback(url, string) : img 태그를 만들어 화면에 이미지를 표시. 인자로 받은 url(이미지 경로)를 img 태그의 src에 주입하고, text 인자로 받은 값은 alt에 주입함.
- npm i @toast-ui/editor-plugin-color-syntax
- npm i @toast-ui/editor-plugin-code-syntax-highlight
- npm i prismjs
- npm i moment
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
{
path: "",
element: <MainPage />,
},
{
path: "post",
element: <PostPage />,
},
{
path: "post/detail/:id",
element: <PostViewPage />,
},
],
errorElement: <ErrorPage />,
},
{
path: "/portfolio",
element: <PortfolioPage />,
},
]);
https://react.vlpt.us/redux-middleware/08-json-server.html 연습용 서버
https://pinenamu.tistory.com/414
1. src 폴더 밖에 data.json 파일 생성
2. data.json 생성
3. data.json 기반으로 서버 오픈
$ npx json-server ./data.json --port 4000
- 모달 ESC 버튼으로 닫기
- 에디터
- 스켈레톤 UI
- 글 삭제, 수정
- 글 좋아요 기능
- 댓글 추가, 수정, 삭제
- 대댓글 기능
- 글 필터링 기능 ( 탭으로 분리된 부분)
- 공유하기 기능
- 페이지 네이션, 무한스크롤
- select 리스트 따로 데이터로 빼기
- 새로고침해도 filter 그대로 적용되어있게되기