개발은 재밌어야 한다
article thumbnail
반응형

흔히 서버의 원격 저장소의 PaaS로 가장 많이 사용하는건 AWS의 S3입니다.

여기서 PaaS란 (Platform as a Service) 클라우딩 컴퓨팅 서비스 중 하나입니다.

SaaS(Service as a Service)의 개념을 개발 플랫폼에도 확장한 방식으로, 개발을 위한 플랫폼을 구축할 필요 없이, 필요한 개발 요소를 웹에서 쉽게 빌려쓸 수 있게 하는 모델입니다.

네이버 지도 api나 카카오맵 api와 같은것들도 같은 것들도 PaaS의 일종입니다.

 

깃허브에서 레포지토리를 이용하여 이런 Paas형태로 저장소를 api호출로 파일을 불러 올 수 있습니다.

 

자 백문이 불여일견이라고 보자보자 어디보자

 

일단 깃허브에서 repository를 생성해준다.

해당 repository에 깃허브로 업로드하거나 삭제할 수 있다.

저는 이미지 파일들이 프로젝트 파일에 로컬로 가지고 있기에 너무 무거워서 줄이기 위해 방법을 고민하다가 이런식으로 활용했다 정도로만 봐주시면 될 것 같습니다.

원하는 파일을 업로드 해줍니다. (물론 git clone을 통해서 commit하여 push하는 것도 되지만 간단하게 원하는 이미지만 올릴거라 이렇게 진행했습니다.)

웹에 드래그 앤 드랍으로 파일을 올리거나 빨간색 부분을 선택하여 파일을 선택합니다.

파일들이 올라온걸 확인했으면 커밋~

잘 올라와있는걸 확인했으면 해당 파일을 api로 불러올 수 있습니다.

 

반응형

이미지 주소를 복사하거나 새탭에서 이미지 열기를 누르면 해당 파일을 불러올 수 있는 api 주소를 확인할 수 있습니다.

 

그럼 다음과 같이 주소를 사용할 수 있습니다.

https://raw.githubusercontent.com/skarbgud/Github-User-Content/main/KakaoTalk_20211116_144309246.jpg

 

URI의 구조를 설명하자면

https://raw.githubusercontent.com/{owner}/{repo}/{branch}/{file_path}

 

위와 같은 구조로 파일을 호출하여 사용할 수 있습니다.

예시로

<img
	class="d-block img-fluid w-100"
	width="1024"
	height="180"
	src="https://raw.githubusercontent.com/skarbgud/Github-User-Content/main/KakaoTalk_20211116_144309246.jpg"
	alt="image slot"
/>

이런식으로 사용이 가능합니다.

 

추가로 png나 jpg파일은 무겁습니다....

그래서 저는 avif로 파일을 한번 변환하였습니다.

avif에 관한내용은 아래의 글을 확인해보시면 좋을것 같습니다.

https://namu.wiki/w/AVIF

png나 jpg를 다른 파일 확장자로 변환하는 파일은 아래 사이트를 통해서 했습니다.

https://convertio.co/kr/avif-jpeg/

 

AVIF JPEG 변환 (온라인 무료) — Convertio

avif 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.

convertio.co

 

 

참조

https://ninja86.github.io/2019/05/24/1.html

 

[Github] Github를 데이터 저장소처럼 활용해보자

서버 원격 저장소의 PASS로 많이 이용하는 건 AWS의 S3 일겁니다.하지만 S3의 파일들은 형상관리가 힘듭니다. Github를 이용하여 git의 형상관리 형태로 데이터 파일들을 관리할 수 있게 됩니다. GitHub

Ninja86.github.io

https://docs.github.com/en/rest/reference/repos#get-a-repository

 

Repositories - GitHub Docs

List organization repositories Lists repositories for the specified organization. get /orgs/{org}/repos Name Type In Description accept string header Setting to application/vnd.github.v3+json is recommended. org string path type string query Specifies the

docs.github.com

 

반응형
profile

개발은 재밌어야 한다

@ghyeong

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!