프론트엔드에서 이미지 관리하기

코딩해듀오에서는 프론트엔드 폴더 내에 이미지를 넣어 같이 배포했다.
사진이 많지 않기도 했고 서버에서 건들이지 않는 정적 자료이기 때문에 폴더 내에 위치하도록 했다. 프론트엔드 폴더 내에 저장할때는 src 폴더 내에 위치할지, public 폴더에서 관리할 지 고민했다.
웹팩은 보통 src 폴더를 번들링 한 후 public의 index.html 파일에 연결한다.

📁 src 폴더에서 관리하기

src 폴더에 이미지 파일을 관리하는 것의 장점은 웹팩의 개입이 가능하다는 것이다. 그래서 다음과 같은 장점이 있다.

• 네트워크 요청 없이 script, css 를 최적화 할 수 있고 번들링이 가능하다.
• 파일을 찾을 수 없을 떄 404 에러 대신 컴파일 오류가 생긴다.
• 배포된 파일 이름에 해시값이 포함되어있어서, 구형 브라우저에서 캐싱되는 문제를 걱정할 필요가 없다. (ex- filename1/a412s3f/image.jpg)

📁 public 폴더에서 관리하기

public 폴더는 모듈 시스템 밖에 에셋을 추가할 수 있는 시스템이다.
public 폴더는 다음과 같은 장점이 있다.

1️⃣ 특정 파일명이 필요한 경우 유용하다.

pwa 를 만들 때 브라우저가 정확히 /manifest.webmanifest 이 경로에서 파일을 찾는다고 한다. 만약 웹팩으로 번들링하면 중간에 해시값이 붙어(output 할 때 해당 파일에 해시를 안붙게 할 수 있지만, 그러면 브라우저 캐싱을 제대로 활용할 수 없기 때문에 보통 붙인다.)

마찬가지로 파비콘 같은 파일도 브라우저가 특정 이름으로 찾기 때문에 퍼블릭 폴더에 넣어야 한다.

2️⃣ 수천개의 이미지를 동적으로 참조해야 할 때 유용하다.

function getProductImage(id) {
return ${process.env.PUBLIC_URL}/images/products/${id}.jpg;
}

public 폴더의 이미지는 하나하나씩 import 할 필요가 없기 때문에 편리하다.

3️⃣ 파일이 그대로 빌드 폴더에 복사되어 번들 크기가 커지지 않는다.

번들링 되지 않고 파일 자체가 복사된다. 웹팩으로 번들링하면 js 번들 크기가 커지게 되는데, 반면 public 폴더를 사용하면 각 파일들이 별도로 존재하여 필요할 때만 다운로드가 된다.

그래서 자주 사용되는 작은 파일들은 import 로 번들에 포함시키는게 좋지만, 큰 파일이나 동적으로 로드되는 파일들은 public에 두는게 좋다.

public 폴더에는 파일 이름을 그대로 사용해야 할 때와 같이 특정한 이미지를 사용할 때 유용하고(ex favicon.ico), 그 외의 경우에는 src 폴더에서 관리하는게 좋을 것 같다.
코딩해듀오는 계속 업데이트가 되고 있다. 사용자에게 최신 이미지를 바라보게 하기 위해 src 폴더에 관리하기를 선택했다.

🖥️ 외부에서 관리하기

회고 페이지나 사용자 연동 등의 기능을 추가하면서 이미지의 양이 늘어났다.

그래서 외부 호스팅 사이트를 이용하기로 했다.

우테코가 끝나고 서버 비용을 전부 우리가 부담해야하기 때문에 빌드 속도와 용량을 줄이는게 중요하다고 생각했다. 그래서 외부 무료 호스팅 사이트를 고민해보았고, 그 중 업로드가 편하고 이미지 크기, 퀄리티 등을 쉽게 편집할 수 있는 cloudinary 를 활용하기로 했다.

이렇게 설정하고 이미지를 모두 업로드해주었다.

   {
        title: '2. 미션 확인하기',
        src: 'https://.../select-mission.webp',
        id: 'select-mission',
        info: `레포지토리로 이동 버튼을 클릭하면 해당하는 미션의 레포지토리로 이동합니다. 확인 후 원하는 미션 버튼을 클릭해주세요.`,
      },

사진들은 사용자의 개인 이미지가 아니라 유출되어도 상관 없는 데이터라 보안 보다는 사용하고 유지보수가 쉽도록 dist 폴더에 정리해두었다.

---

레퍼런스

• public folder

• public folder vs src folder