2-1. 이미지 넣기, public 폴더 사용하기

html 안에 src 폴더의 이미지 넣기

App.js

import bg from './bg.png'

function App(){
  return (
    <div>
      <div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
    </div>
  )
}

Bootstrap 사용하여 레이아웃 설정 (가로로 3등분)
https://getbootstrap.com/docs/5.1/layout/columns/

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

public 폴더의 용도

여러가지 소스코드는 src 폴더에 보관하면 되는데
이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니다.

리액트로 개발을 끝내면 build 작업이라는걸 하는데
지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다.
src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다.
그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고
이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다.

public 폴더에 있는 이미지 사용 방법

<img src="/logo192.png" />

import 과정 없이 그냥 /이미지경로 사용하면 된다.

하지만 권장되는 방식은 이렇게입니다.

<img src={process.env.PUBLIC_URL + '/logo192.png'} /> 

왜냐면 리액트로 만든 html 페이지를 배포할 때
abc.com 경로에 배포하면 아무런 문제가 없지만
abc.com/~~~/ 경로에 배포하면
/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있습니다. 
그래서 /~~~/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다고 하는군요. 

• 참고 https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system