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

화면에 대문사진 넣기

 

div 하나를 만들고 css 파일에 높이와 백그라운드 이미지를 넣어준다

 

이미지는 사진 하나를 src 폴더에 넣어준후 경로를 찾아서 가져오고

 

화면에 맞추기 위하여 background-size:cover 를 적용해준다.

 

또한 background-position: center 를 적용해주면 

 

 

왼쪽처럼 보이던 화면이 오른쪽과 같이 움직이게 된다.

이렇게 css에 이미지를 넣는것 뿐만 아니라 html에서 이미지를 넣고싶을때!

html에서 쓰고자 할때 임의로 작명하고 경로는 해당 파일에 정확히 해준다

 

이를 div에서 정한 style에서 이미지를 넣고자 할때

 

변수를 넣으려고 할때 중간에 문자를 변수 자체로 넣는것이 아니라 문자 자체를 전달하는 식으로 넣어주어야 한다.

 

 

 

정리! 이미지를 가져오고 싶다!

 

css 에서는 url 을 통해서 해당 경로를 찾아주면 되고

html상에서는 style을 태그에 넣어주는데 url 사이에 문자값으로 데이터를 넣어주어야 한다.

 

기억하기!

 

 

---

상품목록 레이아웃 만들기

 

부트스트랩 라이브러리에서 레이아웃을 가져다 쓸 수 있음!!

 

column or grid 등을 검색하면 된다.

 

react - bootstrap 에서 검색해도 되고 일반 bootstrap 사이트에서 가져와도 된다.

 

 

여기에서 상품 이미지나 설명을 넣기!

 

꼭 이미지를 다운받아야만 하는 것은 아니다

외부에 호스팅해둔 이미지라면 이미지 절대주소만 넣어도 이미지를 불러올 수 있다.

 

이렇게 url의 절대주소로 가져오는 것이 아닌

 

내 프로젝트 내부의 이미지를 저장하고 import 해서 이미지를 가져오는 경우\

 

이미지가 한 10000개 되는것을 하나하나 import 하기는 힘들것이다

 

이때!!!

이러한 import 를 거치지 않고 사용할 수 있는 방법이 있습니다.

 

public 폴더에도 이미지 보관이 가능합니다.

퍼블릭 폴더에 이미지를 넣고

 

/이미지 경로 

 

만 적어주어도 바로 이미지를 사용 가능하다!!!

 

그런데 pulbic에 있는 이미지 사용시 문제점!!!

 

웹이 올릴 때 여러가지 문제점이 발생할 수 있음

 

예를 들어 어떠한 웹주소 devdreamer.com 에 이미지를 쓰는거면 상관이 없는데

 

devdreamer.com/home/login 이렇게 들어가면 여러가지 오류가 발생할 수 있음

 

이러한 오류를 잡아주는 방법!!!!!

 

내 사이트의 현제 경로를 나타내 주는

 

process.env.PUBLIC_URL

 

을 항상 앞에 써주고 동시에 PUBLIC 폴더에 있는 이미지 경로만 잡아주면 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의 2-2 강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.