<div id="readability-page-1" class="page"><div>이제 본격적으로 bootstrap을 활용해볼건데
<img src="https://media.vlpt.us/images/2taesung/post/7925e0b9-a2a1-4899-a19b-fed0b2ae555c/image.png">
기존에 하던대로 코드를 그대로 가져오니 에러가 ..
일명 component에 해당하는데 react-bootstrap 모듈에서 가져와야한다
모두다 가져올수도 있지만 메모리 절약과 깔끔한 css 정리를 위해
<img src="https://media.vlpt.us/images/2taesung/post/3025f9a7-eef5-4ee5-8f3e-0a1ad87e5f85/image.png">
=&gt; 그런데 이러면 class만 가져오는건 못하는건가....?
Jumbotron 이라는 component는 처음 들어봤다.
중요한건 아닌데 아 ... 얘가 그렇게 불리는 군 
=&gt; Bootstrap 5.0이상은 없다. 그래서 직접 모양새를 만들었음.
<h2 id="react-이미지-불러오기">react 이미지 불러오기</h2>
크게 나누면 1. src에 넣기 2. public에 넣기
<h3 id="1-src에-넣기">1. src에 넣기</h3>
src에 넣은 파일은 파일명 변경 + 압축됨 
그리고 아래와 같이 class에 넣듯이 편하게 이용 가능
class로 이미지를 넣는 방법이 있다는거 
현재 진행 중인 프로젝트에서 
<img src="https://media.vlpt.us/images/2taesung/post/c8877e3b-dbcb-4741-9dce-ca3cd2ca4781/image.png">
<h3 id="2-public에-넣기">2. public에 넣기</h3>
react만의 특수한 문법이 필요함 
public에 있는 파일은 절대경로/파일명.jpg 처럼 풀 경로 다 써야함
근데 또 public에 있으면 자동으로 잡아줘서 또 더 편하게 넣을수도 있음 
=&gt; 그냥 변수로 저장해서 경로를 활용 가능 
<h2 id="부트스트랩-쓰는법">부트스트랩 쓰는법</h2>
<ol>
<li>
React-bootstrap 
React-bootstrap을 설치해서 요소들 복붙해 필요한 component들을import 해주면된다
</li>
<li>
원조 Bootstrap 
전 포스팅에서 언급했던 
</li>
</ol>
link 어찌고도 넣으면 
원조 bootstrap (클래스명 넣어서 쓰는거) 
도 가능하다!
=&gt; 이게 없었어서 프로젝트에서 클래스명 넣어서 사용을 못했구먼
<h2 id="3개-반응형">3개 반응형</h2>
<pre><code> &lt;div className="container"&gt;
 &lt;div className="row"&gt;
 &lt;div className="col-md-4"&gt;
 &lt;img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/&gt;
 &lt;h4&gt;상품명&lt;/h4&gt;
 &lt;p&gt;상품설명 &amp; 가격&lt;/p&gt;
 &lt;/div&gt;
 &lt;div className="col-md-4"&gt;
 &lt;img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/&gt;
 &lt;h4&gt;상품명&lt;/h4&gt;
 &lt;p&gt;상품설명 &amp; 가격&lt;/p&gt;
 &lt;/div&gt;
 &lt;div className="col-md-4"&gt;
 &lt;img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/&gt;
 &lt;h4&gt;상품명&lt;/h4&gt;
 &lt;p&gt;상품설명 &amp; 가격&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;</code></pre>
=&gt; 이 공식은 그냥 암기해버리자!!
=&gt; 이유는 정확히 모르겠으나 alt가 없으면 에러가 뜬다.
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
=&gt; 지금은 시간이 없으니 일단.... 여기서 종료</div></div>

2taesung.log

Taesung Lee

이제 본격적으로 bootstrap을 활용해볼건데
기존에 하던대로 코드를 그대로 가져오니 에러가 ..
일명 component에 해당하는데 react-bootstrap 모듈에서 가져와야한다
모두다 가져올수도 있지만 메모리 절약과 깔끔한 css 정리를 위해
=> 그런데 이러면 class만 가져오는건 못하는건가....?
Jumbotron 이라는 component는 처음 들어봤다.
중요한건 아닌데 아 ... 얘가 그렇게 불리는 군 
=> Bootstrap 5.0이상은 없다. 그래서 직접 모양새를 만들었음.
react 이미지 불러오기
크게 나누면 1. src에 넣기 2. public에 넣기
1. src에 넣기
src에 넣은 파일은 파일명 변경 + 압축됨
그리고 아래와 같이 class에 넣듯이 편하게 이용 가능
class로 이미지를 넣는 방법이 있다는거 
현재 진행 중인 프로젝트에서 
2. public에 넣기
react만의 특수한 문법이 필요함
public에 있는 파일은 절대경로/파일명.jpg 처럼 풀 경로 다 써야함
근데 또 public에 있으면 자동으로 잡아줘서 또 더 편하게 넣을수도 있음 
=> 그냥 변수로 저장해서 경로를 활용 가능 
부트스트랩 쓰는법
React-bootstrap
React-bootstrap을 설치해서 요소들 복붙해 필요한 component들을import 해주면된다
원조 Bootstrap
전 포스팅에서 언급했던 
link 어찌고도 넣으면 
원조 bootstrap (클래스명 넣어서 쓰는거)
도 가능하다!
=> 이게 없었어서 프로젝트에서 클래스명 넣어서 사용을 못했구먼
3개 반응형
 <div className="container">
 <div className="row">
 <div className="col-md-4">
 <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
 <h4>상품명</h4>
 상품설명 & 가격
 </div>
 <div className="col-md-4">
 <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
 <h4>상품명</h4>
 상품설명 & 가격
 </div>
 <div className="col-md-4">
 <img src="https://codingapple1.github.io/shop/shoes1.jpg" alt="" width="100%"/>
 <h4>상품명</h4>
 상품설명 & 가격
 </div>
 </div>
 </div>
=> 이 공식은 그냥 암기해버리자!!
=> 이유는 정확히 모르겠으나 alt가 없으면 에러가 뜬다.
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
=> 지금은 시간이 없으니 일단.... 여기서 종료

[React] 평화로운 쇼핑몰 레이아웃 디자인 시간

댓글