[위코드] TIL(Today I am learned) -20

- 오늘의 과제

* 실제 data.json 받아서 연결해보기

* filternav 호출해서 연결하기

 

오늘의 실습. 해당 컴포넌트에서 Productlist를 호출하려고 하는데, 

렌더 오류가 나왔다.

import React, { Component } from "react";
import Nav from "../../Components/Nav/Nav";
import Productfilternav from "../../Components/Productfilternav";
import Mapcomponent from "./Component/Mapcomponent";
import Footer from "../../Components/Footer/Footer";
import "./Maplist.scss";


class MapList extends Component {
    constructor(props) {
        super(props);
        this.state= {
            goods:[]
        };
    }

    componentDidMount() {
        fetch("http://10.58.6.25:8080/board/1/:id")
            .then(res => res.json())
            .then(res => {
                this.setState({ goods: res.data.item})
            })
    }

    render() {
        console.log(this.state.goods)
        return(
            <div className="Productcolumn">
                <Nav />
                <Productfilternav />
                {this.state.goods.length>= 1 && <Mapcomponent goods={this.state.goods} />}
                <Footer />
            </div>
        );
    }
}

export default MapList;

undefined가 나오길래 왜 그런것인가? 해당 컴포넌트를 작업했던 동료를 호출하면서

같이 봤는데, 어째 오류가 친근한(?) 오류문구라서 혹시했더니 역시나 props가 문제였다. 

해당 컴포넌트를 호출하는데, 상위값에서 넘겨주는 값이 없으니 렌더오류가 나오던 것이었다.

그래서 결국 해당 값을 fetch를 새로 불러서 해당 컴포넌트에서 호출하니 정상 작동이되었다.

짝짝짝 ლ( ╹ ◡ ╹ ლ)

협업으로 해당 문제를 해결한 거라 더욱 더 기분이 좋다 

 

이제 내가 해결해야하는 문제는 

해당 태그에서 제품 카테고리를 선택하면 해당 자료 값을 호출하여 뿌려질 수 있도록, 

작업이 남았다.

 

기존에 있던 문제점인 onClick시에 true 상태를 유지하는 것을 바꾸는 작업을 componentDIdUpdate로 해당 작업이 몇초후에 자동으로 빠질 수 있도록 하려고 하는데, 잘 될지????  모르겠다. 힘내보자 (๑ •̀ω•́)۶

 

 

 

 

aws 수업 자료 정리.

바쁘다보니 추가하지 못했는데, 이제야 적는다.

AWS. 즉 아마존 웹 서비스의 준말이다.

백엔드에서 엄청나게 화제가 되는 꽃이며, 서비스의 핵심으로 떠오르는 클라우드 서비스이다.

넷플릭스도 이걸 쓰는데, 동영상을 빠른 시간에 출력하기에 기대를 했다.

그런데, 막상 써보니 영...느림.

 

AWS에서는 여러가지 서비스가 있다.

• EC2
  • Elastic Compute Cloud AWS 상에서 사용하는 Server. EC2 서버에 API를 배포
• Security Group
  • EC2 인스턴스에 대한 네트워크 트래픽을 제어하는 가상 방화벽 역활을 한다.
  • 즉 security group 설정을 해줘야 EC2 인스턴스에 HTTP와 SSH 접속이 가능하다.
• RDS
  • AWS의 database 서비스 RDS를 사용하면 사용자가 직접 서버를 생성해서 데이터 베이스를 설치하고 설정하고 관리 하지 않아도 된다.
  • 그러면서 동시에 비용도 더 저렴하다. 사용자가 직접 데이터 베이스를 설치하고 운영하는 것보다 RDS를 사용하는것이 더 저렴함.
  • 즉, RDS를 사용 하지 않을 이유가 거의 없다.
• Load Balancer (ALB)
  • 로드발란서는 HTTP 요청들을 여러 서버에 분산할때 사용된다.
  • HTTP 요청이 많을때는 서버 하나만으로 모두 처리 하기 힘들기 때문에 서버 수를 늘리는것이 일반적이다.
  • 그럼으로 여러 서버를 실행하고 로드발런서가 HTTP 요청들을 서버들에 분산 해주는 형태로 시스템이 구성된다.
• Route 53
  • AWS의 DNS 서비스. API 시스템을 실제 도메인과 연결 시키주는 기능을 제공한다.
• S3
  • AWS S3(Simple Storage Service)는 이름 그대로 파일을 쉽게 저장할 수 있는 공간을 제공하는 서비스.
  • 파일을 저장 할 수 있을 뿐만이 아니라 파일마다 고유 주소를 부여해주기 때문에 S3에 저장한 파일을 웹상에서 쉽게 읽어들일수 있다.
  • 주로 사이트상의 이미지들을 저장하고 사이트에서 읽어들여 렌더링 해주는데 사용한다.

이게 끝이다.