# 3장. Frontend 기반 구조 # .env 의 구조 > ## .env 파일 세팅 예제 ##### 참고자료 Lavavel .env 기본 메뉴얼([https://laravel.kr/docs/5.7/configuration](https://laravel.kr/docs/5.7/configuration)) Lavavel .env Example([https://zetawiki.com/wiki/라라벨\_.env,\_.env.example](https://zetawiki.com/wiki/%EB%9D%BC%EB%9D%BC%EB%B2%A8_.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
\# [Strong Api]
STRGO_API_URL= strong api 연동시 입력합니다.
\### \[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](https://manual.dabory.com/books/quick-start/chapter/2-restfull-api))에서 Gate Token에 대한 내용을 다뤘으니 참조하시고 해당 장을 숙지하시면 이해하는데 도움이 됩니다. #### **참고사항**
`- [ KeyPair/PublicKey 등을 를 생성하는 일반적인 PHP Code`]
[https://www.php.net/manual/en/function.sodium-crypto-box-seal.php](https://www.php.net/manual/en/function.sodium-crypto-box-seal.php)
`- [Sodium 사용 Ajax 제공 (260~262 Lines)]`
[http://git.daboryhost.com:10880/dabory/dbrerp/src/master/routes/web.php](https://manual.dabory.com/-%20%5BSodium%20%EC%82%AC%EC%9A%A9%20Ajax%20%EC%A0%9C%EA%B3%B5%20(260~262%20Lines)%5D(http:/git.daboryhost.com:10880/dabory/dbrerp/src/master/routes/web.php).%20-%20%5B%20DB%20%EC%A0%95%EB%B3%B4%20%EC%95%94%ED%98%B8%ED%99%94%20how%20to%20use%20it%20in%20PHP%20(254~263%20Lines)%5D(http:/git.daboryhost.com:10880/dabory/dbrerp/src/master/resources/views/front/dabory/pro/my-app/popup/popup-form1/form-a/client-app-form.blade.php).)
`- [ DB 정보 암호화 how to use it in PHP (254~263 Lines)]`([http://git.daboryhost.com:10880/dabory/dbrerp/src/master/resources/views/front/dabory/pro/my-app/popup/popup-form1/form-a/client-app-form.blade.php)](http://git.daboryhost.com:10880/dabory/dbrerp/src/master/resources/views/front/dabory/pro/my-app/popup/popup-form1/form-a/client-app-form.blade.php)).
##### **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 구조(표준)** [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/XKvimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/XKvimage.png) ##### **주요 디렉토리 설명** `dabory` 디렉토리는 다보리의 중요한 구성 요소로, 관리자 및 ERP 사용자 메뉴를 커스터마이징 할 수 있도록 설정하는 디렉토리입니다. **`para`** : 이 디렉토리에는 관리자가 설정할 수 있는 다양한 **ERP 사용자 메뉴**와 **시스템 설정 파일**들이 JSON 형식으로 저장됩니다. 이러한 파일들을 통해 ERP 시스템의 메뉴 구성, 권한 관리, 기타 관리 설정 등을 유동적으로 수정이 가능합니다. [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/Z9qimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/Z9qimage.png) **`themes`** : 다보리의 프론트엔드 테마를 커스터마이징 할 수 있는 디렉토리입니다. 각 사이트별로 제공되는 테마를 개별적으로 수정하거나 새로 구축할 수 있습니다. 각 테마의 템플릿, 스타일, JavaScript, 리소스 등을 이곳에서 관리하며, 이를 통해 각 업체나 고객에 맞춤화된 프론트엔드 페이지를 구현할 수 있습니다. [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/V9Ximage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/V9Ximage.png) `public` : public 폴더는 웹 애플리케이션의 진입점이자 외부에서 접근 가능한 모든 파일들이 위치하는 폴더입니다. 다보리 프론트엔드에서 테마 요소에 실제로 접근할 수 있는 디렉토리입니다. para- -/dabory 폴더와 themes 폴더는 위 **dabory** 폴더와 동일한 구조로 이루어져 있습니다. **dabory** 폴더에서는 이미지나 리소스에 접근이 불가능하기 때문에 **public** 폴더에서 심볼릭 링크(symbolic link)를 생성하여 사용합니다. [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/kCQimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/kCQimage.png) \***심볼릭 링크 (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 디렉토리 예시** [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/wLpimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/wLpimage.png) #### **app** 이 디렉토리에는 각 기능별로 정의된 Controller가 있으며, 기능에 따라 명명 규칙을 따릅니다. Controller는 외부 API 호출과 반환된 값들을 view 페이지에 전송하는 역할을 합니다. #### **para** pro 디렉토리에서 사용되는 view 페이지의 구성요소, api에 대한 명시 등등 pro 페이지를 구성하는 전반적인 요소들이 파라메터로 구성되어 있습니다. #### **resources** **p**ro 디렉토리에서 작동하는 정적인 요소들이 포함된 디렉토리입니다. 보통 Controller와 동일한 네이밍 규칙을 따르며, Controller에서 받아온 데이터를 활용해 view 페이지가 구성됩니다. 스크립트 코드와 css, image 등이 포함되어 있습니다. ##### **erp (Back Office)** ERP 디렉토리는 기업이나 조직 내 직원 및 관리자를 위한 백오피스 페이지입니다. 보통 erp의 표준 erp로 작동하지만 pro 페이지 없이 erp만 사용할 수 있는 `erponly` 테마의 경우 pro에 설정된 route 경로로 들어오는 모든 route를 erp 경로로 redirect하여 표준 erp에서만 작동하는 구조로 간결하게 구성되어 있습니다. **- erp 디렉토리 예시** [![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/E99image.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/E99image.png)