8월 8일 모각코 종료

 

react 프로젝트 4명이서 협업을 하였습니다.

 

전체 UI에 대한 구상을 하였고

 

import React, {Component} from 'react';
import './App.css';

import Content from './components/Content';
import Sidebar from './components/Sidebar';

import pythonImg from './images/python.png';
import arduinoImg from './images/arduino.png';
import cPlusPlusImg from './images/C++.png';
import javaImg from './images/java.png';
import juliaImg from './images/julia.png';
import lispImg from './images/Lisp.png';
import prologImg from './images/prolog.png';
import rImg from './images/R_Programming.png';
import raspberryPiImg from './images/RaspberryPi.png';

const list=[
  [["java"], lispImg, "java2"],
  [["web"], lispImg, "web2"],
  [["java"], lispImg, "java"],
  [["c++"], lispImg, "c++"],
  [["web"], lispImg, "web"],
  [["java"], lispImg, "java"],
];

class App extends Component {
    
  state = {
      display : true,
      presentLanguage : ""
  };

  hideComponents = () => {
    this.setState({display: false});
  }

  showComponents = () => {
    this.setState({
      presentLanguage : "web"
    })
  }

  render(){

    const data = list.map(i => 
      (
        i[0].some(v => v === this.state.presentLanguage) ? <Content image={i[1]} name={i[2]}></Content>:""
      )
    );

    return(
      <div className="App">
        <Sidebar></Sidebar>
        <div className="container-main">
          <div className="item-main">제목</div>
          
          <div className="item">
            <div className="container-content">
            
            <button onClick={this.showComponents}>웹만 보여주세요</button>
            {data}

            </div>
          </div>

        </div>
      </div>
    );
  }
}
export default App;

import React, {Component} from 'react';
import '../styles/Content.css' 

class Content extends Component {
    state = {
        language : [this.props.language],
    }

    render(){
        return(
            <div className="Content">
                <img className="Image" src={this.props.image}></img>
                <br />
                {this.props.name}
            </div>
        );
    }
}

export default Content;

사용한 코드는 이렇게 됩니다.

 

저희가 구연하고자 하는 것은 프로그래밍 언어에 대한 설명 홈페이지인데

제가 구현한것은 각각의 Contents라는 컴포넌트를 생성해서

그 컴포넌트는 그 언어의 이미지와 텍스트를 포함하고있고,

 

왼쪽에 카테고리 사이드바가 구현이 될것인데 거기에서

카테고리를 클릭을 한다면

예를들어 "웹 프로그래밍" 이라는 카테고리가 클릭이 되면

"웹 프로그래밍"과 관련이 있는 프로그래밍 언어들만 축약이 되어서 보여주는 기능을 구현한 것입니다.

 

더 구현을 해야하는 것은 css로 디자인을 이쁘게 바꾸고,

정보들을 더 수집해서 어떤 프로그래밍 언어가 있는지 확인을 해야합니다.

 

저 Content 컴포넌트를 클릭해서 들어가는 홈페이지는

다른 팀원이 구현을 하고있고, 왼쪽에 들어가는 sidebar는 또 다른 팀원이 구현을 하고 있습니다.

 

이렇게 깃허브로 서로 pull request를 요청하면서 master에 병합하는 방식으로

저희는 협업을 하고있습니다.

 

현재 총 8번의 pull request가 진행되었으며

깃허브의 전반적인 이해도 같이 병행이되어서 좋은 프로젝트 같습니다.