2. Shop

yarn

• npm이나 npx를 대체해서 이용할 수 있게 도와주는 친구이다
• npm보다 훨씬 빠른 라이브러리 설치속도와 안정성을 자랑한다
• 일단 설치해놓으면 새로운 리액트를 만들때(npx creat-react-app) 자동으로 yarn이 구동되어 빨라진다
• npm install 대신 yarn add 로 사용하면 더 빠르게 설치할 수 있다

---

Bootstrap

• 설치하면 Bootstrap 홈페이지에 있는 예제코드를 이용해 메뉴, 버튼, 3분할 레이아웃 등 원하는 UI들을 쉽게 생성할 수 있다
• Bootstrap은 원조라이브러리고 리액트에 맞게 변형한 React Bootstrap을 설치
• 때에 따라 특정 스타일을 사용할 때 Bootstrap CSS파일을 요구하는 경우가 있는데 그때 사이트에 있는 CSS 파일을 index.html 파일의 head 태그안에 복붙해주면 된다

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

• React Bootstrap에서 코드를 복붙할 땐 항상 상단에 컴포넌트를 import 해야한다
• 대문자로 시작하는거 전부 import 해야한다

import { 컴포넌트 이름 } from 'react-bootstrap';

---

Image / File

• 다른 src 폴더 등에 넣은 파일은 파일명 변경 + 압축된다
• Public 폴더에 넣은 파일은 보존된다
• public에 있는 파일은 절대경로/파일명.jpg 이렇게 써야한다

---

import / export

• 내보내기 : export default 변수명 | 가져오기 : import 변수명 from 경로
• 경로는 ./ 로 시작(현재경로)
• export default는 파일 하나당 한번만 사용가능하다
• 변수명, 함수명, 자료형 전부 배출가능
• import 할때 변수명이라는 부분은 자유롭게 작명할 수 있다

• 내보내기 : export { 변수1, 변수2 } | 가져오기 : import { 변수1, 변수2 } from 경로
• 하나의 파일에서 여러개의 변수를 내보낼때 export {} 를 사용한다
• export default와 다르게 꼭 변수나 함수명이 있어야 한다
• import 할때 작명이 불가능하고 export했던 변수명 그대로 사용해야한다