[리뷰/정보] 이미지 뜨는 로그저장소 사이트 만드는 법

[익명(221.146)]

https://github.com/morgrave/orpg 가서 읽으면 더 편함

뭐야? 왜 사이트 만드는 방법은 올리지도 않았는데 직전 글을 날아올렸어? 양심상 찔려서 진짜로 올린다

준비물

- github 회원가입

- git 설치 https://git-scm.com/download/

- Visual Studio Code 설치 https://code.visualstudio.com/

- node 18 설치 https://nodejs.org/download/release/v16.20.2/

node 18 버전으로 테스트했으니까 18버전으로 시작하는 설치 파일을 받자

저장소를 복사한다

https://github.com/morgrave/orpg 에 들어간 뒤 위에서 만든 github 아이디로 로그인한다.

오른쪽 위에 이렇게 생긴 Fork 버튼이 있으니 누른다. 이어서 나오는 초록색 확인 버튼도 누른다.

위 순서대로 눌러서 너만의 저장소에 들어간다.

다운로드

복사된 저장소의 초록색 Code 버튼을 눌러서 주소를 복사한다. 빨간색으로 칠해진 부분이 morgrave가 아니라 너의 아이디여야 한다.

로그 저장용 폴더에 들어가서 우클릭 하고 Git Bash Here 누른다.

새 창이 뜨는데 당황하지 말고 `git clone https://github.com/(깃헙회원가입한아이디)/orpg.git` 입력

(깃헙회원가입한아이디) 그대로 적지 말고 깃헙 아이디를 적자. 깃헙 아이디가 trpggallery이면 `git clone https://github.com/trpggallery/orpg.git` 이 되겠지?

git clone 쓰고 띄어쓰고 나서 방금 복사한 걸 붙여넣고 엔터 치면 로그저장소 폴더가 다운받아진다.

잘했다! 한 70%는 여기서 떨어져나갔을 것 같다 남은 30%는 힘내자

이제 위에서 다운받은 Visual Studio Code를 실행한다.

폴더 열기로 다운받은 orpg 폴더를 선택한다.

폴더가 열렸으면 짤에 있는 걸 그대로 누르고

화면 아래에 창이 열리면 토씨 하나 안 틀려쓰고 아래대로

`npm i`

쓰고 엔터

기다렸다가 다 끝나면

`ng serve`

을 한 뒤 뭔가 열심히 돌아가는 게 완료되기까지 기다려주자.

완료된 뒤 http://localhost:4200/ 에 들어가면

이렇게 샘플 로그가 셋 튀어나온다.

봤으면 명령어들을 입력했던 창에서 Ctrl + C 를 눌러서 끄자.

로그 업로드 준비

바꿔야 할 설정 파일이 3개 있다.

`orpg/.github/workflows/main.yml` 경로에 있는 파일을 Visual Studio Code로 연다.

맨 아래에 보이는 `npm run ng -- deploy --name="waldo" --email="[e-mail]" --no-silent` 에서 name과 email 뒤에 있는 문자들을 github에 가입할 때 쓴 아이디와 이메일로 바꿔준다.

만약 아이디가 trpggallery이고 이메일이 [e-mail] 이라면

`npm run ng -- deploy --name="trpggallery" --email="[e-mail]" --no-silent` 으로 바꾸고 저장한다.

다음은 이 둘 `orpg/src/environments/environment.prod.ts` 와 `orpg/src/environments/environment.ts`

열면 `user: "morgrave",` 라고 된 부분을 github 아이디로 갈아준다.

위 예시대로라면 `user: "trpggallery",` 으로 바꾸고 저장하면 된다.

**파일 하나만 바꾸지 말고 둘 다 바꾸자.**

로그 업로드 준비2

다시 아까 열었던 터미널에서 `ng serve` 를 돌리고 비교하면서 보자.

`orpg/src/app/shared/models/campaigns.model.ts` 를 Visual Studio Code로 연다.

앞으로 모든 로그를 업로드할 때는 이 파일만 손대면 된다.

롤20 로그 집어넣기

크롬으로 롤20 들어가서 채팅창 맨위에 보이는 "이 게임의 모든 채팅 내용 보기"

들어가서 "한 페이지로 보기"

이 다음이 좀 어려운데 크롬에서 F12를 누르면 나오는 창에서 Element 를 누르고

빨간 원 친 화살표를 누른 다음 로그의 가장 윗부분을 훑으면 오른쪽 창에 `<div class="content">` 라고 적힌 부분이 나온다.

이걸 좌클릭 하고 Ctrl + C로 복사한 뒤

`orpg/src/campaigns/TEST/logs` 에 있는 `1.html`을 열고 Ctrl + A로 전체 선택해서 내용을 지워버린 뒤 방금 복사한 걸 Ctrl + V 로 붙여넣고 저장한다.

저장하고 ng serve가 돌아가는 동안 `http://localhost:4200/` 에 접속했을 때 새로 집어넣은 로그가 나온다면? 잘했다...

이제 github에 올리기만 하면 됨

github에 들어가서 토큰이란 놈을 발급받는다. https://hoohaha.tisto필터링조까ry.com/37 참고. 링크 복붙할 때 "필터링조까" 는 지우고 복붙해줘.

저걸 그대로 따라해서 이상한 영어들로 된 토큰을 발급받고 나면

터미널에서 ng serve가 돌아가는 중이라면 Ctrl + C로 꺼주고 아래에 있는 걸 순서대로 실행한다.

`git remote remove origin`

`git remote add origin https://(너의깃헙아이디):ghp_(아주복잡한ghp뒤에있는토큰들)@github.com/(너의깃헙아이디)/orpg.git`

`git add .`

`git commit -m "test"`

`git push origin master`

두번째 줄에서 좀 바꿔줘야 할 게 많은데 github 아이디가 trpggallery였으면 새로 발급받은 토큰이랑 해서 대충 아래같은 모양이 나올거임.

`https://trpggallery:[e-mail]/trpggallery/orpg.git`

이렇게 맨 아랫줄 `git push origin master` 까지 하고 20분 정도 여유롭게 기다린 뒤

팀원들한테 `https://(너의깃헙아이디).github.io/orpg/` 보여주고 잘 나온다고 하면 성공이다.

저렇게 설정해서 성공했으면 다음부터 새로운 로그 넣을 때

`git add .`

`git commit -m "deploy"`

`git push origin master`

이 세 줄만 해주면 된다.

git push 하고 나서 딱 한번만!! 이거 해줘

복사한 저장소 페이지에서 Settings 찾아서 누르고 왼쪽 바에서 Pages를 찾는다.

오른쪽 Source가 None로 되어있으면 gh-pages로 바꾸고 Save한다.

git push 하고 나서 10분~15분쯤 지나야 저게 나올테니 천천히 해주면 됨.

가이드 쓰긴 했는데

절대 똑바로 안 될 거야... 한번에 그대로 될 리가 없지...

막히는 부분 있으면 턀갤에 댓글 남겨줘

여기까지 성공한 사람이 있으면 다음은 로그를 여러 개 집어넣거나 로그에 이미지나 음악을 집어넣거나 해보자

`orpg/src/app/shared/models/campaigns.model.ts` 를 열어서 대충 어떻게 돌아가는지 보고 만지작거려도 됨

이미지 넣고 싶은 사람 있으면 예제 참고해가면서 `orpg/src/campaigns/TEST` 에 있는 내용물을 입맛대로 바꿔보자.

이미지 넣을 때 어느 채팅에 해당되는 이미지인지 id를 적어넣어야 하는데

`orpg/src/environments/environment.ts` 에서 `debug: false,` 를 `debug: true,` 로 바꾸면 롤20 로그에서 data-messageid 를 복사할 수 있는 버튼이 나온다.

여기까지 따라오는 거 성공한 사람은 댓글 남겨주면 이미지 넣는 가이드도 자세히 써볼게.

뇌 비우고 따라할 수 있게 써보려고 노력했는데 겁나 어렵네

성공하면 나오는 거 : https://morgrave.github.io/orpg

실전 활용 예시 : https://morgrave.github.io/bookstore/

이미지는 PC로 볼때만 나온다

+내용추가 댓글로 FVTT에서 로그 따는법 물어본 게이야

FVTT는 로그 맨 위쪽 짚고 이렇게 빨간 원 친거 복사하면 된다

[ㅁ맘ㅁ(lbsoflbsk)]

스크랩하고 천천히 읽어야지

[acjjang(183.101)]

좀 놀랍네.

[익명(118.235)]

파운드리도 알려죠요!!

[익명(221.146)]

본문에 추가함. 그런데 FVTT는 팀마다 사용하는 모듈이 달라서 내 팀이랑 다른 모듈 쓰면 채팅이 깨지거나 잘 안될거야. css 만질줄 알면 그래도 좀 커버될듯?

[익명(118.235)]

사랑해

[익명(j1u8ndwywn5e)]

무지성 개추

[휴즈씨(hugec9067)]

[익명(210.103)]

70프로 지정된 곳 까지는 일단 했고 좀 길어질거같아서 나머지는 주말에 할거임. 진짜 대단한 노하우 짱짱

[익명(221.146)]

오. 좋네! 사용법도 간편하고 짱짱인듯. 샘플의 roll20 스크린샷 해상도가 꽤 높은것 같은데, 어떻게 찍은거임?

[익명(119.148)]

이번에 시작한 뉴비인데 세팅에서 none으로 되있어서 바꾸려니까 gh-page 항목 자체가 안뜨는데 이런경우는 어떻게 해야하나요

[익명(221.146)]

git push origin master 하고나서 확인해봐야 될듯