OP.GG 클론하기 - 롤 전적 검색 사이트 만들기 10

이번 글에서는 본격적으로 frontend를 다루도록 하겠습니다. 우선 프론트엔드는 앞에서 보여지고 어쨌든 디자인이기 때문에 사이트 구성에 대한 생각을 해야합니다.

simplegg의 기능은 현재 티어, 최근 10게임 승률, 게임 진행중인지를 출력하는 세가지 기능을 가지고 있습니다.

따라서 다음과 같이 페이지 구성을 하겠습니다.

 

페이지 1) 메인페이지로 소환사 이름을 검색할 수 있음.

페이지 2) 검색한 소환사에 대한 현재 티어, 10게임 승률, 현재 게임 진행중인지 확인

 

즉 접속했을 때 페이지 1은 다음과 같이 파란색 화면에 소환사 이름을 칠 수 있는 하나의 칸이 있을 예정입니다.

출처 : op.gg 페이지

페이지 2는 페이지1의 로고쪽에 다음과 같이 회색바탕으로 소환사를 검색하면 검색한 소환사에 대한 현재 티어, 10게임 승률, 게임중인지 나타내도록 하겠습니다. 

페이지 두개를 본격적으로 만들도록 하겠습니다. 우선 src에서 index.css, index.js, serviceWorker.js를 제외한 다른 파일들을 모두 삭제하도록 하겠습니다. 

 

그 다음 component 폴더를 만들고 그 안에 App 폴더를 만들어주도록 합니다. App폴더 안에 container.js, index.js, presenter.js, styles.module.scss 를 만들어주도록 하겠습니다. 각각 파일을 다음과 같이 채워주도록 하겠습니다.

 

#container.js

import React from "react";
import App from "./presenter";

const Container = props => <App {...props} />;

export default Container;

 

#index.js

import { connect } from "react-redux";
import Container from "./container";

const mapStateToProps = (state, ownProps) => {
  const { router: { location } } = state;
  return {
    pathname: location.pathname
  };
};

export default connect(mapStateToProps)(Container);

 

#presenter.js

import React from "react";
import PropTypes from "prop-types";
import { Route, Switch, withRouter } from "react-router";
import "./styles.module.scss";

import Main from "../Main";

const App = props => [
  <Routes key={1} />,
];

const Routes = props => (
  <Switch>
      <Route exact path="/" component={Main}/>
  </Switch>
);

App.propTypes = {

};


export default withRouter(connect()(App))

#styels.module.scss

@import 'reset-css';
@import url("https://fonts.googleapis.com/css?family=Roboto:300:400,500");

body {
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
}

라우트를 통해서 만약 path가 / 로 시작하면 Main component로 넘겨줍니다.

또한 index.js가 Component의 App을 가르키게 해 react가 시작되었을 때 App의 index.js가 시작되도록 만들어줍니다.

#src->index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import './index.css';
import App from '../components/App';

ReactDOM.render(
    
    <Provider>

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

src아래에 있는 index.css도 다음과 같이 수정하겠습니다.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

react-redux를 사용할 것이기 때문에 npm install을 통해서 react-redux를 설치하도록 하겠습니다.

npm install react-redux 

그 다음 우리는 components에 App만 만들었지 Main은 만들지 않았기 때문에 마찬가지로 container.js, index.js, presenter.js, styles.module.scss 를 다음과 같이 작성하여 Main폴더 안에 넣어줍니다.

 

#Main->container.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import Main from "./presenter";

class Container extends Component {
  render() {
    return (
      <Main/>
    );
  }
}

export default Container;

#Main->index.js
import { connect } from "react-redux";
import Container from "./container";

const mapStateToProps = (state, ownProps) => {
  const { router: { location } } = state;
  return {
    pathname: location.pathname
  };
};

export default connect(mapStateToProps)(Container);

#Main->presenter.js
import React from "react";
import PropTypes from "prop-types";
import {Router,Link } from "react-router-dom";
import styles from "./styles.module.scss";
const Main = (props, context) => (
  <div className={styles.main}>

  </div>
);

Main.propTypes = {
};

export default Main;

styles.module.scss 파일은 빈 채로 놔두도록 하겠습니다. 여기까지 하셨다면 프론트엔드 작업의 20프로정도 하셨다고 보면 됩니다. react에 대해 처음 접해보신분들은 이해가 가지 않을 수 있습니다. 초기 세팅이 항상 헷갈려서 저도 기존에 만들었던 코드들을 참고해가면서 만듭니다.

코드를 재활용할 수 있도록 만든 react 기초 파일을 후에 올려드리도록 하겠습니다.

 

이번 글에서는 component를 생성해봤고 index.js로 들어왔을 때 component로 연결해주었습니다. 다음 글에서는 redux라는 것을 자세히 다뤄보도록 하겠습니다. 이해가 가지 않는 부분들이 있다면 댓글로 남겨주세요