selectbox를 JS로 컨트롤 해보기 2 - 서버 Data 받아서 처리하기

selectbox를 JS로 컨트롤 해보기 2 - 서버 Data 받아서 처리하기

 

 

지난 몇 개의 포스팅을 통해 Javascript를 이용해서 selectbox를 컨트롤 하는 방법을 정리해보았습니다.

 

selectbox를 JS로 컨트롤 해보기 - input, change 이벤트

selectbox를 JS로 컨트롤 해보기 - input, change 이벤트

 

 

그리고 추가로, document.createElement 메서드를 이용해서 HTML 엘리먼트 요소를 동적으로 생성하는 방법을 알아보았습니다. 곁다리로 함께 insertAdjacentHTML() 메서드로 HTML 문서에 동적으로 생성된 엘리먼트들을 붙여 넣는 방법을 정리했더랬습니다.

 

JS로 HTML 엘리먼트 생성하기

JS로 HTML 엘리먼트 생성하기

 

 

위 2 가지의 내용이 복잡적으로 필요한 상황과 더우기 '서버로부터 Data를 받아서 동적으로 처리하는' 상황을 가정하여 전체적인 내용을 정리해보기로 합니다.

 

 

 

구현 목표 - 동적인 사이즈 선택 기능

 

Step 1. 쇼핑몰 상황을 가정하고, selectbox를 이용하여 "양말", "티셔츠", "바지" 중 상품 선택을 진행합니다.

양말을 선택하는 경우에는 추가적인 사이즈 선택은 없습니다

 

Step 2. 양말은 추가적인 사이즈 선택이 없고, 티셔츠는 95/100/105/110 사이즈를 추가로 선택해야 합니다.

티셔츠는 95/100/105/110 사이즈를 추가로 선택해야 합니다.

 

Step 3. 바지는 28/30/32 사이즈를 추가로 선택해야 합니다.

바지는 28/30/32 사이즈를 추가로 선택해야 합니다.

 

 

 

서버에서 받은 Data

 

일반적으로 서버와의 통신을 통해 Database의 내용을 질의(Qeury)한 결과 값을 클라이언트가 내려 받게 되는데요, 보통은 변수 형태로 담겨진 상태로 전달을 받게 됩니다. 그리고 전달 받게 되는 데이터들의 결과는, 배열(Array)이나 객체(Object)와 같은 형태로 전달 받게 됩니다.

 

서버랑 어떻게 통신을 하는지는 몰라도, 결과적으로 Data가 배열이나 객체에 담겨져 있다면 우리는 이미 그것을 꺼내서 활용하는 방법을 잘 알고 있는 상태입니다. 이전 포스팅에서 여러 번 정리를 했었죠?

 

서버에서 받은 Data는 다음과 같은 형태라고 가정을 해봅시다.

// 서버에서 받은 사이즈 데이터

const pants = [28, 30, 32];
const shirts = [95, 100, 105, 110];

 

자, 그러면 이제 지난 번 포스팅에서 살펴보았던 것처럼 selectbox만 잘 컨트롤 해주면 되겠군요? 당장 코딩해봅시다.

 

 

 

HTML / CSS 코딩

 

웹 페이지의 UI는 이전 예제를 그대로~ 재사용해보기로 합니다.

<form class="container my-5 form-group">
  <p>상품선택</p>
  <select class="form-select mt-2">
    <option>양말</option>
    <option>티셔츠</option>
    <option>바지</option>
  </select>
  <select class="form-select mt-2 off">
  <!-- 사이즈 들어갈 위치 -->
  </select>
</form>

<style>
  .off {
    display: none;
  }
</style>

 

이런 모습으로 보이겠죠? (※ Bootstrap이 적용되어 있습니다!)

select박스를 선택하기 이전의 최초화면

 

 

Javascript 코딩

 

이전 과정 포스팅에서 다뤘던 JS 코딩들이니, 굳이 자세하게 단계별로 설명하지 않아도 충분하겠죠?

const pants = [28, 30, 32];         // 서버에서 받은 바지 사이즈 데이터
const shirts = [95, 100, 105, 110]; // 서버에서 받은 티셔츠 사이즈 데이터


const choice = document.querySelectorAll(".form-select")[0];  //첫번째 selectbox
const size = document.querySelectorAll(".form-select")[1];    //두번째 selectbox

choice.addEventListener("input", function(){
 if(choice.value == "바지"){
    size.innerHTML = '';           // 두번째 selectbox에 내용을 싹 지워준다(초기화)
    size.classList.remove('off');  // off 클래스를 제거해준다
    pants.forEach(function(i){     // 배열로 받았으니, for보다 간편한 forEach로 꺼내준다
    size.insertAdjacentHTML("beforeend", `<option>${i}</option>`);  // 각 사이즈를 넣어서 생성하고 붙여준다
    })
  } else if(choice.value == "티셔츠"){
    size.innerHTML = '';
    size.classList.remove('off');
    shirts.forEach(function(i){
    size.insertAdjacentHTML("beforeend", `<option>${i}</option>`);
    })
  } else {  // 양말만 선택되어 있는 화면
    size.classList.add('off');
  }
})

 

처음 로딩시에는 사이즈 데이터가 없습니다.

 

브라우저에 처음 로딩했을 때는 <!-- 사이즈 들어갈 위치 --> 라고 주석이 표시만 되어 있다가, 이벤트가 발생하게 되면,

이벤트가 발생하면, 서버의 데이터를 받아서 엘리먼트를 동적으로 생성해줍니다.

 

이렇게 사이즈값들를 담고 있는 opttion 엘리먼트들이 동적으로 생성되는 것을 확인할 수 있습니다.

 

 

 

마치며

 

학습 목적상 날 것 그대로부터 익히는 게 좋을 것 같아 Vanilla JS로 작성해보았습니다.

 

코드가 좀 복잡스럽고 길어보이더라도 이전 포스팅부터 단계적으로 따라서 학습했다면, 코드를 찬찬히 살펴보면 충분히 이해가 가능한 수준일 겁니다.

 

문득 가져보는 생각인데, 코딩은 '취미'와 많이 닮아 있는 것 같습니다. 저도 제법 잘 하는 취미 생활이 있는데요,

직업적인 개발자가 아니더라도, 시간 날 때 마다 하나씩 익히면서 즐겨본다면 나중에는 상당한 수준은 아니더라도 왠만큼은 어깨뽕 들어가는 '동호인' 정도는 될 수 있지 않을까 하는 생각을 해봅니다.

 

오늘도 즐거운 코딩하세요!

즐거운 코딩생활, 즐코딩

KINcoding.

 

 

 

https://app.kincoding.com 

WANTED MBTI