프론트엔드 개발자가 되기위한 여정 -18

이정우·2022년 9월 27일

frontend-bootcamp

목록 보기

20/60

----18일차---

밸! 하!

밸로그 여러분 안녕하세요!
오늘은 바로 !
이!미!지! 에 대해서 포스팅을 하려고해요!
음 도대체 이미지가 어떻길래 포스팅을 한다는거지??
라는 의문이 드실수도 있는데
이미지를 넣는것은 사실 여러가지를 고려해야해요!
예를 들어 이미지의 크기라던가 이미지의 주소에 공백이 있을때의 문제라던가 등등 많이 있어서
이번에 포스팅을 해보게 됬어요!

그럼 시작합니다!!

1.이미지 저장과정을 알려주세요!(Image-Process)

이미지의 저장과정입니다!
저희가 인터넷에서 이미지를 다운받아올때 이미지 안에 있는 링크를 통해 접속하여서 다운을 받게되는데요!

그럼 브라우저에서는 어떻게 이 이미지를 인식하는지 봐볼까요??
브라우저에서 싸이트를 접속을 할때 과정을 먼저 봐볼까요??

브라우저에서는 먼저 프론트엔드 컴퓨터에서 보내주는 HTML코드를 읽습니다!
이 코드를 읽으면서 중간에 링크를 만나 CSS 와 JS파일을 읽게되는데요!
뿐만아니라 링크테그나 이미지테그안에 있는 링크들도 같이 읽게됩니다!
이때 이미지만 저장해놓은 사진전용 컴퓨터에 접속을 하게되고 이미지 테그안에 넣어놓았던 링크를 타고 따라가 이미지를 넣게 됩니다!
그래서 여러분들이 실제로 이미지가 들어있는 페이지들을 새로고침을 하시면서 유심히 관찰을 하게되면
이미지부분이 HTML보다 조금 늦게 로딩이 되는것을 볼 수 있습니다!
이 과정을 보기위해서 라면
실제로 F12버튼을 눌러 개발자 도구에서 통신부분을 보게되면
HTML코드가 제일 먼저 나오는것을 볼수가 있습니다!또한 브라우저가 어떻게 읽어가는지 과정또한도 알 수 있는거죠!
그럼 이렇게 과정을 알았으니 이미지가 어떻게 저장이 되는지 봐볼까요?

2.이미지? 데이터베이스에 저장하면 안돼?!(Cloud-Storage)

DB에 이미지를 저장하는 방법을 생각해볼수가 있어요
저희가 DB에 데이터를 저장할때 DB의 고유의 타입을 지정해서 넣을수가 있다는것을 저번에 알았었죠??
그중 문자열은 text라는 타입을 통해서 넣을수가 있었는데
그럼 이미지는어떻게 넣을까요??
이미지 링크도 문자열이니 text로 설정하면 될까요??
아닙니다!
바로 BLOB이라는 타입을 통해서 넣을수가 있는데요!
이미지는 각각의 색깔을 가지고 있죠??
저희는 CSS공부를 하면서 색깔을 RGB값으로 바꿔서 숫자형으로 넣을수 있다는것을 알고있습니다!
왜 갑자기 RGB값이 나오냐고요??
바로 BLOB이라는것 자체가 엄청나게 큰 데이터를 의미하기때문입니다
즉 이미지가 DB에 저장이 될때 이미지의 부분부분을 숫자형 데이터로 바꿔서 엄청난 데이터를 저장을 하게되어
BLOB이라는 타입안에 넣게 되는것입니다!!
그냥 단순히 이미지를 넣는것이 아니라 모든값을 RGB값으로 변경을 해서 넣을수있습니다!
그런데!
과연 이렇게 BLOB이라는곳에 넣으면 될까요?? 실제로 많이 사용할까요??
만약 이렇게 큰 데이터를 지속적으로 넣는다면 DB의 용량이 부족해지게되겠고 그러면 결국에는 비용이 증가하겠죠
DB에 BLOB을 통해서 직접적으로 넣을수도있지만 가장 많이 쓰는 방법은

바로 용량이 어어어어엄청 큰 사진저장용 컴퓨터를 만들어서 저장을 한후 불러와서 쓰는 방식을 주로 사용합니다!
하지만 이런부분들이 개인이 준비하기는 어려운것이 사실입니다!
그래서 어떤서비스들이 있냐!
바로

클라우드라는것이 있습니다!

클라우드요??
네!
저희가 생각하는 네이버 클라우드도 포함이긴하지만
실제로 가장 많이쓰는
아마존에서 지원하는 AWS나 구글에서 지원하는 GCP등이있는데요!
이 클라우드를 제공하는 업체들을 provider라고 합니다!
다시말해
저장공간을 빌려주는 개념이라고 생각하시면 훨씬 이해가 편하실것이라고 생각이 됩니다!

그래서 많은 분들이 이러한 것들을 사용해 배포를 하기도 합니다!

다시한번 간단하게 정리를 해드리자면

브라우저가있고 백엔드 컴퓨터가 있고 프론트엔드 컴퓨터가 있다고 가정 해봅시다
이때 브라우저에서 특정싸이트에 들어가기 위해 검색을 하게되면
브라우저는
HTML,CSS,JS파일을 읽기 시작하겠죠??
이때 이미지를 넣기위해 이미지 삽입을 입력하게되겠고
이때 브라우저에서 api를 요청해서 그림파일을 text나 숫자형태로 바꾸어서 백엔드 컴퓨터에 전달을 하게 됩니다
이때 백엔드 컴퓨터는 DB에 저장하는것이 아니라 Cloud에 저장이 될수있도록 설정을 해놓게 됩니다!
그럼 CLoud에서는 다운을 받을수있는 주소 곧 URL을 주게되고 이 URL을 저희가 볼수있는 브라우저에 다시 전달을 해주게 됩니다 !
그리고 이 URL이 다시 백엔드 컴퓨터로 가게되고 이 URL을 드디어 DB에 저장을 해주게 됩니다!

살짝 복잡하죠??

그다음 볼것은

UseRef입니다!

리엑트 공식웹에서는 이렇게 설명하고있습니다
useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다
라고 설명을 하고있습니다!
이해가 조금 어려우시죠
그럼 한번 쉽게 이야기를 드리자면 이렇게는 어떨까요??
useRef는 State에 테그를 넣을수 있는것입니다!
무슨말인가!
즉 useRef라는것을 사용하게 된다면 다른태그를 사용할수있다는 겁니다!
예시를 한번 들어볼까요??
div 테그를 클릭할시
button테그가 클릭이 되게하고싶습니다!
이럴 경우에는 button테그에 ref를 작성하신 이후
div에 적용시켜주면 되겠죠??

코드로 한번 봐보겠습니다!

const example=()=>{
const fileRef=useRef(null)

const onClickBtn=()=>{
	fileRef.current?.click()
}

return(
	<>
    <div onClick={onClickBtn}>버튼</div>
    <button ref={fileRef}></button>
    </>
)
}