6장. 테마 커스터마이징
- 테마 설치하기
- git 서버와 Standard/theme 폴더 동기화
- theme 폴더 및 .env 변수 동기화
- 프로 테마 커스터마이징하기
- 서버에 테마를 반영하는 방법
- Api23KeyPair를 활용한 통신 가이드
- Theme 개발시 네이밍 규칙
테마 설치하기
테마 설치하기
1. 설치할 테마를 확인한뒤 다보리 깃서버에서 해당 테마 레포지토리로 이동하여 HTTP url을 복사합니다.
2. dbrerp 소스에서 dabory 디렉토리로 이동합니다.
cd dabory3. themes 디렉토리를 생성합니다.
mkdir themes4. 생성한 themes 디렉토리로 이동합니다.
cd themes5. 복사했던 깃레포지토리의 HTTP url를 git clone 합니다.
git clone http://git.daboryhost.com:10880/dbrerp-themes/eyemsg.git6. dbrerp 소스의 루트 디렉토리에 위치한 public 경로로 이동합니다.
cd ../../public7. /themes/eyemsg/pro 디렉토리를 생성합니다.
mkdir -p /themes/point2u/pro8. 생성해준 /themes/point2u/pro 경로로 이동합니다.
cd themes/eyemsg/pro9. public/themes/eyemsg/pro 경로 안에 dabory/themes/eyemsg/pro 경로의 resources의 심볼릭 링크를 걸어줘야 합니다.
ln -s [타겟경로] [심볼릭 링크 경로] 명령어를 통해 심볼릭 링크를 걸 수 있습니다.
아래 명령어를 입력하여 심볼릭 링크를 걸어줍니다.
ln -s ../../../../dabory/themes/eyemsg/pro/resources resources만약 이 심볼릭 링크가 정상적으로 걸리지 않았다면 css 등 정적인 요소들이 깨져서 나타날 수 있습니다.
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 커스터마이징하기
다보리 컴포저블의 기본 쇼핑몰 테마인 dcdemo의 pro 페이지를 커스터마이징하는 예제입니다.
dcdemo가 설치되어 있지 않다면 프론트엔드 설치하기 예제를 통해 설치를 완료해주세요.
pro의 구조
pro 디렉토리는 다음과 같이 구성되어있습니다. 커스터마이징시 app, para, resources, routes에서 모든 커스터마이징이 이뤄집니다.
예제1
위 이미지처럼 item-details 페이지에서 상품구분, 상품명, 상품 가격, 옵션 등의 데이터들을 출력하고 있습니다.
예제1에서는 item-details 페이지에서 출력하고 있는 데이터를 변경하여 원하는 데이터로 바꿔서 출력하겠습니다.
서버에 테마를 반영하는 방법
수정사항 서버에 배포하기
1. 수정사항을 git repo에 piush합니다.
2. 서버 로그인
3. 아래와 같이 명령어를 입력합니다.
cd /home
all-gitpp-dbrerp 서버계정명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-getHOST의 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 |