2023.07.13 116일차 Team Project - 2 채용박람회

116일차 휴가

1. 채용공고

페이징 처리는 평소와 비슷하니 작성하지 않겠다.
채용공고 목록에서 체크박스 관련 파라미터가 있다면 체크박스를 체크된 상태로 만들어야한다.

// 현재 URL에서 쿼리스트링 추출
const urlParams = new URLSearchParams(window.location.search);

// 체크박스 그룹들
const checkboxGroups = [
  { name: 'employmentTypes', checkboxes: document.querySelectorAll('input[type="checkbox"][name="employmentTypes"]') },
  { name: 'experienceLevels', checkboxes: document.querySelectorAll('input[type="checkbox"][name="experienceLevels"]') },
  { name: 'educationLevels', checkboxes: document.querySelectorAll('input[type="checkbox"][name="educationLevels"]') }
];

// 체크박스 그룹에 대한 처리
checkboxGroups.forEach(group => {
  group.checkboxes.forEach(checkbox => {
    const value = checkbox.value;
    if (urlParams.getAll(group.name).includes(value)) {
      checkbox.checked = true;
    }
  });
});

위 코드는 다음과 같은 동작을 한다.

URLSearchParams를 사용하여 현재 URL의 쿼리스트링을 추출한다.
querySelectorAll을 사용하여 name="employmentTypes", 등 각가의 이름의 모든 체크박스 요소를 선택한다.
선택된 체크박스들에 대해서 반복문을 실행한다.

각 체크박스의 value를 읽어와서 쿼리스트링에서 해당 값이 있는지 확인한다.
urlParams.getAll('employmentTypes')는 'employmentTypes' 파라미터의 모든 값을 배열로 반환한다.
값이 존재한다면 체크박스를 선택상태로 설정한다 (checkbox.checked = true;)

이 코드를 사용하면 URL의 쿼리스트링에서 employmentTypes 파라미터에 해당하는 값이 있는 체크박스가 선택되게 된다.

2023.07.29

자바스크립트 코드를 통해서 파라미터의 값을 읽어 온 후 체크박스를 체크한다.