testmodule-carlosyang v0.3.3

클래스노트 웹 에디터 모듈

개발 환경

개발 환경 실행

개발 모듈 설정

npm install
or
yarn

개발 서버 구동 (3000 포트)

npm run start
or
yarn start

스토리북 확인 (9009 포트)

npm run story
or
yarn story

NPM 빌드

개발 내용 빌드

npm run dist:npm
or
yarn dist:npm

배포 경로

./dist/ - 빌드된 코드 경로

로컬 상대경로 설치
(project/ - 명령어를 수행할 경로, package.json과 동일한 위치)

npm install ../editor_module/module/ - 해당 패키지 경로에서 웹 에디터 모듈의 상대경로를 기술
or
yarn add ../editor_module/module

의존 패키지 (Major)

상세 설명 추가 필요

React

자바스크립트 프론트엔드 라이브러리

TypeScript

자바스크립트의 슈퍼셋 언어

Redux/Toolkit

리액트 상태 관리

Emotion

리액트 컴포넌트 스타일 처리

Axios

URL 호출

Draft-js

글쓰기 에디터 핵심 모듈

Storybook

컴포넌트 개별 UI 및 동작 확인

의존 패키지 (Minor)

update will be continue...

• Craco : CRA용 웹팩 재 설정(alias)
• react-beautiful-dnd : 드래그 앤 드롭
• react-color : 글쓰기 모듈 컬러피커 용
• react-datepicker : 글쓰기 모듈 달력 및 시간 설정용
• react-modal : 리액트 모달 팝업

웹 에디터 모듈 구조

웹 에디터의 구조에 대해 기술합니다.
모든 경로는 ./src 로부터 절대경로로 기술합니다.

데이터의 흐름

1. 에디터 모듈 진입
2. 특정 기능 호출(페이지)
3. store로 reducer요청
4. 페이지에서

app

모듈의 핵심 기능들이 모여 있다.

store.ts

Redux/toolkit에서 사용되는 Reducer들을 전체적으로 관리하는 스토어를 의미한다.

Components

특정 페이지에 종속되지 않는 컴포넌트의 모임을 의미한다.

Features

페이지나 기능 단위의 모임을 의미한다.

텍스트 에디터 (features/textEditor)

데이터

데이터의 흐름에 대해 추가 정리

Redux

리덕스는 리액트에서 사용되는 데이터의 흐름을 관리하는 라이브러리 입니다.

store(/app/store.ts)

Provider(/app/EditorModule.tsx)

앱 전체를 감싸는 최상단 모듈에서 Provider로 감쌉니다.
Provider의 하위에서 사용되는 리듀서들에 데이터를 공급하고 action을 통해 데이터를 갱신합니다.

function EditorModule(props: IEditorModuleProps): React.ReactElement {
  return (
    <Provider store={store}>
      // some codes..
    </Provider>
  );
};

combineReducers

사용되는 리듀서를 combineReducers를 통해 rootReducer에 등록합니다.
스토어는 프로바이더에 공급되어 하위의 모든 컴포넌트에 루트리듀서를 통해 데이터를 제공합니다.

export const rootReducer = combineReducers({
  modalReducer,
  editorStateReducer,
  editorEventReducer,
  //...
});

action

slice

reducer

selector

dispatch