개발자꿈나무
[자판기 관리 프로젝트] 메인 화면 레이아웃 설정, 이미지 추가 본문
서론
기존 강의는 쇼핑몰 만들기 프로젝트인데 그저 강의를 보고 따라 치면서 똑같은 구조로 구성을 하기보다는 내 프로젝트를 진행하면서 강의를 함께 듣는게 낫다는 판단하에 쇼핑몰 프로젝트가 아닌 자판기 관리 프로젝트를 진행해보려고 한다. 예전에 포트폴리오 구상을 하면서 우연히 일본 자판기에 대해 생각을 하다가 친구가 제안해준 아이디어였는데 괜찮은 생각이었던 것 같아서 진행해보려고 한다. 디테일한 기능들은 추가하기 전에 기본적으로 자판기들의 재고 및 정보들, 그리고 재고가 떨어졌을 때 주문할 수 있는 큰 기능들부터 구현해보려고 한다. 이후에 추가적인 디테일을 넣을 생각이다.
본론
일단 웹 페이지를 구상하려면 필수적인게 이미지 삽입인 것 같다. 오늘 중점적으로 배웠던 내용들은 이미지를 삽입하는 다양한 방법이다. 먼저 메인페이지에 삽입하는 사진 같은 경우에는 한번 삽입을 하면 이후에 추가적으로 이미지를 넣을 일이 없기 때문에 css 파일에 이미지 경로를 넣어 설정해줄 수 있다.
css에서 이미지 삽입하기
해당 div의 클래스명을 하나 지정해주고 css 파일에서 디자인을 해준다.
.main-bg {
height: 300px;
background-image: url('./main-img.jpg');
background-size: center;
background-position: center;
}
위 코드를 하나하나 설정해보자면 일단 div의 높이를 지정해주고 이미지 파일 경로를 지저해준다. css폴더가 들어있는 src폴더에 이미지 파일을 넣어뒀기 때문에 하나 상위 폴더로 옮겨가 이미지 파일 이름을 적어주면 된다.
그리고 이미지가 센터에 올 수 있도록, 또한 웹 페이지를 늘리고 줄일 때 현재 왼쪽 정렬으로 지정이 되어있기 때문에 position을 센터로 맞춰주면 이미지 조정이 끝난다.
html 안에서 이미지 삽입
html 안에서 이미지를 삽입하려면 이미지를 import 해오고 사용해야 한다. 굳이 css를 사용하지 않고 style = {} 를 통해서 이미지를 삽입할 수 있다.
<div style={{ backgroundImage : 'url()' }}></div>
위 코드를 입력해주면 되는데 url() 안에는 이미지 경로를 담은 변수를 넣어주면 된다. 그러기 위해선 먼저 import를 해줘야 한다. 파일 상단에 import 변수명 from '이미지경로' 를 작성한 다음에 변수명을 넣어주면 된다. 'url('은 문자열이고 bg는 변수이므로 둘을 하나의 문자열로 만들기 위해서는 + 연산자를 이용해 동적으로 연결해줘야 한다.
<div style={{ backgroundImage : 'url('+ main +')' }}></div>
<div style={{ backgroundImage : 'url(./mainImg.jpg)' }}></div>
아래코드처럼 변환해주는 것이다. 해당 내용을 공부하면서 + 연산자를 이용하는 것보다 훨씬 심플한 방법을 하나 알게됐는데 바로 템플릿 리터럴을 사용하는 것이다. ES6부터 사용 가능하다고 한다.
<div style={{ backgroundImage: `url(${main})` }}>
백틱을 사용하여 문자열과 변수를 삽입할 수 있어 가독성이 좋고 더 직관적이다.
<img> 태그 사용하기
위 과정이 너무 길고 복잡하다면 단순하게 img 태그를 사용해서 이미지를 삽입해도 무관하다. 물론 import는 똑같이 진행을 해주되 아래처럼만 작성해주면 된다.
<img src={main}></img>
public 폴더 사용하기
만약 페이지의 이미지 경로를 수정하거나 사진을 바꿔야하는 생긴다면 어떨까? 사진 규모가 많다면? 일일히 경로명을 다 수정해줘야 하는 번거로움이 있을 것이다. 이럴 때 public 폴더를 사용해서 이미지를 삽입할 수도 있다.
리액트로 개발을 끝내고나면 빌드를 진행하는데 이때 지금까지 짰던 코드들을 한 파일로 압축해준다. src 폴더에 있던 코드와 파일들 전부 압축이 되며 이름도 내부적으로 변경되게 된다. 그러나 public 폴더에 있는 것은 그대로 보존한다. 그래서 형태를 꼭 보존해주고 싶은 파일은 public 폴더에 저장해줘도 된다. 보통 이미지, txt, json 등이 될 것이다.
public 폴더에 있는 이미지를 사용할 때는 그냥 /이미지경로를 사용하면 된다.
<img src="/main.jpg" />
import문을 일일히 작성하지 않아도 돼서 훨씬 간편하다.
하지만 한가지 주의해야할 점이 있는데, 리액트로 만든 html 페이지를 배포할 때 ~~~~~.com 경로에 배포하게 되면 상관이 없지만 ~~~~~.com/~~~/ 이러한 경로에 배포하게 될 경우 /main.jpg 경로를 찾을 수 없기 때문에 public 폴더에 이미지를 넣어 사용할 때는 아래 코드로 작성해줄 것을 권장한다고 한다. (둘 중 하나 - 템플릿 리터럴 사용)
<img src={`${process.env.PUBLIC_URL}/main.jpg`} />
<img src={process.env.PUBLIC_URL + '/main.jpg'} />
'React' 카테고리의 다른 글
[자판기 관리 프로젝트] 프로젝트 생성 및 bootstrap 사용 (0) | 2024.09.26 |
---|---|
11. class 이용 (2) | 2024.09.23 |
10. Input 기능 다루기 (4) | 2024.09.19 |
09. props 기본개념 (2) | 2024.09.14 |
08. 반복문 쓰기 (3) | 2024.09.12 |