>wecode 19 Project Kickoff

1. Codekata with 준우님

인자인 height는 숫자로 이루어진 배열입니다.
그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다.

아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다.

저 그래프에 물을 담는다고 생각하고,
물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요.

// 예) height = [1,8,6,2,5,4,8,3,7]

function getMaxArea(height) {
  let multiple = [];
  let max = Math.max(...multiple);
  for (i=0; i<height.length; i++){
    for (j=1; j<height.length; j++){
      height[i] < height[j] ? multiple.push(height[i](j-i)) : multiple.push(height[j](j-i))
    }
  }
  return max
}
// 수정필요......... 무한루프 돌기시작..

• Math.max(...arr) 배열에서 최댓값을 구할 수 있는 함수.. 짱이다..!

2. Monster 과제

• API 호출하여 데이터 로딩하기
• SearchBox에 입력한 문자가 이름에 있는 카드만 가져오기

class Monsters extends Component {
  state = {
    monsters: [],
    userInput: "",
  };

  // 데이터 로딩
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((res) => this.setState({ monsters: res }));
  }

  // handleChange 메소드 정의
  handleChange = (e) => {
    this.setState({ userInput: e.target.value });
  };

  render() {
    // data filtering
    const { monsters, userInput } = this.state;
    let filterData = monsters.filter((data) =>
      data.name.toLowerCase().includes(userInput)
    );
    return (
      <div className="Monsters">
        <h1>컴포넌트 재사용 연습!</h1>
      	// 하위 컴포넌트에 함수 넘겨주기
        {<SearchBox handleChange={this.handleChange} />}
        {<CardList filterData={filterData}/>}
      </div>
    );
  }
}

class SearchBox extends Component {
  render() {
    return (
      <input
        className="search"
        type="search"
        placeholder="Search..."
      // value값이 변할 때 부모 컴포넌트에서 정의한 handleChange함수 실행하기 
        onChange={this.props.handleChange}
      />
    );
  }
}

class CardList extends Component {
  render() {
    const {filterData} = this.props
    return (
      <div className="card-list">
      	// 부모 컴포넌트에서 가져온 데이터 뿌려주기
        {filterData.map((list) => (
          <Card id={list.id} name={list.name} email={list.email} />
        ))}
      </div>
    );
  }
}

class Card extends Component {
  render() {
    const {id, name, email} = this.props
    return (
      <div className="card-container" key={id}>
        <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="" />
          <h2>{name}</h2>
          <p>{email}</p>
      </div>
    );
  }
}

3. Project Kickoff

월요일 1차 Project 시작!!
-> 프로젝트 초기 세팅 부터 시작해 지금까지 배운 기초 개념들을 적용하며 탄탄히 다지는 시간

• Scrum - Trello 와 같은 tool 을 활용하여 스크럼 방식 아래 프로젝트 진행한다.
  Backlog -> This Week -> In Progress -> Done
• Sprint - 이번 주에 진행할 분량을 This Week에 할당한다.
• Standup Meeting - 매일 아침 미팅을 통해 어제 한 일, 오늘 할 일, blocker 세 가지를 공유하며 팀원들과 미팅을 진행한다.
• Meeting with Mentors - 프론트엔드/백엔드 각자 나누어 멘토와 미팅을 진행한다.