Introduction
기본개념인데.. 이 기본개념을 알고는 있지만 활용까지 생각하는 사람들이 좀 없는것같아서 써봄
졸라간단하고 기초적인 부분이다.
# 원하는 이미지를 웹에서 찾아서 내 웹사이트에 써보자.
걍 구글에서 귀여운 비숑프리제 강아지 사진을 내 웹사이트에 넣고싶다.
저렇게 원하는 이미지에 마우스 우클릭하고 이미지주소를 복사한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>img test</p>
<img
src="https://media.istockphoto.com/id/1388796467/ko/%EC%82%AC%EC%A7%84/%EC%82%AC%EB%9E%91%EC%8A%A4%EB%9F%AC%EC%9A%B4-%EC%A0%8A%EC%9D%80-%EB%B9%84%EC%88%91%EC%9D%80-%ED%99%94%EC%B0%BD%ED%95%9C-%EB%B4%84-%EC%9E%94%EB%94%94%EB%B0%AD-%EC%A3%BC%EC%9C%84%EB%A5%BC-%EC%82%B0%EC%B1%85-%EA%B0%95%EC%95%84%EC%A7%80%EB%A5%BC-frise-%ED%99%9C%EC%84%B1-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B0%95%EC%95%84%EC%A7%80.jpg?s=612x612&w=0&k=20&c=Add6F8rCS6wrcdyEehWkOvCFdoqsj3DUixFgtwog_RM="
alt="">
</body>
</html>이렇게 간단한 html파일을 만들었다.
이미지태그에 저 링크를 갖다 붙여넣어주셈
잘 동작한다.
이런식으로 모든게 작동할 수 있다.
# github
girhub레포지토리를 만들고 갖다 쓸 수 있다.
깃헙 레포지토리를 대충 만들고,
똑같이 이미지 주소 복사하고
html에 갖다 넣으면,
사진을 잘 불러온다.
# aws에서 s3도 이렇게 쓸 수 있다.
s3 스토리지 +정적웹사이트
# 개요 s3는 simple storage service의 약자이다. s3가 세 번 들어간다는 뜻. 말그대로 우리가 구글클라우드나 뭐 네이버클라우드에다가 사진들 넣어두고 쓰는 뭐 그런 느낌의 서비스다. 데이터파일을
jacobowl.tistory.com
이전에 포스팅했던 s3포스팅인데,
s3에서도 버킷만들고 이미지 넣으면 객체데이터를 https링크로 이용할수있는 링크를 제공함.
# notion에서도 이런식으로 이미지 가져와서 쓰는거다.
노션도 이렇게 다른 서버에서 이미지 요청해서 가져오는거임.
# 그럼 왜 굳이 스토리지를 쓰는걸까?
그럼 왜 우리는 스토리지를 쓰는걸까? 그냥 저렇게 다른 공용서비스에 원하는 사진 올리고 링크복사해서 내 사이트에서 끌어와서 쓰면되는거아님?
1. 보안설정이 가능하다
이전 aws s3서비스를 포스팅했을때, 쓴 내용 대충 캡쳐따왔는데, 저렇게 이 버킷에 접근할수 있는 요청을 제한할 수 있다.
실제로 나도 보안때문에 서비스를 만들땐 그냥 내 웹서버에서 클라이언트한테 이미지 보내주는 방식으로 구현했었다.
2. 이미지뿐 아니라 이것저것 다 됨
웹에 이미지를 업로드하면 이미지링크가 자동으로 생성이 되는데 단순 이미지일 뿐이다.
디렉토리나 동영상 뭐 기타등등 파일들은 이런식으로 간단히 이용하기는 힘들다.
3. 돈 더내면 용량 제한없음
실제로 저런 서비스들을 쓰다보면 이미지 용량제한이 있다.
깃헙같은경우는 한 레포지토리당 500MB를 초과하면안되고, 다른 서비스들도 너무 용량이 큰 이미지를 업로드 못하게해놨다.
스토리지 서비스를 이용하면 그만큼 돈을 더 내고 큰파일을 저장하고 쓸수 있다.
4. 법적문제
사실 지금 이 포스팅은 내가 로컬에서 간단히 테스트해놓은 거라 작동하는걸수도 있는데 특정 사이트들은 이런 무분별한 요청들을 차단을 해놓는다. 되더라도 robot.txt로 법적허용범위 제한해놔서 나중에 문제생길수도 있다.
이게 왜 걸릴수가 있냐면, 예를들어 내 웹사이트가 이미지를 링크로 끌어올때 이것도 네트워크 요청이기때문에 헤더값을 붙여서 요청을 한다. 근데 이 헤더값에 어떤컴퓨터가 어떤 아이피에서 어떤사용자로 요청했는지 다 처담겨있음. 그래서 추적이 가능하다.
될수있으면 기업들은 사적이익추구나 이런방향이 없다면 고소를 안하지만 미친놈처럼 크롤러를 채굴기마냥 처돌리면 잡아내겠지?
물론 헤더값을 일반유저처럼 넣어서 요청하면 위장할수 있긴하다.
5. 링크가 변할 수 있음
깃헙같은경우는
https://github.com/내계정/teststorage/blob/main/%ED%94%84%EB%A1%9C%ED%95%84.jpg?raw=true이런식으로 양식이 있는데, 나중에 깃헙이 운영방식을 바꾸거나 하면 이런 링크가 바뀔 수 있다.
그럼 내 웹사이트의 링크를 전부다 바꿔야한다.
스토리지는 이런 패턴을 쉽게 바꾸지 않을것이다. 돈내고쓰니까..
사실 코딩하면서 html만져보면서 가장 기본적으로 배우는건데 이걸 응용을 못해서 이런생각을 해보는 사람이 없어서 포스팅을 해봤다.
모두 안녕한 코딩하세요.
'etc > etcTools' 카테고리의 다른 글
| chat gpt 오류 // Something went wrong. If this issue persists please contact us through our help center at help.openai.com. (0) | 2023.10.14 |
|---|---|
| 크롬 다크모드 설정 (0) | 2023.10.05 |
| 티스토리에 vs코드를 포스팅할때(험난한 대여정..) (2) | 2023.05.10 |
| 정규식 플래그 에러 (0) | 2023.03.30 |
| 티스토리 코드 붙여넣기 (0) | 2023.03.08 |