React에서 이미지를 웹팩 안에서 꺼내쓰기

당근마켓 처럼 화면을 만들어봤습니다. 문뜩 든 고민이 String타입으로 DB에 저장하는건 이해가 가는데 img들은 어떻게 저장하지? 라는 의문이 들었습니다.

1. blob 형태로 db에 넣었다가 뺐다 하는 것을 생각했습니다.
2. 서버 특정 폴더에 img 파일들을 저장하고 db에는 경로만 적자 라고 생각했습니다.

1번의 경우는 okky 게시판의 충고글을 보고 너무 비효율적이라고 합니다. 그래서 패스

2번을 생각했는데 그러면 img 파일들이 어마어마하게 서버에 올건데 이걸 어떻게 관리해야하나? 라는 생각이 들었습니다. 아니면 의외로 img 파일들은 용량을 안먹나? 라고 생각을 했습니다.

 

react에서 img들 뿌려보기

예를 들어 src에 images들이 있다면 

이렇게 json형식에 "imgsrc" 부분이 서버에서 넘어왔다고 가정하면서 태스트를 했습니다.

그러면 이렇게 json을 가져와서 data변수에 넣고 각각의 요소에 img를 뿌리는게 가능합니다.

지금 img들은 public 폴더에 있어서 절대 경로로 img를 찾을 수 있었습니다.

 

만약 src 폴더에 imges 폴더에 상대경로로 있다면

이런식으로 바꾸면 되겠지 라고 생각했습니다.

하지만 애러가 났습니다. 

분명 경로도 같습니다. 

이 로고는 src가 이상하게 적혀있습니다. 

여기서 '아..src/images에 있는 파일은 react에서 어디로 보냈구나..' 라고 생각했습니다.

public에 넣은 파일들은 root에 그대로 있어서 동작한 거였습니다.

이상한문자가 나오는 src를 보면서 다른 곳에 존재하는 이미지를 찾는법을 알아봅니다.

 

웹팩

웹팩에 내가 놓은 images 파일들이 있을 것입니다.

웹팩은 모듈 번들러 라이브러리 중 하나이다.

모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말한다.

 

제가 소화한 바로는 image 파일이나 별로 중요하지 않는 파일들을 뭉쳐서 브라우저에 빠르게 올리는거 같습니다. 

찾아보니 애플리케이션에 이상한 이름으로 이미지들이 있었습니다.

분명 브라우저 안에 이상한 이름으로 들어가 있는데 이걸 어떻게 꺼내올까? 고민을 합니다.

 

1. json의 경로를 고친다.
2. 경로는 그대로 두고 앞에 경로 이름만 붙힌다.

1의 경우에는 실패했습니다. 왜냐하면 ../../images/logo.png를 require한다면 웹팩에서 찾는것이 아닌 기본 루트에서 찾게됩니다. 기본 루트에 있는 파일이 아닌 저기 애플리케이션/이미지 안에 있는 %EB%AF... 을 가지고 싶습니다.

 

2를 고민해서 코드를 짜봤습니다.

imgsrc는 json에 적혀있는데 위에서 봤던거 처럼 "/logo.png", "미끄럼틀.png" 등등이 저장되어 있습니다. 이것을 웹팩에서 꺼냅니다. 어쩌서인지는 모르겠지만 백틱 안에 webpack에서 가져옵니다.

 

분명 경로는 /전자레인지.png 인데 require를 지나고 나면 전자레인지.6cc82...으로 변해있습니다.

그럼 json 경로를 ../../images/전자레인지.png로 하고 require를 돌리면 웹팩에서 꺼내주지 않을까? 생각했는데 변환되지 않았습니다.

아마 추측으로는 웹펙에 있는 기본 경로는 ./images이고 그 뒤에 ./images/전자레인지.png 가 붙어서 브라우저 안에 있는 images 파일에 전자레인지를 찾는거 같습니다.

 

`../../images${data.imgsrc}`  에서../../images를 앞에 붙히는 이유는

내 폴더에 있는 전자레인지.png 라는 파일을 찾으려고 요청하면

브라우저에 있는 전자레인지.png 파일을 ./images에서 찾는거 같습니다.

 

계속 의문인 점이 json에서 바로 "../../image/전자레인지.png"를 넣으면 변환을 못합니다. 

제 생각에는 /전자레인지.png -> ../../images/전자레인지.png -> /static/media/전자레인지.6cc8.png 과정에서 

 ../../images/전자레인지.png -> /static/media/전자레인지.6cc8.png 으로 줄이면 될거라고 생각했는데 사이 과정에서 어떠한 변화 규칙이 있는거 같습니다.