react) public 폴더 src 폴더

🗂 public 

 

 

컴파일시 필요하지 않은 것들

절대경로 사용 가능 (import 시 "./파일명" 이렇게 가져올 수 있음)

사용자가 웹브라우저상에서 볼 수 있는 정적파일들 (image) 이 담김

 

 

 

🗂 src

 

개발하면서 컴포넌트 안에서 쓰이는 파일을 넣음

 

 

 

 

 

 

 

public 파일 가져올 때 단점

 

 

 

웹팩으로 처리되지 않고 원본이 빌드됨

 

-> 파일이 경량화 되지 않음

-> 파일 경로 잘못 입력시 컴파일 단계가 아니라 사용자가 접근할 때 404 오류를 받음

 

 

 

  const url =
    process.env.NODE_ENV === 'development'
      ? `./${domain}/image/img`
      : 'image/img';
      
 // 보통 이렇게 처리하는 듯

 

 

 

---

 

 

 

 

경량화를 위해서라도 src에 이미지 파일 넣는게 맞겠네! ☺️

 

판단 후 여러 가지를 시도해봤다

 

 

 

 

일단 import 로 사진 불러오기

 

 

 

 

 

안 불러와진다

 

 

 

 

 

구글링 후 시도해 본 것

 

 

1. ts 라서 형식 때문에? -> 실패

declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';

// images.d.ts

 

 

 

2. webpack에서 파일 압축할 땐 따로 설정이 필요하다구? -> npm i file-loader, touch webpack.config.js -> 실패

 

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

 

 

공식 문서 webpack.config.js 내용물까지 긁어왔으나 실패 ㅠㅠ

 

 

 

 

 

 

require 로 불러오기

 

 

 

이상하게 require은 된다

 

 

 

일단 빨간줄 없이 가져와짐;;;;

 

 

 

 

 

경로 확인했으니 이제 라이브러리 페이지에 적용해볼까~하고 테스트차 간단히 경로만 넣었는데

역시 이름이 바뀌어있었다

 

 

👇 요렇게

 

 

 

전에 사용했던 public 폴더 안의 Image들은 따로 웹팩을 거치지 않고 바로 build 파일에 들어갔기 때문에 이름이 바뀌지 않았지만

이제 src 안에 사진 파일을 넣어두어서 이름이 바뀐 것...

 

 

public 폴더에도 image 폴더 넣은 상태로 비교해봤을 때

 

 

 

요런 차이점이 있다

 

 

 

 

그리고 안타깝게도 catbow 라이브러리는

 

IMG_ 만 넣었을때 

자동으로 1.jpg, 2.jpg ...

를 넣어주는 로직을 가지고 있어서

 

이름이 바뀐 파일 뒤에  1.jpg, 2.jpg ...가 붙었다 😂

 

 

 

 

 

캣보우 라이브러리 사용할 땐 무조건 pubilc에 넣는 것으로... 🥲

 

 

 

 

 

 

 

 

 

 

 

참고 : https://velog.io/@daeun/React-public%ED%8F%B4%EB%8D%94-src%ED%8F%B4%EB%8D%94-%EC%96%B4%EB%94%94%EC%97%90-%EB%84%A3%EC%96%B4%EC%95%BC-%EB%90%98%EB%8A%94%EA%B1%B8%EA%B9%8C