자바스크립트로 prodcode에 따른 URL과 설정 관리하기
prodcode란 무엇인가요?
자바스크립트에서 특정 제품 코드를 기준으로 동작을 달리해야 하는 경우가 있습니다. 이런 경우를 처리할 때, 조건문을 효율적으로 작성하는 것은 중요한 과제입니다. 오늘은 prodcode라는 제품 코드에 따라 URL과 설정을 변경하는 방법을 자바스크립트로 구현하는 과정을 함께 알아보겠습니다.
문제 정의: 제품 코드에 따른 조건 처리
제품 코드(prodcode)에 따라 아래와 같은 작업을 진행해야 합니다:
- 제품 코드에 따른 상품명 및 설정값 설정
- 특정 코드에 따라 prodName, arrayWidth, arrayHeight 값을 설정합니다.
- 각 코드의 의미를 명확히 하여 읽기 쉬운 로직을 작성합니다.
- prodcode에 따라 다른 URL 호출
- 제품 코드가 KS 또는 KW로 시작하면 write_ACI.php 파일로 연결합니다.
- 그렇지 않은 경우 write_ACI_slat.php 파일로 연결합니다.
자바스크립트 코드 구현
아래 코드는 위 요구사항을 만족하는 자바스크립트 코드입니다. 학생들이 쉽게 이해할 수 있도록 주석도 함께 작성하였습니다.
function redirectToView(num, tablename, prodcode) {
// 변수 초기화
let prodName, arrayWidth, arrayHeight, url;
// 제품 코드에 따른 상품명 및 설정값 설정
switch (true) {
case prodcode === 'KSS01' || prodcode === 'KSE01':
prodName = '국민방화 스크린 셔터';
arrayWidth = screen_width;
arrayHeight = screen_height;
break;
case prodcode === 'KWE01':
prodName = '국민방화 스크린 플러스 셔터';
arrayWidth = screen_width;
arrayHeight = screen_height;
break;
case prodcode === 'KD-SL60' || prodcode === 'KTE01':
prodName = '국민방화 스틸 셔터';
arrayWidth = slat_width;
arrayHeight = slat_height;
break;
case prodcode === 'KQTS01':
prodName = '국민방화 투시형 스틸 셔터';
arrayWidth = slat_width;
arrayHeight = slat_height;
break;
default:
prodName = '알 수 없는 제품';
arrayWidth = 0;
arrayHeight = 0;
}
// prodcode에 따라 URL 설정
if (prodcode.startsWith('KS') || prodcode.startsWith('KW')) {
url = "write_ACI.php?num=" + num + "&tablename=" + tablename;
} else {
url = "write_ACI_slat.php?num=" + num + "&tablename=" + tablename;
}
// 팝업 창 열기
customPopup(url, '인정검사', 800, 900);
}
코드 상세 설명
1. switch (true) 문으로 조건 관리하기
switch문을 활용하여 제품 코드에 따른 상품명과 설정값을 설정합니다. 기존의 if-else문을 사용하면 가독성이 떨어지기 쉽지만, switch를 사용하면 조건별 처리를 보기 좋게 정리할 수 있습니다.
switch (true) {
case prodcode === 'KSS01' || prodcode === 'KSE01':
prodName = '국민방화 스크린 셔터';
arrayWidth = screen_width;
arrayHeight = screen_height;
break;
// ...
}
2. prodcode.startsWith로 코드 시작 문자 확인
제품 코드가 KS 또는 KW로 시작하는지를 확인하기 위해 startsWith 메서드를 사용합니다. 이렇게 하면 코드가 명확하고 간결하게 작성됩니다.
if (prodcode.startsWith('KS') || prodcode.startsWith('KW')) {
url = "write_ACI.php?num=" + num + "&tablename=" + tablename;
} else {
url = "write_ACI_slat.php?num=" + num + "&tablename=" + tablename;
}
3. 동적으로 URL 설정 및 팝업 호출
조건에 따라 URL을 설정한 후, customPopup 함수를 통해 팝업 창을 엽니다. 이는 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
customPopup(url, '인정검사', 800, 900);
결론: 코드를 통해 배운 자세
이번 자바스크립트 코드를 통해 우리는 다음과 같은 교훈을 얻을 수 있습니다.
- 가독성을 우선하라
조건문을 정리하는 방식은 코드의 가독성을 높이는 중요한 요소입니다. 깔끔한 switch와 startsWith 활용은 유지보수를 쉽게 만듭니다. - 명확한 로직 작성이 중요하다
제품 코드를 기준으로 각 값을 명확히 분리하여 설정하는 방식은 오류를 줄이고 로직의 이해를 돕습니다. - 효율적인 도구 활용
적절한 메서드(startsWith)와 구조(switch)를 활용하는 것이 코드를 더 간결하고 효율적으로 만듭니다.
우리는 코드 작성뿐 아니라 삶에서도 효율적이고 명확한 태도를 가져야 합니다. 문제를 명확히 이해하고, 필요한 도구를 활용하며, 깔끔하게 해결하는 자세를 통해 더 나은 결과를 만들 수 있습니다.
반응형
