Front Components

데브파이브 프론트 프론트컴포넌츠는 더 빠른 개발 환경을 구축하기 위하여 만들어진 라이브러리 입니다.

공식 문서

https://front-docs.devfive.kr

라이브러리 추가

hooks, components 등을 라이브러리에 추가할 수 있습니다.

라이브러리 등록

라이브러리에 추가한 후 index.ts에 등록해야 합니다.

// export 일 경우
export * from './hooks/useAxios';
// export default 일 경우
export {default as useAxios} from './hooks/useAxios';
Copy

로컬에서 라이브러리 사용

라이브러리를 수정 후 정상적으로 spa와 ssr에서 작동하는지 테스트해야 합니다. 정말 쉽게 테스트할 수 있습니다.

1. front-components에서 아래의 명령어를 실행합니다.

pnpm --global link # 이 폴더의 라이브러리를 전역으로 등록합니다. 자동으로 업데이트됩니다.
Copy

2. front에서 아래의 명령어를 실행합니다.

pnpm link --global front-components # 전역으로 등록된 라이브러리를 프로젝트에 등록합니다.
Copy

3. 라이브러리를 수정하면 실시간으로 front에서 수정된 라이브러리를 사용할 수 있습니다.

pnpm build:watch # 라이브러리를 수정하면 자동으로 빌드합니다.
Copy

라이브러리 배포

package.json의 version을 변경한 후 push 합니다.

그 후 github 리포지토리의 release 탭에서 release를 생성합니다. 그렇다면 github action이 자동으로 배포를 진행합니다.
단, 태그의 시작은 v로 시작해야 합니다. ex) v1.1.0

세부 환경 변수

• DF_API_URL : axios base url을 설정
• DF_TITLE : 웹 사이트 타이틀
• DF_OWNER : 웹 사이트 소유자
• DF_EMAIL : 웹 사이트 이메일
• DF_AUTH_HEADER : 인증 헤더 키
• DF_PRINT_DEVFIVE : 데브파이브 로고 출력 여부
• DF_PRINT_ENV : 환경 출력 여부
• DF_LOGOUT_TIME : 로그아웃 시간(초)
• DF_LOGOUT_MODAL_MSG : 로그아웃 모달 메시지
• DF_AUTO_REFRESH : 자동 인증 새로고침 여부

폴더 구조

src
├── cli - cli 명령어를 정의합니다.
├── components - 컴포넌트를 정의합니다.
│   ├── atoms - 정말 기초적인 컴포넌트입니다. 일반적으로 state 를 갖지 않습니다. ex) Button, Box, Flex
│   ├── base - 시스템 구동에 필수적인 컴포넌트입니다. 호스트 프로젝트의 개발자나 유저가 직접 사용하지 않습니다. ex) DevfiveApp, PageGaurd
│   ├── contexts - 컨텍스트를 정의합니다. ex) AuthContext, ThemeContext
│   ├── data - Form 과 연동되며 data 를 품을 수 있는 컴포넌트입니다. onChange 와 value 구현이 필수입니다. ex) ContactForm, CheckboxInput
│   │   └── atoms - Form 을 구성하기 위한 기초적인 data 를 품을 수 있는 컴포넌트입니다. ex) Input, Checkbox, Select
│   ├── elements - 적절히 사용할 수 있는 작은 컴포넌트입니다.. ex) Table, Moda, Map
│   ├── icons - 단순 아이콘 컴포넌트입니다. ex) AppleIcon, NaverIcon
│   ├── layouts - 전체적인 구조가 잡혀있는 컴포넌트입니다. state를 소유하더라도 내부 스타일 및 작동을 위해 사용됩니다. ex) Header, Footer, Sidebar
│   ├── mobiles - 모바일에 특화된 컴포넌트입니다. ex) MobileHeader, MobileSidebar
│   ├── templates - 페이지를 구성하는 컴포넌트입니다. 바로 사용하여 웹 페이지를 구성하며 여러 역할을 갖습니다. ex) BoardDetail, Table
│   │   └── forms - 페이지에서 자주 쓰는 폼입니다. ex) FindForm, LoginForm
│   ├── utils - 컴포넌트에서 사용하는 유틸 함수입니다.
│   └── index.ts - 컴포넌트를 모아놓은 파일입니다.
├── constants - 상수를 정의합니다.
│   ├── motions - motion 을 정의합니다. 페이지 전환 등에 사용됩니다.
│   └── transitions - viewTransitions 를 정의합니다.
├── hooks - 커스텀 훅을 정의합니다.
├── locales - 다국어를 정의합니다.
├── seed - Seed 를 정의합니다. 자동으로 컴포넌트를 생성할 수 있습니다.
├── services - 서비스를 정의합니다. 백엔드와 연동됩니다.
│   └── generators - 서비스를 기반으로 Component 의 속성을 생성합니다.
├── styles - 전역 스타일을 정의합니다.
├── startup - 프로젝트 시작 시 실행되는 코드를 정의합니다. 일반적으로 AppWrapper에서 호출됩니다.
├── store - 전역 상태를 정의합니다.
├── test - 테스트 셋팅을 정의합니다.
├── theme - 테마를 정의합니다.
├── types - 타입을 정의합니다.
├── utils - 외부에서 사용할 수 있는 유틸 함수를 정의합니다.
│   └── env - 환경 변수관련 유틸 함수를 정의합니다.
└── index.ts - 라이브러리를 모아놓은 파일입니다.
files - 외부에서 참조할 수 있는 파일입니다.
Copy

graph TD;
    atom-->data-component;
    data-atom-->data-component;
    atom-->element;
    data-component-->element;
    element-->layout
    element-->mobile
    mobile-->template
    layout-->template
    template-->page
    page-->app
Copy