[javascript] 드래그 앤 드롭 기능을 가진 웹 기반 날씨 앱 예제 구현하기

29 Nov 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 드래그 앤 드롭 기능을 가진 웹 기반 날씨 앱을 예제로 구현해 보겠습니다. 이 앱은 사용자가 도시를 드래그하여 순서를 변경할 수 있고, 각 도시의 날씨 정보를 실시간으로 업데이트하는 기능을 제공합니다.

HTML 및 CSS 설정

먼저 HTML 파일을 만들고 다음과 같이 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>날씨 앱</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>날씨 앱</h1>

    <div id="city-list">
        <div class="city" draggable="true" data-city="seoul">서울</div>
        <div class="city" draggable="true" data-city="busan">부산</div>
        <div class="city" draggable="true" data-city="daegu">대구</div>
        <div class="city" draggable="true" data-city="incheon">인천</div>
    </div>

    <div id="weather-display">
        <h2 id="selected-city">도시를 선택하세요</h2>
        <p id="weather-info">날씨 정보가 표시됩니다</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

그리고 CSS 파일을 만들어서 다음과 같이 작성합니다.

#city-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.city {
    border: 1px solid #ddd;
    padding: 10px;
    margin-right: 10px;
    cursor: pointer;
}

#weather-display {
    margin-top: 20px;
}

#selected-city {
    font-size: 20px;
}

#weather-info {
    margin-top: 10px;
    font-weight: bold;
}

위 코드에서는 도시 목록과 날씨 정보를 표시할 요소들을 HTML로 만들어주고, 스타일을 CSS로 지정해줍니다.

자바스크립트로 기능 구현하기

이제 자바스크립트로 실제 기능을 구현해보겠습니다. script.js 파일을 만들고 아래 코드를 작성합니다.

// 각 도시별 날씨 정보를 담은 객체
const weatherData = {
    seoul: "맑음",
    busan: "흐림",
    daegu: "비",
    incheon: "구름",
};

// 도시 목록 요소를 선택합니다
const cityList = document.querySelector("#city-list");

// 날씨 정보를 표시할 요소들을 선택합니다
const selectedCity = document.querySelector("#selected-city");
const weatherInfo = document.querySelector("#weather-info");

// 각 도시를 드래그할 때 발생하는 이벤트 리스너
cityList.addEventListener("dragstart", (event) => {
    const city = event.target.dataset.city;
    
    // 드래그한 도시 정보를 전역 데이터에 저장
    event.dataTransfer.setData("text/plain", city);
});

// 날씨 정보를 업데이트하는 함수
function updateWeather(city) {
    selectedCity.textContent = city;
    weatherInfo.textContent = weatherData[city];
}

// 각 도시 목록에서 드롭할 때 발생하는 이벤트 리스너
cityList.addEventListener("dragover", (event) => {
    event.preventDefault();
});

cityList.addEventListener("drop", (event) => {
    event.preventDefault();
    const city = event.dataTransfer.getData("text/plain");
    
    // 도시의 위치를 변경
    const targetCity = event.target.dataset.city;
    const draggedCity = document.querySelector(`[data-city=${city}]`);
    const targetIndex = Array.from(cityList.children).indexOf(event.target);
    const draggedIndex = Array.from(cityList.children).indexOf(draggedCity);
    
    if (targetIndex < draggedIndex) {
        cityList.insertBefore(draggedCity, event.target);
    } else {
        cityList.insertBefore(draggedCity, event.target.nextSibling);
    }
    
    // 날씨 정보 업데이트
    updateWeather(city);
});

// 초기 날씨 정보 표시
const defaultCity = cityList.firstElementChild.dataset.city;
updateWeather(defaultCity);

위 코드에서는 weatherData라는 객체 안에 각 도시에 대한 날씨 정보를 저장하고, 드래그 앤 드롭 이벤트를 처리하는 자바스크립트 코드를 작성합니다. updateWeather 함수는 선택된 도시의 날씨 정보를 업데이트하는 역할을 합니다.

실행 및 테스트

위 코드를 모두 작성한 후에는 웹 브라우저에서 HTML 파일을 열어서 동작을 확인할 수 있습니다. 각 도시를 드래그하여 순서를 변경하면 날씨 정보가 자동으로 업데이트되는 것을 확인할 수 있습니다.

이 예제는 실제 날씨 정보를 사용하지 않고 단순히 시뮬레이션하고 있으므로, 실제 서비스에 적용하려면 실제 날씨 정보를 API 형태로 가져와야 합니다.

결론

이번 포스트에서는 자바스크립트를 사용하여 드래그 앤 드롭 기능을 가진 웹 기반 날씨 앱을 예제로 구현해 보았습니다. 이 예제를 통해 드래그 앤 드롭 이벤트 처리와 데이터 업데이트 등의 기본적인 웹 개발 기술을 학습할 수 있습니다.