웹 풀사이클 데브코스 TIL 53일차

프론트트엔드 심화

커피 주문 사이트를 제작해 보도록 하겠다.

Bootstrap

Bootstrap은 웹 페이지에서 많이 쓰이는 요소드릉ㄹ 미리 구현해 두고 이를 불러와서 사용하는 방식으로 사용할 수 있는 프레임워크이다.
bootstrap의 사용법은 다음과 같다. 먼저 npm으로 부트스트랩을 설치해준다.
그 후 index.html 파일에 다음 코드를 추가해준다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

app.tsx 파일에서는 import를 해주어야한다.

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

사용할 요소들을 import 해주고 이를 return 문 안에 컴포넌트 방식으로 사용할 수 있다. 예시 코드들도 리액트 부트스트랩 홈페이지에 나와있다.

배경 이미지 설정

배경 이미지를 설정하는 방법에는 두가지 방법이 있다. 먼저 CSS에서 가져오는 방법이 있다.

.Home-img{
  height : 400px;
  background-image: url(./coffeebg.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

 <div className = 'Home-img'></div>

두번째 방법은 html에서 직접 가져오는 방식이다. 이때 이미지를 바로 가져올 수 없고 import 를 해주어야 한다.

import coffeeImg from './coffeebg.jpg'


<img src = {coffeeImg} width = "100%"></div>

화면 레이아웃 구성

부트스트랩을 사용해서 레이아웃을 쉽게 구성할 수 있다. 이번에는 Grid를 사용해보자. grid 부트스트랩 중 Auto-layout columns 라는 것을 사용해보자.

 <Container>
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
</Container>

이미지를 import 해주고 그리드에 넣어보자.

      <Container>
      <Row>
        <Col><img src = {coffee1} width = "50%"></img>
        <h5>아메리카노</h5>
        <p>3000</p>
        </Col>
        <Col><img src = {coffee2} width = "50%"></img>
        <h5>카페라떼</h5>
        <p>4000</p>
        </Col>
        <Col><img src = {coffee3} width = "50%"></img>
        <h5>카라멜 마끼아또</h5>
        <p>4500</p>
        </Col>
      </Row>
      </Container>

public 폴더

위 코드에는 문제가 한가지 있다. 소스 폴더에 이미지 파일이 뒤죽박죽 혼재되어있다는 것이다. 이런 리소스 파일들을 저장하기 위해 리액트에서는 public 이라는 공간을 제공한다.

리액트는 배포시 빌드라는 작업을 통해서 압축을 하게 되는데 이런 public 폴더는 압축이 되지 않는다.

이제 이미지 부분을 수정해보자

      <Container>
      <Row>
        <Col><img src = 'coffee1.jpg' width = "50%"></img>
        <h5>아메리카노</h5>
        <p>3000</p>
        </Col>
        <Col><img src = 'coffee2.jpg' width = "50%"></img>
        <h5>카페라떼</h5>
        <p>4000</p>
        </Col>
        <Col><img src = 'coffee3.jpg' width = "50%"></img>
        <h5>카라멜 마끼아또</h5>
        <p>4500</p>
        </Col>
      </Row>
      </Container>

public 폴더에 들어있는 데이터들은 root 경로로 인식한다. 따라서 import 를 해줄 필요 없이 바로 파일을 가져올 수 있다.

단 css에서는 root로 인식을 하지 못하기 때문에 css 기준의 상대경로를 입력해 주어야 한다.

.Home-img{
  height : 400px;
  background-image: url(../public/coffeebg.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

process.env.PUBLIC_URL

지금 코드도 문제는 없지만 url 앞에 process.env.PUBLIC_URL을 붙여주는 것이 좋다. 루트 경로 그대로 배포를 하면 잘 되지만 다른 폴더경로가 붙어있는 경우 문제가 될 수 있기 때문이다. public 폴더에서 리소스를 사용하는데 공식에서 권장하는 방법이니 사용하는것을 습관화하자.

<img src = {process.env.PUBLIC_URL + 'coffee1.jpg'} width = "50%"></img>

데이터의 import와 export

데이터를 따로 파일로 만들고 이를 export 한 후 import 해서 사용할 수 있다.

//data.tsx

let name : string = '홍길동';


export default name;

//App.tsx
import name from './data';

변수를 여러개 빼고 싶다면 이렇게 하면된다.

//data.tsx

let name : string = '홍길동';
let job : string = '개발자';

export {name, job};

//App.tsx
import {name, job} from './data';

커피 정보를 받아오는 코드는 다음과 같다.

interface Coffee{
  id : number;
  title : string,
  content : string;
  price : number;
}

  let [coffee, setCoffee] = useState<Coffee[]>(coffees);

state에 객체 배열을 받아온다. 이때 타입을 살리기 위해 인터페이스를 선언해준다.

반복 부분 컴포넌트화

Coffee 정보 출력을 컴포넌트화하고 map 함수를 이용해서 불러오는 코드는 다음과 같다.

return(
<Container>
      <Row>
        {
          coffee.map((item, idx) =>{
            return(
              <CoffeeItem coffee = {item}></CoffeeItem>
            )
          })
        }

      </Row>
      </Container>

)
interface CoffeeItemProps{
  coffee : Coffee;
}

const CoffeeItem : React.FC<CoffeeItemProps> = ({coffee})=>{
  return(  
  <Col>
    <img src = {process.env.PUBLIC_URL + 'coffee' + (coffee.id + 1) + '.jpg'} width = "50%"></img>
    <h5>{coffee.title}</h5>
    <p>{coffee.price}</p>
  </Col>
  )
}

라우팅

리액트는 html을 하나만 사용한다. url을 이동하면 html에서 내용을 갈아치우는 방식으로 동작하는 것이다. 이 작업을 도와주는 라이브러리가 라우터이다.

 npm install react-router-dom@6

라이브러리를 설치해 주고 index.tsx 파일로 간다.

import {BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
     <App />
    </BrowserRouter>

  </React.StrictMode>
);

라우터를 import 해주고 BrowserRouter 태그로 컴포넌트를 감싸주면 준비가 완료된다.

App.tsx 에서도 import 를 해주어야한다.

import {Routes, Route, Link} from 'react-router-dom';

  <Routes>
        <Route path='/detail' element = {<div>보여줄 html</div>}></Route>
        <Route path='/' element = {<div>보여줄 html</div>}></Route>
    </Routes>

사용법도 정해진 문법이 있다. Routes로 한겹 감싸주고, Route 태그로 url 설정을 해준다. path에는 url을 element에는 html을 넣는다.
이렇게만 하면 사용자가 직접 주소를 치고 들어가야하는 불편함이 있다. 따라서 하이퍼 링크 역할을 해줄 태그가 필요하다.

 <div>
        <Link to = '/' 
        style = {{display : 'inline-block', marginRight : '10px'}}>홈으로</Link>
        <Link to = '/detail'>상세정보</Link>
      </div>

Link 태그를 사용하면 링크를 걸어줄 수 있다. to 속성에 url을 넣어준다.

후기

부트스트랩과 리액트 파일 구조등에 대해서 학습하였다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프