Development Guide

Devleopment Requirements

• Node.js >= 18.0.0
• Npm >= 9.0.0

IDE Settings

Visual Studio Code 가 권장됩니다.

ESLint 및 Prettier 의 정상 동작을 위해 아래의 extensions 가 필요합니다.

• https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Conventions

프로젝트는 eslint 와 prettier 를 사용합니다. 코딩 컨벤션은 이 자동화 도구로만 관리하며 이외는 자유입니다. 변경하고 싶은 룰이 있다면 제안해주세요.

NPM Commands

• start - 프로젝트의 개발 서버를 시작합니다.
• build - 배포를 위한 정적 파일을 빌드합니다.
• lint:fix - 프로젝트 내 모든 파일의 린트 문제를 자동으로 수정합니다.

Project Structure

• cdk - 여러 컴포넌트나 비즈니스 로직에서 공통 사용될 비즈니스 로직이 없는 구성 요소
• components - 비즈니스 로직에서 공통 사용될 비즈니스 로직이 없는 React 컴포넌트
• app - 비즈니스 로직을 포함한 컴포넌트
• store - Redux Store 구성 요소
• model - 전역에서 사용되는 데이터 모델
• styles - 여러 곳에서 import 하여 사용되는 shared style

cdk, components 의 경우 현재 완전히 비즈니스 프리로 관리되지 못하고 있습니다. 최대한만 부탁드립니다.

Store Structure

• history - Undo / Redo 를 위해 전체 상태의 clone
• settings - 문서의 UI 상태를 관리 ( 패널 열림 여부, 프레젠테이션 모드 여부, 재생 등 )
• preferences - 사용자 설정을 관리 ( 언어, 사용자 환경설정 등 )
• document - 문서 정보를 관리
• pages - 문서 내 페이지의 정보를 관리
• objects - 문서 내 개체들의 정보를 관리
• effects - 문서 내 개체들의 이펙트 정보를 관리

Git Flow

• develop 에서 즉시 커밋 또는 브랜치 분기 후 rebase merge 방식을 사용
• 분기 후 최대한 빠른 시일내에 반영하여 서로간의 코드베이스 차이가 최소화되도록 유지
• 당장 완료, 동작하지 않더라도 커밋을 권장합니다.