[React]를 사용하는 토이프로젝트 시작!

방학동안 열심히 놀았네요. 늦었지만 지금이라도 작은 토이프로젝트를 시작해보려고 합니다.

 

저는 과자를 꾸준히 사먹는 편입니다. 하지만 먹고싶은 것을 가득 쌓아놓고 막상 먹으려 하면 결정장애가 오곤합니다.

 

그래서 이번 프로젝트로 만드려는 것은 카테고리 별로 과자를 나눠서 임의로 먹을 과자를 선택해주는 프로그램입니다.

 

그럼 시작해볼까요!

 

 

개발은 VSC(Visual Studio Code)를 사용하는 React 웹앱을 만드려고 합니다. 

 

 

프로젝트 폴더

 

먼저 프로젝트 파일들을 집어넣을 폴더를 만들어 줍니다. 

 

초기 설정

 

초기 설정하는 법은 폴더를 만들고 Shift + 우클릭 후 파워쉘을 연다음 npx create-react-app 폴더이름 이렇게 코드치시면

 

됩니다.

 

npm start

그리고 터미널에 npm start를 치고 잘 구동되는지 확인합니다. 저는 기존 코드를 지우고 문구를 추가하였습니다. 문구를

 

좀 꾸며 볼까요?

css 디자인

글자에 css를 이용해 디자인을 해보았는데요. 영어 그대로 읽으면 이해하기 쉽습니다.

 

text-align : center == 가운데로 오게 함

 

color : 하늘색 == 색깔은 하늘색 계열로

 

font-family : "Times New Roman" == Times New Roman 폰트 적용

 

padding : 20px; 상하좌우 간격 20px로 적용

 

바뀐 모습

그럼 이렇게 적용됩니다. 근데 너무 허전한 느낌이 드네요.

 

이럴때 사용하는 것이 Bootstrap이 있죠.

 

디자인할 필요가 없는 아주 착한 플러그인 ^.^ 

 

Bootstrap 설치

 

터미널을 켜고 빠르게 설치해 줍니다..

 

설치후 app.js 상단에

import 'bootstrap/dist/css/bootstrap.min.css';

를 적어줍니다. 

Bootstrap Button Sample

저는 부트스트랩 홈페이지에 있는 요 버튼들을 사용해 볼겁니다.

 

코드는 그대로 따오셔서 원하는대로 수정만 해주시면 됩니다. 

 

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

 

그러면 이렇게 멋진 UI의 버튼들을 돚거할 수 있습니다.

 

하지만 뭔가 불편하죠. Bootstrap에는 행렬로 묶어서 정렬할 수 있는 기능도 있습니다.

 

Row와 Col을 이용한 정렬

아주 편리한 기능입니다.

 

import logo from './logo.svg';

import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import Button from 'react-bootstrap/Button';

import Container from 'react-bootstrap/Container';

import Row from 'react-bootstrap/Row';

import Col from 'react-bootstrap/Col';

function App() {

  return (

  <Container>

    <div className="Snack">

    <Row><div className = "Open"><h1>This is snack machine</h1></div>

    <Col><div className='Btn'><Button variant="warning">과자</Button>{' '}{' '}</div></Col>

      <Col> <Button variant="warning">음료수</Button>{' '}{' '}</Col>

      <Col><Button variant="warning">아이스크림</Button>{' '}{' '}</Col>

      <Col><Button variant="warning">라면</Button>{' '}{' '}</Col>

      </Row>

     

    </div>

    </Container>

  );

}

 

다음시간에는 버튼에 기능들을 넣어보도록 하겠습니다!