2024.01.19 TIL - 알고리즘(findIndex, indexOf, replace, join), 리액트 개인과제

📘 오늘의 공부

• 알고리즘 코드카타
• 개인과제 시작!(todo list 만들기)

📝 알고리즘

• 문제 : 서울에서 김서방 찾기

  <문제 설명>
  String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.
  <제한 사항>
  seoul은 길이 1 이상, 1000 이하인 배열입니다.
  seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다.
  "Kim"은 반드시 seoul 안에 포함되어 있습니다.

• 풀이 : findIndex

function solution(seoul) {
    let index = seoul.findIndex((item)=>{return item==="Kim"});
    return '김서방은 '+ index+ '에 있다';
}

• arr.findIndex()

  • 배열의 요소를 돌면서 조건에 맞는 요소의 index를 반환
  • 매개변수는 콜백함수
  • 매개변수 : function(요소){return 조건}

• 다른사람의 풀이 : indexOf

function findKim(seoul){
  var idx = seoul.indexOf('Kim');

  return "김서방은 " + idx + "에 있다";
}

• arr.indexOf()
  • 배열에서 특정 문자열의 Index를 찾고 싶을 때 사용
    (특정 문자의 위치를 찾는데 최적화된 메서드)
  • 매개변수 : 찾고자 하는 문자열

---

• 문제 : 나누어 떨어지는 숫자 배열

  <문제 설명>
  array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.
  divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.
  <제한사항>
  arr은 자연수를 담은 배열입니다.
  정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.
  divisor는 자연수입니다.
  array는 길이 1 이상인 배열입니다.

• 풀이 (1차시도 - 실패) : '배열이 비어있는 경우'를 newArr === [ ] 라고 표현함

function solution(arr, divisor) {
    // 1. 빈배열 만들기
    // 2. arr에서 divisor로 나눠떨어지는 애들 빈배열에 넣기(Push)
    // 3. if 배열이 비어있지 않다면
    // 3-1. 배열 오름차순 정렬, return 배열
    // 4. else if 배열이 비어있다면
    // 4-1. return [-1]
    
    let newArr = [];
    for(let i=0; i<arr.length; i++) {
        if(arr[i] % divisor === 0) {
            newArr.push(arr[i]);
        }
    }
    if(newArr !== []) {
        newArr.sort((a,b) => a-b);
        return newArr;
    } else if(newArr === []) {
        return [-1];
    }
}

• 풀이(2차시도 - 성공) : '배열이 비어있는 경우'는 배열의 길이로 표현하면 되는거였음! (newArr.length === 0)

function solution(arr, divisor) {
    // 1. 빈배열 만들기
    // 2. arr에서 divisor로 나눠떨어지는 애들 빈배열에 넣기(Push)
    // 3. if 배열이 비어있지 않다면
    // 3-1. 배열 오름차순 정렬, return 배열
    // 4. else if 배열이 비어있다면
    // 4-1. return [-1]
    
    let newArr = [];
    for(let i=0; i<arr.length; i++) {
        if(arr[i] % divisor === 0) {
            newArr.push(arr[i]);
        }
    }
    if(newArr.length !== 0) {
        newArr.sort((a,b) => a-b);
        return newArr;
    } else if(newArr.length === 0) {
        return [-1];
    }
}

• 풀이(1차시도 - 실패) : replace로 문자열 바꾸기 시도

function solution(phone_number) {
    // 1. phone_number를 문자 배열화
    // 2. 배열의 끝 4개 빼고 나머지를 *로 바꿔주기 (For문)
    // 3. 배열 요소들 합쳐서 하나의 문자열로 만들기 (join 메서드)

    let phone_strArr = phone_number.split('');
    for (let i=0; i < phone_strArr.length -4; i++) {
        let phone_replace = phone_strArr.replace(phone_strArr[i], '*')
    } console.log(phone_replace)
}

• replace() : 문자열 메서드! 배열 메서드 XX
• 풀이(2차시도 - 성공) : for문에서 요소 = '대체할 문자열' 로 할당하기

function solution(phone_number) {
    // 1. phone_number를 문자 배열화
    // 2. 배열의 끝 4개 빼고 나머지를 *로 바꿔주기 (For문)
    // 3. 배열 요소들 합쳐서 하나의 문자열로 만들기 (join 메서드)

    let phone_strArr = phone_number.split('');
    for (let i=0; i < phone_strArr.length -4; i++) {
        phone_strArr[i] = '*';
    }
    let answer = phone_strArr.join('')
    return answer;
}

• join() : 배열 요소를 하나의 문자열로 반환할 때 사용
  • 참고 : join()

// 예시

const arr = ["Hello", "World", "JavaScript", "!!!"];

let str = arr.join();
console.log(str)
// Hello,World,JavaScript,!!!

str = arr.join("");
console.log(str)
// HelloWorldJavaScript!!!

str = arr.join(" ");
console.log(str)
// Hello World JavaScript !!!

• replace() : replace(before 문자열, after 문자열)
  • 바꾸고싶은 문자열이 여러개인 경우 첫번째 문자열만 바꾸고 끝남
  • 바꾸고싶은 문자열이 여러개인 경우에는 replace(/before 문자열/g, after 문자열)
    (g : global match, 대소문자 무시 하고싶으면 /gi(ignore))
  • 참고 : replace(), replace(/gi)

// 예시

let str = 'apple, banana, orange';
let replaced_str = str.replace('banana', 'tomato');
// 'apple, tomato, orange'

🔥 리액트 개인과제(Todo List)

💡 새롭게 알게된 정보 및 트러블 슈팅 정리!

1. jsx에서 Onclick줬을때, onclick 당한 애의 id를 js쪽에서도 쓰고싶을땐?

jsx

• map돌고있을때( map(item) 이라고 가정)
  • onClick={()=> 함수이름(item.id)}
  • 원래는 onClick={함수이름} 으로 끝냄
    -> onclick을 화살표함수로, 클릭시 실행되는 함수의 매개변수에는 map에서 돌고있는 item객체 내의 id에 접근

js

• const 함수이름 = (id) => {}
  • jsx에서 item.id로 받아서 넘겨준 애를 Js에서 id로 받음!
    jsx -> js 어떤 값 넘겨줘야할 때 이런식으로 활용!

2. findIndex()

• 배열.findIndex((배열의 요소) => 찾는 애의 조건)
  • 클릭한 애의 id와 기존 배열 내 객체에서 같은 id인 애 찾을 때 사용했음
    
    

3. spread 문법은 배열에서만 쓸 수 있는줄 알았는데 객체에서도 쓸수있구나!

4. ⭐️⭐️ 객체배열에서 특정 객체의 요소에 접근하기

특정 id를 가진 객체의 요소 isDone: false 를 true로 바꾸고싶었다 ....!!!

• box 배열에서 특정 id를 가진 객체의 isDone을 true로 바꿔주고 또 그true로 바꾼 애를 포함한걸 다시 배열로 바꿔주고 싶을때!!~!~!~!~~

  // '완료' 클릭하면 isDone을 true로 바꿔줘
  // (완료 버튼 onclick의 콜백함수 completeHandler)

  const completeHandler = function (id) {
    // box를 map으로 돌린다
    const trueBox = box.map(function (item) {
      // 클릭한 애의 id와 같은 id를 가진 객체 찾기 조건문
      if (item.id === id) {
        // 새로운 객체를 반환!
        return { ...item, isDone: true };
      }
      // 새롭게 변한애 말고 나머지는 기존대로 반환한다
      return item;
    });
    // 객체 하나가 바꼈으니 box도 다시 set 해줘야한다
    setBox(trueBox);
  };

• 참고

  • findIndex로 id를 비교하는 개념
    ex)

    // '완료' 클릭하면 isDone을 true로 바꿔줘
     const completeHandler = function (id) {
       // 한빈님 답변
       // console.log(id);
       const idx = box.findIndex((item) => item.id === id);
       // console.log(idx);
       // console.log(box[idx]);
       // console.log(box[idx].id);
       // true로 바꾼 애 -> setBox로 다시 정해주기

  • for문으로 돌리는 개념
    (시도해봤으나 잘 모르겠음)

• 결국 답은 map이었다
  box를 map으로 돌면서 각 요소들의 id를 비교해 -> 내가 찾는 id 가진애 발견하면 걔의 isDone을 true로 바꿔줘 -> 나머지 애들은 그대로 둬(return item) ->
  map으로 재탄생한 새로운 배열을 변수로 받아줘 -> map 밖에서 setBox로 그 변수를 받아주면 끝!!
  
  

5. id값 중복되지 않게 설정하기 (hint. length를 활용한 우회)

• id 주는 방법이 그냥 배열길이에 +1 하면 단순히 끝날줄 알았는데,
  나중에 삭제까지 했을 경우에는 배열길이가 달라지고,
  그 length에 +1을 한 id가 추가된다면 중복된 id값을 가진 애들이 생길 수가 있다고 함.ㄷㄷ
  그래서 알게된 방식이 newId = box[box.length-1].id +1
  이렇게 우회해서 새로운 id를 생성하면 겹치지 않는 id를 만들 수 있다고 한다.
  너무 복잡하다 😂

• 예시

let arr = [
{id: 0}, // index: 0, id: 0, length: 1
{id: 1}, // index: 1, id: 1, length: 2
{id: 2}, // index: 2, id: 2, length: 3
]

// index: 3, id: 3, length: 4 인 새로운 객체 만들어야함

const newId = arr[arr.length -1].id + 1;

• 근데 주의! 조건문도 필요해.
  만약 빈배열이면 length가 0이고 거기에 -1한걸 index로 갖는다면 오류가 날거야!
  그래서 위의 식은 arr.length가 0보다 클때 써야하고(arr.length > 0),
  arr.length <= 0 인 경우에는 0 이 나오게 해야해!