6장. 테마 커스터마이징
- theme 폴더 설치방법
- git 서버와 Standard/theme 폴더 동기화
- theme 폴더 및 .env 변수 동기화
- 프로 테마 커스터마이징 예제
- 서버에 테마를 반영하는 방법
- Api23KeyPair를 활용한 통신 가이드
- Theme 개발시 네이밍 규칙
theme 폴더 설치방법
테마폴더 설치하기
참고자료
0. 참고자료 - Docker로 설치하기에서 모든 과정을 완료한 뒤 테마폴더를 설치해주시기 바랍니다.
1. dabory/themes 디렉토리를 생성해준 뒤 themes 디렉토리로 이동합니다.
mkdir themes
cd themes
2. 설치할 테마를 확인한뒤 다보리 깃서버에서 해당 테마 레포지토리로 이동합니다.
예제에서는 쇼핑몰 테마인 "point2u"를 설치하겠습니다.
3. 다보리 깃서버에서 point2u 레포지토리로 이동하여 HTTP url을 복사합니다.
4. git clone을 통해 point2u 소스를 가져온뒤 point2u 디렉토리로 이동합니다.
git clone http://git.daboryhost.com:10880/dbrerp-themes/point2u.git
cd point2u
* 다보리 컴포저블에서 테마는 erp와 pro 두가지 테마가 존재합니다. 아직 테마에 대해서 숙지가 안되신 개발자께서는 아래 링크를 통해 숙지해주시고 진행해주시기 바랍니다.
5. pro 테마에서는 erp와 별개로 pro 테마 안에서 작동하는 비지니스 로직과 resources가 존재합니다.
비지니스 로직 등 보안이 필요한 소스들은 테마폴더 내에서 작동하고 공개적으로 접근이 가능한 public 디렉토리내에서는 테마 폴더
의 resources만 접근이 가능하도록 설정하겠습니다. 이를위해 프로젝트의 public/ 디렉토리의 하위 경로들을 dabory/themes와
동일한 환경으로 구축하겠습니다.
아래 경로로 이동하여 /themes/point2u/pro 디렉토리를 생성해줍니다.
cd public
mkdir -p /themes/point2u/pro
6. 생성해준 /themes/point2u/pro 경로로 이동합니다.
cd themes/point2u/pro
6. 링크를 걸어줄 타겟경로와 심볼릭 링크가 생성될 경로를 체크해야합니다.
ln -s [타겟경로] [심볼릭 링크 경로] 명령어를 통해 심볼릭 링크를 걸 수 있습니다.
아래 명령어를 입력하여 심볼릭 링크를 걸어줍니다.
ln -s ../../../../dabory/themes/point2u/pro/resources resources
만약 이 심볼릭 링크가 정상적으로 걸리지 않았다면 css 등 정적인 요소들이 깨져서 나타날 수 있습니다.
7. 여기까지 진행하셨다면 아래링크를 클릭하여 docker 설치를 완료해주세요.
git 서버와 Standard/theme 폴더 동기화
깃서버 : 테마폴더 동기화
로컬 PC에서의 스크립트 (cd php
):
-
cd $HOME/docker-works/php/
: 홈 디렉토리 아래에 있는docker-works/php/
경로로 이동합니다. -
all-gitpp {website-alias}
:all-gitpp
는 사전 정의된 쉘 함수로, 웹사이트 별로 Git 저장소에서 변경 사항을 가져오고 특정 폴더로 이동하여 업데이트를 수행합니다.{website-alias}
는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.
서버에서의 스크립트 (cdz
):
-
cd /home
: 서버의/home
디렉토리로 이동합니다. -
all-gitpp-host {website-alias}
:all-gitpp-host
는 로컬 PC의all-gitpp
와 비슷한 역할을 합니다. 이 명령은 특정 웹사이트에 대한 Git 저장소 동기화 및 업데이트를 실행합니다. 이전과 마찬가지로{website-alias}
는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.
이러한 스크립트들은 특정 작업을 자동화하여 개발자가 코드 변경 사항을 효율적으로 동기화하고 관리할 수 있도록 도와줍니다. 로컬 PC에서는 개발 환경을 관리하고, 서버에서는 실제 배포된 웹사이트를 관리하는 데 사용될 수 있습니다.
theme 폴더 및 .env 변수 동기화
Theme 폴더 : .env 변수 동기화
프로젝트 루트 경로에서 .env파일로 이동합니다.
(변수 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다.)
현재는 DBR_THEME로 통합되어 DBR_THEME 변수로만 운영되고 있습니다.
프로 테마 커스터마이징 예제
pro 테마 : 기업이나 조직 외부에 있는 게스트 및 고객 구성원을 대상으로 하는 프론트 오피스 페이지
다보리 컴포저블에서 가장 기준이 되는 pro 테마에는 point2u가 있습니다.
프로 테마 커스터마이징 예제
point2u를 초기 적용했을 경우 ui, db에 일부 데이터가 없기 때문에 위와 같이 기본 데이터들만 보여집니다
현재 커스터마이징된 https://p2u.daboryhost.com/
point2u는 상품을 등록하고 판매할 수 있으며 결제, 장바구니 등의 기능으로 커스터마이징한 쇼핑몰 기반의 pro 테마입니다.
- pro point2u 커스터마이징 방법
1. index 페이지 구성
쇼핑몰 기반의 pro 테마 특성상 best 상품, 주간 best 상품, 이벤트 페이지, 할인 페이지 이미지 및 링크 등 다양한 데이터들을 index 페이지에 구성할 수 있습니다.
/list-type1/home-book 파라메터를 통해
2. item 메뉴 그룹
3. 아이템 상세보기
point2u/item-details-book url로 쿼리를 요청하여 특정 아이템 정보를 불러오고 상세페이지를 구성할 수 있습니다. 아이템 리뷰정보와 아이템 세부정보 그리고 해당 아이템의 메뉴정보를 불러와서 item-detail 페이지에서 사용할 수 있습니다.
component : views.shop.item-details
수정중...
서버에 테마를 반영하는 방법
테마를 수정하고 깃서버에 push했다면 실서버에 수정사항을 반영해야합니다.
아래와 같은 방법으로 서버에 반영할 수 있습니다.
1. 서버 로그인
2. 아래와 같이 명령어를 입력합니다.
cd /home
all-gitpp-dbrerp 서버계정명
3. 입력전 수정사항을 반드시
Api23KeyPair를 활용한 통신 가이드
API23JS란?
API23JS는 GUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,
GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.
예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.
-
HOST:
opticalpos
-
GUEST:
eyemsg
HOST 설정방법
1. HOST가 될 사이트의 통합설정으로 이동합니다.
* 사이트별로 메뉴명이 상이할 수 있습니다.
2. Api23 KeyPair Encrypted 메뉴를 클릭합니다.
3. ①, ②를 순서대로 클릭하여 Api23eKeyPair를 생성합니다.
4. 편집기를 실행하여 HOST(예시에서는 opticalpos)의 .env파일로 이동합니다.
4-1. 혹은 command에서 vi 편집기를 통해 .env 파일을 열어줍니다.
5. env파일에 API23E_KEY_PAIR 변수안에 Api23 KeyPair Encrypted 메뉴에서 생성한 Api23eKeyPair 값을 추가해줍니다.
6. 링크를 클릭하여 myapp API23-Apps로 이동합니다.
7. 아래와 같이 차례대로 버튼을 클릭합니다.
8. 아래와 같이 SSO App의 Api23 Keys를 생성할 수 있는 모달창이 열립니다.
App Type : App의 타입을 지정합니다. js를 통해 함수를 사용하여 통신할 것 이기 때문에 js로 하겠습니다.
Sort : 앱의 종료에 대해서 선택합니다. CRM을 기준하로 하기 때문에 표준 CRM인 KingkongCrm을 선택하겠습니다.
OriginUrl : geust로 사용할 url을 입력합니다.
9. Generate New Api23 Keys 버튼을 클릭하여 Api23Key를 생성후 값을 복사하여 메모장에 붙여넣습니다. (추후 HOST Api를 사용하기 위해서 필요합니다.)
10. Save 버튼을 통하여 입력한 값들을 반드시 저장합니다.
GUEST 설정방법
1. HOST 생성방법 3번에서 생성해준 API23eKeyPair 값을 HOST와 동일하게 GUEST의 프로젝트 .env 파일에도 동일하게 넣어주겠습니다.
* 'api23key'키가 아니라 'API23eKeyPair'키를 넣어야합니다.
2. 편집기를 열고 GUEST 사이트의 FrontEnd(dbrerp)에서 HOST의 API를 사용하려는 view 페이지로 이동합니다.
예시에서는 eyemsg의 right.blade.php 파일에 아래와 같이 script를 추가하겠습니다.
<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>
dabory.data-linker.js 사용방법
<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>
<script>
$('#open-signup-popup').on('click', function () {
if (! window.passwdPolicy) {
$.fn.dataLinker.api23Js('setup-get', {
'SetupCode': 'passwd-policy',
'BrandCode': 'member'
}, function (response) {
window.passwdPolicy = response
$('#policy-desc-em').text(window.passwdPolicy['PolicyDesc'])
// console.log(window.passwdPolicy)
$('#join').modal('show');
})
} else {
$('#join').modal('show');
}
});
</script>
dabory.data-linker.js
스크립트를 로드합니다. 이 스크립트는 serverUrl
과 api23Key
파라미터를 통해 API 호출을 처리할 서버와 인증 키를 설정합니다.5번줄 :
- window.passwdPolicy가 존재하는지 확인후 없을 경우
dabory.data-linker.js
에서 제공하는api23Js
메서드를 사용해setup-get
HOST의 API를 호출합니다. - 호출 시, 요청 데이터(
SetupCode
와BrandCode
)를 GUEST로 전송하여 API에서 필요한 비밀번호 정책 정보를 가져옵니다.
이렇게 API23JS는 HOST와 GUEST간의 안전한 데이터 통신을 가능하게 합니다.
- HOST는 API23E_KEY_PAIR를 생성하고 API23_KEY를 발급하여 GUEST에게 제공합니다.
- GUEST는 API23_KEY를 사용해 HOST API를 호출하여 필요한 데이터를 가져옵니다.
이를 통해 HOST의 API 데이터를 GUEST 사이트에서 효율적으로 사용할 수 있습니다.
Theme 개발시 네이밍 규칙
테마/계정/DB 복사 시 중복 단어로 인한 오류 방지를 위한 네이밍 규칙
🔎문제사항
테마나 DB를 복사할 때, 폴더명과 내부 콘텐츠의 텍스트가 함께 일괄 변경되면서 예상치 못한 문제가 발생할 수 있습니다.
예를들어
- 예를 들어, 기존
composable
테마를 복사해 **새로운 테마인myaccount
**로 변경하는 경우,
편집기에서composable
이라는 단어를 전체 검색 후 변경하게 되면 폴더명뿐 아니라 내부 콘텐츠의 모든composable
텍스트가 **myaccount
**로 바뀌어버립니다. - 이와 비슷한 문제가 DB 복사 시에도 발생할 수 있습니다. DB 사용자 이름(
composable_db
)이 포함된 특정 값들이 일괄 변경되면서 Definer나 테이블 내 데이터까지 변경되어 원치 않는 데이터 수정이 일어날 수 있습니다. - 따라서 이러한 문제를 방지하고, 다른 테마나 DB로 복사 작업을 보다 편리하게 수행하기 위해 아래와 같은 네이밍 규칙을 제안합니다.
🛠 해결방안
1️⃣테마명, 계정명, DB명에 언더바(_) 사용하기
기존방식 |
✅변경방식 |
분류 |
composable | ✅ compos_able | theme |
myaccount | ✅ my_account | theme |
composable_db | ✅ compos_able_db | db |
myaccount_db | ✅ my_account_db | db |
2️⃣도메인(URL) 생성 시 하이픈(-) 사용하기
기존방식 |
✅ 변경방식 |
분류 |
composable.com | ✅ compos_able.com | domain |
myaccount.com | ✅ my_account.com | domain |