2024.01.20 TIL - 알고리즘(Math.max, min, filter) / 개인과제(onKeyPress)

📘 오늘의 공부

• 알고리즘 코드카타
• 리액트 개인과제

📝 알고리즘

• 문제 : 제일 작은 수 제거하기

  <문제 설명>
  정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.
  <제한 조건>
  arr은 길이 1 이상인 배열입니다.
  인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.

• 해설 : 최대값, 최소값 함수, spread operator를 활용하자!
  (참고 : https://hianna.tistory.com/487)

• 1차 시도(filter 메서드의 사용 미숙)

  • filter 메서드가 매개변수를 돌면서 filtering하는 기준은
    '조건을 실행했을때의 결과가 'true'인가'이다.
  • 이 개념이 헷갈리는 경우에는, filter 메서드 안에서 if문 쓰는걸 조심해야겠다.

function solution(arr) {
    let minNumber = Math.min(...arr);
    let answer = arr.filter((item)=>{
        if (arr.length > 1){
            return item !== minNumber
        } else if (arr.length <= 1) { // 이부분부터 오류 발생
            return -1;
        }
    })
     return answer;
}

• 풀이 : filter 메서드를 두번째 조건문에 주기

function solution(arr) {
    let minNumber = Math.min(...arr);
    if (arr.length <= 1) {
        return [-1];
    } else {
        let answer = arr.filter((item)=>item !== minNumber)
        return answer;
    } 
}

• 같은 로직, 다른 풀이 : 완전 똑같은데 훨씬 짧고 간결하다... 짜릿하다...

function solution(arr) {
    const min = Math.min(...arr);
    return arr.length !== 1 ? arr.filter(i => i !== min) : [-1]
}

• 함수, 메서드에서 return문의 위치가 헷갈린다. 추가적인 공부가 필요하다.

---

• 문제 : 가운데 글자 가져오기

  <문제 설명>
  단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.
  <제한사항>
  s는 길이가 1 이상, 100이하인 스트링입니다.

• 풀이 : 배열로 만들어야 index에 접근할 수 있는줄 알았는데, 일반 문자열에도 [ ]로 index로의 접근이 가능했다.

function solution(s) {
    // 문자열 s -> split으로 문자열 배열로 만들기
    // 홀수인 경우 : (첫인덱스 + 마지막인덱스)/2 의 인덱스를 가진 문자 꺼내기
    // 짝수인 경우 : 
    // (length/2 -1), length/2 의 인덱스값 꺼내기
    
    let arr = s.split('')
    if(arr.length % 2 !== 0) {
        let idx = (arr.length-1)/2;
        console.log(s[idx])
        return s[idx];
    } else {
        let idx2 = arr.length/2 -1
        let idx3 = arr.length/2
        return (s[idx2]+s[idx3]);
    }
}

• 다른 풀이 1. 대괄호([])는 배열뿐만 아니라, 문자열의 index에도 접근이 가능하구나!

function solution(s) {
    var answer = '';
    var length = s.length;

    if(length % 2 == 0){
        answer = s[length/2-1] + s[length/2]
    }else{
        answer = s[length/2-0.5]
    }

    return answer;
}

• 다른 풀이 2. Math.floor 활용하기!

function solution(s) {
    const mid = Math.floor(s.length/2);
    return s.length %2 === 1 ? s[mid] : s[mid-1]+s[mid];
}

🔥 리액트 개인과제(onKeyPress)

1. Enter키로 onClick 함수 호출하기

• 동작 원리

  • 전체를 감싸는 div에 onKeyPress를 주면 어떤 input칸에서 enter키 누르더라도 onclick함수가 호출됨
  • 특정 input태그에 onKeyPress를 주면 해당 input에 커서가 있을 때만 onClick함수가 호출됨

• 방법 : 핵심 키워드는 onKeyPress

  • onClick함수 - click시 실행할 함수 작성

  // 추가 onclick
  const addHandler = function () {
    // id 값 중복없게 하기 위해 newId 만드는 조건문
    let newId;
    if (box.length > 0) {
      newId = box[box.length - 1].id + 1;
    } else if (box.length <= 0) {
      newId = 0;
    }
  
    // input의 value 값 반영한 새로운 객체 생성
    const newObj = {
      id: newId,
      title: title,
      body: body,
      isDone: false,
    };
    setBox([...box, newObj]);
  
    // 클릭 후 input 빈칸으로 초기화
    setTitle("");
    setBody("");
  };

  • keyPress함수 - enter키 누르면 onClick함수를 호출하는 로직 작성

   // enter키로 todo 추가하기
  const onCheckEnter = (e) => {
    if (e.key === "Enter") {
      addHandler();
    }
  };

  • 원하는 태그에 onKeyPress={keyPress함수} - 해당 태그에서 enter키 누르면 onClick을 호출하게 해줌

  <input
     onKeyPress={onCheckEnter} // enter키 누르면 함수 호출
     value={body}
     onChange={inputBody}
     type="email"
     class="form-control"
     id="floatingInput"
     placeholder="name@example.com"
   />