JavaScript로 단일 페이지 날씨 애플리케이션 구축

소개
Flatiron School 소프트웨어 엔지니어링 커리큘럼의 1단계를 최종적으로 마무리하기 위해 우리는 HTML, CSS 및 JavaScript만 사용하고 웹 페이지에 데이터를 제공하는 공개 API를 통합하는 단일 페이지 웹 애플리케이션을 만드는 임무를 받았습니다.

제 프로젝트를 위해 '오늘의 일기예보'라는 제목의 나만의 날씨 앱을 만들기로 결정했습니다. 프로젝트 자체는 약간 기본적이었지만, 재미있는 도전이었습니다. 목표는 전 세계 모든 도시에 대한 실시간 날씨 업데이트와 자세한 일기예보를 제공하는 사용자 친화적이고 반응성이 뛰어난 애플리케이션을 구축하는 것이었습니다.

프로젝트 요구사항
이 프로젝트에는 몇 가지 요구 사항이 있으며 각 요구 사항은 1단계에서 배운 기본 개념과 교훈을 강화합니다.

애플리케이션은 단일 페이지에서 완전히 실행되어야 합니다. 리디렉션이나 다시 로드는 허용되지 않으며 데이터는 공개 API 또는 db.json 파일에서 가져와야 합니다.
API 또는 db.json 파일은 각각 3개 이상의 속성을 포함하는 5개 이상의 서로 다른 객체를 반환해야 합니다.
모든 클라이언트 및 API 상호 작용은 JSON을 통신 형식으로 사용하여 비동기식으로 처리되어야 합니다.
프로젝트는 addEventListener() 메서드를 사용하여 추가된 서로 다른 유형의 이벤트를 각각 수신하는 3개 이상의 고유한 이벤트 리스너를 사용해야 합니다. 각 이벤트 리스너에는 고유한 콜백이 있어야 합니다.
애플리케이션은 배열 반복 인스턴스를 하나 이상 구현해야 합니다.

저는 개인적으로 API 구현이 가장 어려웠습니다. 부분적으로는 저의 우유부단함 때문이기도 했지만 개념이 저에게 가장 낯설게 느껴졌기 때문이기도 했습니다. 그러나 좀 더 살펴본 결과 API 구현이 실제로 이 프로젝트에서 가장 쉬운 측면 중 하나라는 것을 알게 되었습니다.

오늘의 일기예보' 기능:

실시간 날씨 업데이트
사용자가 도시 이름을 입력하면 애플리케이션은 해당 위치에 대한 실시간 날씨 데이터를 반환합니다. 첫 페이지에는 현재 기온(섭씨), 간략한 날씨 설명, 일기예보를 시각적으로 나타내는 아이콘이 표시됩니다.

3시간별 예보:
이 애플리케이션은 또한 3시간 간격으로 24시간 일기예보를 제공합니다. 이 섹션에는 현재 시간과 예상 기온(섭씨)이 모두 사용자에게 표시됩니다.

동적 업데이트:
모든 데이터는 페이지를 다시 로드하지 않고도 동적으로 가져오고 표시되므로 원활한 사용자 경험이 보장됩니다.

요구사항을 충족한 방법

1. 단일 페이지 지원서
   이 날씨 애플리케이션은 전적으로 단일 페이지에서 작동합니다. 사용자가 도시를 검색하면 JavaScript는 필수 데이터를 가져오고, 이전 콘텐츠를 지우고, 리디렉션이나 새로고침 없이 페이지를 새 정보로 동적으로 업데이트합니다.

2. 속성을 지닌 5가지 객체
   다음 개체가 구현되었습니다:

1.) 도시 개체:
속성: 이름, 위도, 경도가 포함됩니다.

2.) 날씨 개체:
속성: 온도, 설명, 아이콘이 포함됩니다.

3.) 예측 개체:
속성: 시간, 온도, 아이콘이 포함됩니다.

4.) DateTime 개체:
속성: 날짜, 시간, 요일이 포함됩니다.

5.) DOM 요소 개체:
속성: ID, 유형, 콘텐츠를 포함합니다.

각 개체는 데이터를 구조화하고 모듈성을 보장하는 역할을 했습니다.

1. 비동기 API 처리
   앱은 가져오기 API를 사용하여 OpenWeather API에서 실시간 날씨 및 예측 데이터를 검색합니다. 모든 데이터 상호 작용은 JSON을 사용하여 프로젝트 요구 사항을 충족합니다.

2. 세 명의 고유한 이벤트 리스너
   이 앱에는 세 가지 이벤트 리스너가 통합되어 있습니다.

클릭 이벤트 : 사용자가 '검색' 버튼을 클릭하면 날씨 데이터를 가져옵니다.
키 누르기 이벤트: 입력 필드에서 "Enter" 키를 누르면 동일한 날씨 가져오기 기능이 실행됩니다.
Mouseover 이벤트: 사용자가 날씨 아이콘 위로 마우스를 가져가면 추가 정보(예: "OpenWeatherMap에서 제공하는 데이터")가 동적으로 표시됩니다.

1. 배열 반복 예측 섹션에서는 forEach 메소드를 사용하여 각 3시간 예측에 대한 HTML 요소를 동적으로 생성합니다.

도전과제와 해결책
이 프로젝트에서 제가 겪은 몇 가지 과제는 OpenWeather API에서 데이터를 가져오는 동안 비동기 작업을 처리하는 방법을 이해하는 것뿐 아니라 API 자체와 db.json 파일과의 차이점을 이해하는 것이었습니다.
CSS는 제가 더 어렵고 기술적인 개념을 다루기 위해 집중하지 않는 경향이 있었기 때문에 앱 스타일링은 저에게 또 다른 큰 도전이었습니다.
그러나 연습을 통해 이러한 개념은 그다지 이상해 보이지 않았으며 내 코드가 완벽하지 않다는 것을 알고 있지만 이러한 문제를 해결한 후에는 개발자로서 내 기술에 훨씬 더 자신감을 느낍니다.

결론
이 프로젝트를 통해 JavaScript에 대한 이해가 확고해졌을 뿐만 아니라 인내심, 문제 해결, 깔끔한 모듈식 코드의 중요성에 대한 귀중한 교훈도 얻었습니다.

제가 애플리케이션을 만드는 것이 즐거웠던 만큼 여러분도 애플리케이션을 탐색하는 것이 즐거웠기를 바랍니다. 피드백이나 개선 제안을 자유롭게 공유해 주세요. 여러분의 생각을 듣고 싶습니다!

이 프로젝트의 소스 코드를 살펴보려면 다음 저장소에서 액세스할 수 있습니다: https://github.com/CourtneyKerr19/Todays_Weather_Forecast

읽어주셔서 감사합니다!

위 내용은 JavaScript로 단일 페이지 날씨 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!