WeCode Project- 1. weFish

프로젝트 소개

당일 배송 수산마켓 서비스 오늘회 웹사이트 클론 프로젝트

FULL DEMO CLIP

개발 인원 및 기간

• 기간 : 20.02.24 - 20.03.06
• 팀 구성 : 프론트엔드 4명, 백엔드 2명 (총 6명)

사용된 기술

• FrontEnd:
  • JavaScript
  • React
  • Sass(Scss)
  • KaKao API
• BackEnd:
  • Python
  • Django Web Framework
  • MySQL
• Deployment:
  • AWS EC2, RDS
  • CORS headers

내가 팀원으로 담당한 것들은:

Main Page/Products 부분이였다

구현 하기 위해서 했던 기술들은:

• React의 params를 사용하여 해당 이미지 클릭시 상세페이지 이동경로 구현
• React Slick, React Carousel 사용하여 Slider 기능 구현
• Backend API 를 Fetch 및 Axios를 사용하여 데이터를 GET한 후 .Map 함수를 사용하여 화면에 구현 하였습니다
• 유동적 Router를 사용하여 params 적용
• match params을 사용하여 제품 상세페이지의 유동적 Router 구현

프로젝트 하면서 느낀것들:

1. 새로운 기술을 사용할때는 언제나 힘들다

• 힘들다 라기 보다는 익숙치 않아서 어떻게 기술을 사용할지 몰라 많은 시간이 소비되었다. 거기에 React로 Hello World 한번 화면에 render 한것으로 리액트가 뭔지 잘 모르는 상태에서 Javascript의 es6 기능들을 사용해야 한다는것에 많이 해맸던거 같다...

• 여기에 기능 하나 하나 구현을 해야하는데 Javascript 의 기본 개념들이 많이 없어서 무슨 기능을 어디서 어떻게 써야하는지 힘들었다..

  결론
  그러니 Google은 나의 친구이며, Error 도 나의 친구이다.
  아무도 이것이 정답이라고 바로 알려주지 않는다. 그렇치만 정답 근쳐에 갔다 싶을때 한번 질문하는것도 나쁘지 않다.

2. 사람과의 협업은 재미있으면서도 익숙해져야 한다

• 부트캠프에 오면서 처음 진행되는 프로젝트이면서 동시에 git 을 사용하면서 팀원들과 협업을 하면서 결과물이 뭐가 됬던 2주안에 끝난다.
• 모든 사람들은 잘하고 싶어 한다. 그 와 동시에 각자 맡은 부분이란것이 있다. 그래서 이야기 할때는 항상 조심조심하면서 상황에 맞춰 접근해야 한다.
• git 에 익숙해져야 한다. 나의 코드와 남의 코드가 충돌이 났을때 잘 협의 하여 어떤 코드를 남길것인지 상의를 잘해야한다.

  결론
  본인이 맡은 부분을 최우선시 하면서 남을 도와줄 수 있는 능력을 키우자. 코딩은 혼자서 하는것이 아니고 함께 협업하는것이다.

나만 잘하면 되 마인드 가 아닌 우리같이 힘냅시다 화이팅 마인드가 중요하다

제일 좋았고, 재밌던 코드

class Products extends React.Component {
  constructor() {
    super();
    this.state = {
      title: [],
      product: [],
      id: [],
    };
  }

  componentDidMount() {
    this.fetchProduct();
  
  fetchProduct() {
    const values = this.props.match.params.category;
    fetch(`${AWS_URL}/product?category=${values}&query=-updated_at`)
      .then(res => res.json())
      .then(res => {
        this.setState({ product: res.data, title: res.category_list });
      });
  }

  render() {
    const { title, product } = this.state;
    console.log('this.props: ', this.props);
    console.log(title, product);
    return (
      <Layout>
        <div className="content-wrapper">
          <section className="product-main-container">
            <div className="productList-section">
              <div className="productList__nav">
                <Selector />
              </div>
              <ul className="productList">
                {product.map((item, id) => (
                  <li className="product-item">
                    <Link to={`/product/detail/${item.id}`}>
                      <div className="productCard">
                        <div className="parent">
                          <img src={item.image} alt="" key={item.id} />
                        </div>
                      </div>
                      <div className="productCardContent">
                        <h1 key={item.id}>{item.name}</h1>
                        <p>
                          <span key={item.id}>
                            ` {Number(item.price).toLocaleString('kr')}`
                          </span>
                          원
                        </p>
                      </div>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </section>
        </div>
      </Layout>
    );
  }
}

export default withRouter(Products);

코드 실행 이미지

내가 만든 틀에 직접 데이타가 들어오면서 사진들이 나오는게 너무 재미있고 신기했었다.
.Map 함수를 처음 사용했지만 정말 .Map의 위대함을 많이 느꼇다.