TIL0519 javascript, react

Javascript

특정 배열에서 중복되는 수 중 과반수를 반환하는 코드

function moreThanHalf(nums) {
  	// 빈 객체를 만들어줌
	let arr = {}
    // 만약 숫자가 하나 있을 경우 그 숫자를 리턴
    if (nums.length === 1) { return nums[0]}
  	// nums 요소의 개수만큼 반복문 돌리기
  	for (let i = 0; i < nums.length; i++) {
    // 만약 arr 에 키값이 nums[i] 가 있다면
    	if(arr[nums[i]]) {
    // 그 키의 값에 +1
        	arr[nums[i]] += 1;
    // 그 키의 값이 nums 의 길이를 반으로 나눈 것 보다 크다면 해당 키 리턴
          	if(arr[nums[i]] >= nums.length/2) { 
              return nums[i]
            }
    // 키가 없으면 키 생성하고 값 1 주기
        } else {
        	arr[nums[i]] = 1;
        }
    }
}
moreThanHalf([2,2,1,1,1]);
// 2 출력

React

trello

trello 협업할 때 같이 사용하는 투두리스트 같은 것
상황에 따라 바꿀 수 있는 툴

fetch, filter 연습 예제

user 정보가 들어있는 api 를 가져와서 그 정보를 담아 미리 정의한 몬스터 카드 템플릿에 넣는 예제이다
그리고 사용자가 이름으로 검색했을 때 그 조건에 맞는 몬스터 카드가 나온다

// 데이터 로딩
  componentDidMount() {
    // fetch 에 따로 method 를 지정하지 않으면 자동으로 GET 이다 
    // 이 예제는 따로 보낼 정보가 없기 때문에 get 으로 정보를 가져온다
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      // .then((res) => console.log(res))
      // 응답받은 정보를 setState 를 이용해 저장한다
      .then(res => this.setState({ monsters : res }))
  }
  // SearchBox에 props로 넘겨줄 handleChange 메소드 정의
  handleChange = (e) => {
    this.setState({
      userInput : e.target.value
    })
  }

사용자 검색 부분
input 창에 이름으로 몬스터를 검색해 보여주는 기능을 구현했다

  // 사용자 검색 코드
  render() {
    // 필터 함수를 사용해 입력되는 정보와 기존의 정보를 비교해서 보여준다
    const filtered = this.state.monsters.filter(
      (mon) => {
       return mon.name.toLowerCase().indexOf(this.state.userInput.toLowerCase()) > -1;
      }
    );
    return (
      <div className="App">
        <h1>컴포넌트 재사용 연습!</h1>
        <SearchBox handleChange={this.handleChange} />
        <CardList monsters={filtered} />
      </div>
    );
  }
}
export default App;

초반 필터링 코드는 indexOf 로 두 값을 비교했는데 그것보다는 includes 가 더 정확해서 수정하였다

const filtered = this.state.monsters.filter(
      (mon) => {
      // 초기 return 은 indexOf 로 값을 비교했다 
      return mon.name.toLowerCase().indexOf(this.state.userInput.toLowerCase()) > -1;
      // includes 로 수정 
      return mon.name.toLowerCase().includes(this.state.userInput.toLowerCase());
      }
    );