이더리움 기반 Dapp 개발 연습 #10 (화면구현2)

- 사실 여기서부터는 버전 이슈때문에 인프런 강의와는 달라져서 강의와 다소 상이할 수 있다.

 

- 이제 화면을 본격적으로 구성해 볼 것이다. 우선 동전의 앞, 뒤, 그리고 unknown 이미지를 public 폴더에 넣어준다.

  그리고 src에 CoinFlip.js, src/css에 style.css 파일을 생성해준다. 우선 CoinFlip.js 파일을 작성하자

 

# CoinFlip.js

import React, {Component} from "react";
import {Container, Row, Col, Panel, Image} from 'react-bootstrap';

import "./css/bootstrap.min.css";
import "./css/style.css";

class CoinFlip extends Component {
    // 생성자
    constructor(props) {
        super (props);
    }

    render() {
        return (
            <Container fluid={true}>
                <Row className="show-grid">
                    <Col md={5}>
                        1
                    </Col>
                    <Col md={5}>
                        2
                    </Col>
                </Row>
                <Row>
                    <Col md={5}>
                        3
                    </Col>
                    <Col md={5}>
                        4
                    </Col>
                </Row>
            </Container>
        );
    }
}


// export 해야 사용 가능
export default CoinFlip;

 

 

- 작성이 끝나고 메인 화면에 배치하기 위해서는 index.js를 수정해야 한다. 우선 index.js에 CoinFlip 컴포넌트를

  import하고 CoinFlip의 리턴을 렌더링하기위한 코드도 넣어준다.

 

# index.html

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import CoinFlip from './CoinFlip';

ReactDOM.render(<App />, document.getElementById('root'));

// index.html에 div 태그로 만들어 놓음
ReactDOM.render(<CoinFlip />, document.getElementById('content'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

 

- 이후 index.html에 content div 태그를 만들어 준다.

 

 

 

- 이제 개발용 웹서버를 실행하자 (npm run start)

- Container가 영역별로 잘 표시되 있음을 볼 수 있다.

 

 

cf) bootstrap 5.0 버전 이상을 기준으로 Grid -> Container,  Panel -> Card 로 사용하는 것을 권장한다. 

 

- index.html : 메인 화면

- style.css : 각 js 에서 사용할 class의 스타일을 정의해 놓는 곳

ex) # style.css

.image-box {
    width:100px;
    height:100px;
    overflow:hidden;
    margin:0 auto;
}
.image-thumbnail {
    width:60%;
    height:60%;
    object-fit:cover;
}

  style.css는 여러 js 파일에서 공통적으로 자주 사용하는 스타일을 정의해 놓은 곳이고 만약 특정 js 파일에서만 사용할

  스타일을 정의하고 싶으면 "App.js 의 전용 스타일 관리 파일 = App.css" 같은 느낌으로 이해하면 된다.

- index.js : 각 js파일을 사용하기 위해 import하여 랜더링을 하는 등의 연결점? 같은 역할이라고 생각하면 된다.

 

 

 

 

 

ref) https://www.inflearn.com/course/dapp/dashboard