TIL_2020년 11월 14일 (토)

TIL 작성 원칙

• 매일 쓴다.
• 사소한 것이라도 쓴다.
• 좋은 생각이든 나쁜 생각이든 다 기록이라고 생각하고 쓰자.
• 체크박스를 만들어서 꼭 해야하는 일들을 체크해두자!
• 나의 일기이기도 하지만 남에게 보여주는 에세이라고 생각하고 짤도 넣고 재밌게 쓰자~

0. 매일 해야할 일

• 개발관련 글 읽기 or 개발관련 영상 보기

  • 오늘 본 글/영상 : 현직 우버 개발자가 느낀 신입 개발자들이 제일 많이 하는 실수 3가지

• 개발관련 공부

• TIL 작성

• 알고리즘 풀기

1. 오늘 한 일

1. Wecode 몬스터 페이지 만들면서 리액트 기본기 다시 연습중. 목표는 주말안에 다 하기 !

     // 데이터 로딩
   
     getMonsterData = () => {
       fetch("https://jsonplaceholder.typicode.com/users", {
         method: "GET",
       })
         .then((res) => res.json())
         .then((res) => {
           // console.log(res);
           this.setState({
             monsters: res,
           });
         });
     };
   
     componentDidMount() {
       this.getMonsterData();
     }
   
     // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
     handleChange = (e) => {
       this.setState({
         userInput: e.target.value,
       });
     };
   
     render() {
       const { monsters, userInput } = this.state;
       // 필터링 하는 코드
       const filteringMonster = monsters.filter((monters) => {
         return monters.name.toLowerCase().includes(userInput);
       });
   
       return (
         <div className="Monsters">
           <h1>컴포넌트 재사용 연습!</h1>
           <SearchBox handleChange={this.handleChange} />
           <CardList monsters={filteringMonster} />
         </div>
       );
     }
   }
   
   export default Monsters;
   
   

class Card extends Component {
  render() {
    const { monster } = this.props; // 이거 왜 안되는거죠?

    return (
      <div className="card-container">
        <img
          src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`}
          // 이 문법을 잘 몰라서 한동안 당황했다... 안에 넣을 때는 이렇게 대괄호로 감싸야한다!
          alt="profile"
        />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

1. 블로그 작성

• TIL_2020년 11월 14일 (토))

2. 오늘의 생각