웹 앱에서 주소 생성 및 관리 방법

소개

이 프로젝트에서는 웹 애플리케이션에서 새로운 주소를 생성하고 관리하는 방법을 배우게 됩니다. 이 프로젝트는 시/도 - 시/군/구 계단식 드롭다운, 폼 유효성 검사, 레이블 스타일 지정 및 새로운 주소 렌더링을 구현하는 것을 포함합니다.

👀 미리보기

address form demo gif

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

data.js 파일의 데이터를 사용하여 시/도 드롭다운을 초기화하는 방법
시/도 - 시/군/구 계단식 드롭다운 기능을 구현하는 방법
태그 목록의 레이블에 클릭 이벤트를 추가하여 선택된 레이블을 활성화하고 다른 레이블을 비활성화하는 방법
새로운 주소를 저장하기 전에 주소, 연락처 및 전화번호 필드의 유효성을 검사하는 방법
새로운 주소 목록 항목을 생성하여 주소 목록에 추가하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

JavaScript 를 사용하여 DOM 을 조작
사용자 상호 작용 및 이벤트 처리
폼 유효성 검사 및 데이터 처리 구현
HTML 요소를 동적으로 생성하고 추가

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

여기서:

index.html은 메인 페이지입니다.
css는 스타일 파일 폴더입니다.
images는 이미지 폴더입니다.
js/data.js는 시/도 및 시/군/구 데이터를 담고 있습니다.
js/index.js는 완성해야 하는 JavaScript 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

시/도 - 시/군/구 계단식 드롭다운 구현

이 단계에서는 시/도 - 시/군/구 계단식 드롭다운 기능을 구현하는 방법을 배우게 됩니다.

js/index.js 파일에서 provincechange() 함수를 찾습니다.
이 함수는 시/도를 선택했을 때 시/군/구 드롭다운을 업데이트하는 역할을 합니다.
먼저, document.getElementById("param_province")를 사용하여 선택된 시/도 드롭다운 요소에 대한 참조를 가져옵니다.
그런 다음, document.getElementById("param_city")를 사용하여 시/군/구 드롭다운 요소에 대한 참조를 가져옵니다.
다음으로, selectedProvince.value를 사용하여 시/도 드롭다운에서 선택된 시/도 인덱스를 가져옵니다.
그런 다음, 선택된 시/도 인덱스를 사용하여 data.js 파일의 towns 배열에서 해당 시/군/구를 가져옵니다.
마지막으로, 시/군/구 드롭다운 옵션의 길이를 시/군/구 수로 설정하고, 각 드롭다운 옵션의 텍스트와 값을 설정하기 위해 시/군/구를 반복합니다.

// Implement the state-city cascading dropdown.
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

레이블에 클릭 이벤트 추가

이 단계에서는 선택된 레이블의 스타일을 활성화하고 다른 레이블을 비활성화하는, 태그 목록의 레이블에 클릭 이벤트를 추가하는 방법을 배우게 됩니다.

js/index.js 파일에서 addClick() 함수를 찾습니다.
이 함수는 레이블에 클릭 이벤트를 추가하는 역할을 합니다.
먼저, document.querySelectorAll(".mark a")를 사용하여 모든 레이블 요소에 대한 참조를 가져옵니다.
그런 다음, 선택된 레이블의 인덱스를 저장할 param_mark 입력 필드에 대한 참조를 가져옵니다.
다음으로, 레이블 요소를 반복하고 각 요소에 클릭 이벤트 리스너를 추가합니다.
이벤트 리스너 내부에서 먼저 labels.forEach((l) => l.classList.remove("active"))를 사용하여 모든 레이블에서 active 클래스를 제거합니다.
그런 다음, label.classList.add("active")를 사용하여 클릭된 레이블에 active 클래스를 추가합니다.
마지막으로, param_mark 입력 필드의 값을 클릭된 레이블의 인덱스로 설정합니다.

function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

주소 정보 유효성 검사 및 저장

이 단계에서는 주소 정보의 유효성을 검사하고 새 주소를 주소 목록에 저장하는 방법을 배우게 됩니다.

js/index.js 파일에서 saveInfo() 함수를 찾습니다.
이 함수는 입력 필드의 유효성을 검사하고 새 주소를 저장하는 역할을 합니다.
먼저, 시/도, 시/군/구, 주소, 마크, 이름 및 전화번호 입력 필드의 값을 가져옵니다.
그런 다음, 시/도, 주소, 이름 또는 전화번호 필드가 비어 있는지 확인합니다. 필수 필드 중 하나라도 비어 있으면 경고 대화 상자를 표시합니다.
모든 필수 필드가 채워지면 새 목록 항목 요소 (<li>) 를 생성하고 주소 정보로 채웁니다.
새 주소 목록 항목에는 레이블 (선택한 마크 기반), 전체 주소 (시/도 및 시/군/구), 주소, 이름 및 전화번호가 포함됩니다.
마지막으로, 새 주소 목록 항목을 .address-list 요소에 추가하고 back() 함수를 호출하여 주소 관리 페이지로 리디렉션합니다.

function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

이러한 단계를 따르면 프로젝트에서 "새 주소 추가" 기능을 성공적으로 구현한 것입니다. 축하합니다!

최종 페이지 효과는 다음과 같아야 합니다.

Image Description

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

주소 관리 웹 애플리케이션

소개