React - 이미지 넣는 법 & public 폴더 이용하기

🤍 강의에서 사용하는 신발 이미지 URL

https://codingapple1.github.io/shop/shoes1.jpg
https://codingapple1.github.io/shop/shoes2.jpg
https://codingapple1.github.io/shop/shoes3.jpg

🖤 css 안에서 src 폴더의 이미지 사용하기

• 쇼핑몰의 메인 화면을 만들기 위해 큰 사진을 넣는 작업을 할 것이다.

(App.css)

.main-bg {
  height : 300px;
  background-image : url('./bg.png');
  background-size : cover;
  background-position : center;
}

• css파일에서 src폴더 안에 있는 사진을 사용하고 싶으면 ./이미지경로 를 사용하면 된다.
  
  

🖤 html 안에서 src 폴더의 이미지 사용하기

import bg from './bg.png'

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

• html안에서 이미지를 집어넣고 싶으면 이미지를 import 한 후 사용하면 된다.

1. import 작명 from './이미지경로'
2. 이미지 경로가 필요한 곳에서 작명한 걸 사용하면된다.

• ./ 가 상당히 중요한 것 같다. ㅎㅎ

🖤 화면을 가로로 3등분 하기

• React-Bootstrap 홈페이지에서 grid 검색을 하면 다양하게 나온다.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

<Container>
  <Row>
    <Col sm></Col>
    <Col sm></Col>
    <Col sm></Col>
  </Row>
</Container>

• 처음에 부트스트랩을 복붙했더니 "identifier 'container' has already been declared." 라는 오류가 나왔다.
  당황스러워 구글에 검색해봤지만 내가 원하는 답이 나오지 않았고 오류 문구를 다시 읽어보았다.
  has already been declared, 이미 선언 되었다는 말이어서 import 값을 보니 Container 이 Navbar를 만들 때 선언되었었다.
  무작정 오류를 검색해보는것보다 내가 먼저 오류가 무엇인지를 읽어보는 습관을 가져야겠다는 생각을 가지는 시간이었다.🤔

<Container>
  <Row>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
      <h4>상품명</h4>
      <p>상품가격</p>
    </Col>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
      <h4>상품명</h4>
      <p>상품가격</p>
    </Col>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
      <h4>상품명</h4>
      <p>상품가격</p>
    </Col>
  </Row>
</Container>

• 이미지 경로를 넣고 사이즈를 조절해줬다.

🖤 public 폴더의 용도

• 여러가지 소스 코드는 src 폴더에 보관하면 된다.

• 이미지 같은 static파일의 경우 public 폴더에 보관해도 된다.

• 리액트로 개발을 끝내면 build 작업이라는 걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업이다.

• src 폴더에 있던 코드와 파일은 다 압축이 되지만 public 폴더에 있는것들은 그대로 보존해준다.

• 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js파일은 거의 그럴 일이 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관하면 된다.
  
  

🖤 public 폴더에 있는 이미지 사용하기

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

• /이미지경로 를 사용하면 된다.
• 하지만 선생님이 권장하는 방식은 따로 있었다!😮

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

• 이유 : 리액트로 만든 html 페이지를 배포할 때 codingapple.com 경로에 배포하면 아무런 문제가 없지만 coddingapple.com/어쩌구/ 라는 경로에 배포를 하면 이미지 파일을 찾을 수 없다고 나올 수도 있다고 한다.
• 그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 를 더해주는 것이다.