3장. Frontend 기반 구조

• .env 의 구조
• .env.dabory 와 Gate Token
• 다보리 Frontend 폴더 구조
• 다보리 Theme 폴더의 구조

.env 의 구조

.env 파일 세팅 예제

 참고자료

Lavavel .env 기본 메뉴얼(https://laravel.kr/docs/5.7/configuration)

Lavavel .env Example(https://zetawiki.com/wiki/라라벨_.env,_.env.example)

# [Dabory]
ERP_THEMES=테마명입력 (해당 테마 설치후 입력)
LOCALE_SEQUENCE=다국어 사용 목록
APP_MOBILE_NO=아직 사용X
TAG_LINE=아직 사용X
CDN_TYPE=미디어 CDN (aws-s3 or local)
MEDIA_URL=미디어 base url 지정(미디어가 local or a3)
FAVICON_PATH=파비콘 파일 path
IS_SKIP_DBUPDATE=DBUPDATE 스킵 or 사용
IS_ON_MEMBER_SIGNUP=아직 사용X

## [MetaMask]
CHAIN_ID=0xE67B
CHAIN_NAME='Dang Smart Chain'
RPC_URLS=http://3.38.62.211:8545
NATIVE_CURRENCY_NAME=DGT
NATIVE_CURRENCY_SYMBOL=DGT
NATIVE_CURRENCY_DECIMALS=18
BLOCK_EXPLORER_URLS=https://explorer-staging.dangnn.co.kr

### [asset & cache]
BROWSER_CACHE=브라우저 캐시사용  (개발단계에서 false)
CSSJS_URL=local or asset url 입력          (개발단계에서 local)

### [Printer]
REPORT_SERVER_URL=프린터 서버 base url

### [Laravel]
APP_NAME=앱 이름
APP_ENV=.env 기본 메뉴얼 참고
APP_KEY=base64:.env 기본 메뉴얼 참고
APP_DEBUG=.env 기본 메뉴얼 참고
APP_URL=앱 url
LOG_CHANNEL=stack
LOG_LEVEL=debug
DB_CONNECTION=사용x
DB_HOST=사용x
DB_PORT=사용x
DB_DATABASE=사용x
DB_USERNAME=사용x
DB_PASSWORD=사용x

BROADCAST_DRIVER=사용x
CACHE_DRIVER=사용x
FILESYSTEM_DRIVER=사용x
QUEUE_CONNECTION=사용x
SESSION_DRIVER=사용x
SESSION_LIFETIME=사용x
MEMCACHED_HOST=사용x
REDIS_HOST=사용x
REDIS_PASSWORD=사용x
REDIS_PORT=사용x

MAIL_MAILER=.env 기본 메뉴얼 참고
MAIL_HOST=.env 기본 메뉴얼 참고
MAIL_PORT=.env 기본 메뉴얼 참고
MAIL_USERNAME=.env 기본 메뉴얼 참고
MAIL_PASSWORD=.env 기본 메뉴얼 참고
MAIL_ENCRYPTION=.env 기본 메뉴얼 참고
MAIL_FROM_ADDRESS=.env 기본 메뉴얼 참고
MAIL_FROM_NAME=.env 기본 메뉴얼 참고

AWS_ACCESS_KEY_ID=.env 기본 메뉴얼 참고
AWS_SECRET_ACCESS_KEY=.env 기본 메뉴얼 참고
AWS_DEFAULT_REGION=.env 기본 메뉴얼 참고
AWS_BUCKET=.env 기본 메뉴얼 참고
AWS_USE_PATH_STYLE_ENDPOINT=.env 기본 메뉴얼 참고

PUSHER_APP_ID=사용x
PUSHER_APP_KEY=사용x
PUSHER_APP_SECRET=사용x
PUSHER_APP_CLUSTER=사용x

MIX_PUSHER_APP_KEY=사용x
MIX_PUSHER_APP_CLUSTER=사용x

ANALYTICS_UA_ID=
ANALYTICS_VIEW_ID=

ANALYTICS_G_ID=
ANALYTICS_PROPERTY_ID=

.env.dabory 와 Gate Token

제 2장 Rest Api의 구성(https://manual.dabory.com/books/frontend-tutorial/chapter/restfull-api)에서 Gate Token에 대한 내용을 다뤘으니 참조하시고 해당 장을 숙지하시면 이해하는데 도움이 됩니다.

 참고사항

dabory Gate Token(DGT)

• 로그인한 유저가 유저페이지에 접근합니다.
• 백엔드 서버에서 secret_key와 key_pair를 통해서 해당 업체의 db를 생성합니다. (erp_center_db, erp_memory_db,  erp_individual_dbs)
  
• 프론트엔드서버에 생성된 db를 제공합니다.(driver, host, username, database, passwd, public_key) -> client config
•  유저가 메뉴나 링크를 클릭합니다.

[DGT 생성과정 시작]

• 백엔드 api 서버에 DGT를 요청합니다.
• api 서버에서 프론트엔드에서 보낸 사용자의 client config를 통해 랜덤한 20자의 문자열을 생성하고 Sodium을 통해 암호화합니다.
  
• 백엔드에서 DGT를 생성하여 저장하고 status 200, DGT를 반환합니다.
• 프론트엔드에서 반환받은 DGT를 세션에 저장합니다.
• 만약 DGT가 존재하지 않는다면 DGT를 받아오는 과정이 생략됩니다.

[Main Request]

• 이제 프론트엔드에서 보낸 모든 요청에 DGT가 포함되어 요청합니다.

[DCS 생성과정 시작]

• 백엔드에서는 DGT를 통해 DCS를 생성하여 반환합니다.
• 만약 memory_db에 저장된 DGT가 존재하지 않는다면 DCS를 받아오는 과정이 생략됩니다.
• 검증된 DCS를 통해 사용자 DB(erp databases)의 모델에 접근합니다.
• 사용자 db로부터 요청한 data를 얻고 반환합니다.

[요청 끝]

다보리 Frontend 폴더 구조

Frontend 구조(표준)

 주요 디렉토리 설명

dabory 디렉토리는 다보리의 중요한 구성 요소로, 관리자 및 ERP 사용자 메뉴를 커스터마이징 할 수 있도록 설정하는 디렉토리입니다.

para : 이 디렉토리에는 관리자가 설정할 수 있는 다양한 ERP 사용자 메뉴와 시스템 설정 파일들이 JSON 형식으로 저장됩니다. 이러한 파일들을 통해 ERP 시스템의 메뉴 구성, 권한 관리, 기타 관리 설정 등을 유동적으로 수정이 가능합니다.

themes :  다보리의 프론트엔드 테마를 커스터마이징 할 수 있는 디렉토리입니다. 각 사이트별로 제공되는 테마를 개별적으로 수정하거나 새로 구축할 수 있습니다. 각 테마의 템플릿, 스타일, JavaScript, 리소스 등을 이곳에서 관리하며, 이를 통해 각 업체나 고객에 맞춤화된 프론트엔드 페이지를 구현할 수 있습니다.

public  : public 폴더는 웹 애플리케이션의 진입점이자 외부에서 접근 가능한 모든 파일들이 위치하는 폴더입니다. 다보리 프론트엔드에서 테마 요소에 실제로 접근할 수 있는 디렉토리입니다.  para- -/dabory 폴더와 themes 폴더는 위 dabory 폴더와 동일한 구조로 이루어져 있습니다. dabory 폴더에서는 이미지나 리소스에 접근이 불가능하기 때문에 public 폴더에서 심볼릭 링크(symbolic link)를 생성하여 사용합니다.

*심볼릭 링크 (Symbolic Link)
dabory 폴더 안에서는 이미지나 리소스에 직접 접근할 수 없기 때문에, public 폴더에 심볼릭 링크(symbolic link)를 생성하여 dabory 내부의 이미지 및 리소스를 외부에서 접근 가능하도록 연결합니다. 이를 통해 public 폴더를 경유하여 dabory 폴더 내의 리소스를 웹 애플리케이션에서 사용할 수 있습니다.

 추가설명

다보리의 프론트엔드 구조는 매우 유연하고 확장 가능하도록 설계되어 있으며, dabory 폴더를 통해 관리자는 ERP 시스템과 테마를 자유롭게 커스터마이징할 수 있습니다. 또한 public 폴더는 웹 애플리케이션의 외부 리소스를 제공하는 중심 역할을 하며, 필요한 경우 심볼릭 링크를 통해 리소스를 접근할 수 있습니다.

다보리 Theme 폴더의 구조

Theme 폴더의 구조

 pro (Service Page)

 pro 디렉토리는 기업이나 조직 외부에 있는 게스트 및 고객을 대상으로 하는 프론트 오피스 페이지입니다. 표준 ERP와는 별도로 pro디렉토리에서만 사용되는 독립적인 클래스와 로직이 app, resources, routes 등의 디렉토리에 구분되어 존재하며, 표준 erp와는 독립적으로 작동합니다.

- pro 디렉토리 예시

app

이 디렉토리에는 각 기능별로 정의된 Controller가 있으며, 기능에 따라 명명 규칙을 따릅니다. Controller는 외부 API 호출과 반환된 값들을 view 페이지에 전송하는 역할을 합니다.

para

pro 디렉토리에서 사용되는 view 페이지의 구성요소, api에 대한 명시 등등 pro 페이지를 구성하는 전반적인 요소들이 파라메터로 구성되어 있습니다.

resources

pro 디렉토리에서 작동하는 정적인 요소들이 포함된 디렉토리입니다. 보통 Controller와 동일한 네이밍 규칙을 따르며, Controller에서 받아온 데이터를 활용해 view 페이지가 구성됩니다. 스크립트 코드와 css, image 등이 포함되어 있습니다.

 erp (Back Office)

ERP 디렉토리는 기업이나 조직 내 직원 및 관리자를 위한 백오피스 페이지입니다. 보통 erp의 표준 erp로 작동하지만 pro  페이지 없이 erp만 사용할 수 있는 erponly 테마의 경우 pro에 설정된 route  경로로 들어오는 모든 route를 erp 경로로 redirect하여 표준 erp에서만 작동하는 구조로 간결하게 구성되어 있습니다.

- erp 디렉토리 예시