2024.01.12 TIL - 알고리즘, 트러블슈팅(select박스 option에 click이벤트 주는법)

Innes·2024년 1월 12일

TIL 내배캠 내일배움캠프 본캠프 알고리즘 트러블슈팅

TIL(Today I Learned)

목록 보기

37/147

📘 오늘의 공부

알고리즘 코드카타

팀프로젝트 - select박스에 click이벤트 연결시키기

트러블슈팅

📝 알고리즘

문제

<문제 설명>
함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.
<제한 조건>
x는 -10000000 이상, 10000000 이하인 정수입니다.
n은 1000 이하인 자연수입니다.
내 풀이 (오류) : 로직 접근은 좋았으나 반복문과 push 메서드의 이해 부족, 변수 선언과 스코프에 대한 이해 부족으로 인해 오류 발생

function solution(x, n) {
    for (let i = 1; i <= n; i++) {
        let arr = [];
        x = x * i;
        let result = arr.push(x);
    }
    return result;
}
// 오류 메시지
// ReferenceError: result is not defined

오류 원인 : push메서드 안에 그냥 x * i 를 바로 넣으면 되는거였음, arr.push()는 push하고 난 후의 배열을 뜻하는 게 아니라 push하라고 명령하는것 뿐임(따라서 arr.push를 변수 선언할 필요가 없는것)
오류 수정 (다시 오류남)

function solution(x, n) {
    for (let i = 1; i <= n; i++) {
        let arr = [];
        arr.push(x*i);
    }
    return arr;
}
// 오류 메시지
// ReferenceError: arr is not defined

오류 원인 : 빈 배열을 반복문 안에서 선언함 -> 반복문 돌때마다 배열이 리셋됨 -> 마지막에 마지막 반복의 배열만 남게됨, return은 for문 바깥 스코프에 있는거라 얘는 Arr가 뭔지 모름
오류 수정 (최종)

function solution(x, n) {
    let arr = [];
    for (let i = 1; i <= n; i++) {
        arr.push(x * i);
    }
    return arr;
}

🏹 트러블슈팅

문제 : button태그에 click이벤트로 주었던걸 부트스트랩에서 가져온 select박스의 option에 click이벤트로 주고싶은데 잘 안됨
시도 : select option 클릭하면 console.log 찍는거까진 성공!
(html 태그에 onchange -> js에 작성된 함수 적용하는 방식)

<html>
      <div class="sort-select">
        <select class="form-select" id="floatingSelect" onchange="sortCards()">
          <option selected>기본</option>
          <option class="sortBtn-count" value="1">추천순</option>
          <option class="sortBtn-average" value="2">평점순</option>
        </select>
      </div>  

<js>
function sortCards() {
  const selectElement = document.querySelector('.form-select');
  const chooseOption = selectElement.options[selectElement.selectedIndex].value;

  if (chooseOption === '1') {
    return console.log('test');
    
  } else if (chooseOption === '2') {
    return console.log('test2');
  }
}

안됐던 원인
- if문에서 value 선택 비교를 숫자(1)랑 했는데, option태그에 value="1"이라고 되어있음(1은 문자열 이었다!)
- 여기다가 바로 기존 정렬/카드지우기/카드붙이기 코드 붙여넣었는데 '접근할수 없는 코드'라는 오류 발생 -> return 문 뒤에 코드는 접근하지 못한다고 함!, console.log, 내가 붙이려는 코드는 return이 필요없다
해결
- return문 지우고 정렬/카드지우기/카드붙이기 코드 붙여넣으니까 성공!
다른 방법 : 기존의 eventListener에 'click'대신 'change'넣고, 매개변수에 e넣기 -> event를 불러온것, e.target 하면 자기 자신을 찍는것 -> e.target.value 하면 옵션의 value 값이 찍힘 -> 찍은 value값 활용해서 아까같은 if문 함수 넣을 수 있음
발전
- if (value가 1이면) {정렬/카드지우기/카드붙이기}, If (value가 2면) {정렬/카드지우기/카드붙이기} 이렇게 했었는데, 중복되는 부분을 밖으로 빼고, 달라지는 부분(value if로 선택하는 부분)만 if문으로 주면 코드 짧게 만들수 있음
- html에 attribute 하는것보다(html 태그에) 이벤트리스너 addEventListener('change', (e)=>{}) 로 연습하는게 더 발전적인 방향(나중에 더 다양한 기능으로 활용할수 있고 react에서도 이렇게 많이 쓰기때문에)

정리

option의 value값에 접근하는 2가지 방법

//  select태그에 접근
const selectElement = document.querySelector('.form-select');

// select 안의 option 안에 value에 접근
const chooseOption = selectElement.options[selectElement.selectedIndex].value;

사용 방법 : html select 태그에
js에서 함수(){} value 접근하여 원하는 동작 넣기

// querySelector로 select태그 찍고, eventListener 'change'동작주고 e.target.value로 option의 value에 접근

document.querySelector('.form-select').addEventListener("change", (e) => {
const optionValue = e.target.value;