Github

군대에서의 두번째 프로젝트로 전역일 계산기 다음으로 무엇을 할까 고민하다. 지역별로 실시간 날씨 데이터를 받아와서 웹페이지에 출력해보고 싶어졌다. 기간은 약 1주 정도 소요된것 같다.

사용법

사용하는 방법은 간단하다 Input박스에 현재 날씨를 보고싶은 지역을 입력 후 검색을 하면된다.

날씨 출력

21년 9월 17일 현재 "서울" 이라고 검색해보았다

이어서 "부산" 이라고 검색해보았다
사진에서 보이듯이 날씨에 따라 배경화면과 투명한 박스 우측상단의 아이콘이 바뀌도록 해보았다.

에러페이지

지역명을 제대로 입력하지 않았거나 다른 문구를 입력했을시에 에러페이지로 전환된다.

프로젝트를 마치고 느낀점

axios를 이용하여 api를 받아왔는데 처음 사용해보아서 열심히 구글링을 하며 코드를 다 짜고 난 후 실행을 해보았을때 데이터가 제대로 받아와 지지않아서 고생을 했었다. 알고보니 async - await 구문을 이용했어야 했었다.
부족한 자바스크립트 지식으로 고생했다. 열심히 공부해야겠다.

아쉬운점

OpenWeatherMap은 지역명으로 api를 받아올때 영어로 지역명을 입력해야해서 한글로 입력했을시에 영어로 변환시켜줘야 했는데 찾아보면 좋은 라이브러리가 있었을텐데 그냥 하드코딩을 해버렸다.

function KTE(city) {
	var check_eng = /[a-zA-Z]/;

	// city값이 영어일시 그대로 리턴
	if (check_eng.test(city) == true) {
		city=city.toLowerCase();
		if (
			city == 'seoul' ||
			city == 'incheon' ||
			city == 'gyeonggi-do' ||
			city == 'busan' ||
			city == 'daegu' ||
			city == 'gwanju' ||
			city == 'daejeon' ||
			city == 'ulsan' ||
			city == 'gangwon-do' ||
			city == 'chungcheongbuk-do' ||
			city == 'chungcheongnam-do' ||
			city == 'jeollabuk-do' ||
			city == 'jeollanam-do' ||
			city == 'gyeongsangbuk-do' ||
			city == 'gyeongsangnam-do' ||
			city == 'jeju-do'
		) {
			return city;
		} else return 'err';
	} else if (city == '서울') return 'Seoul';
	else if (city == '인천') return 'Incheon';
	else if (city == '경기' || city == '경기도') return 'Gyeonggi-do';
	else if (city == '부산') return 'Busan';
	else if (city == '대구') return 'Daegu';
	else if (city == '광주') return 'Gwanju';
	else if (city == '대전') return 'Daejeon';
	else if (city == '울산') return 'Ulsan';
	else if (city == '강원도') return 'Gangwon-do';
	else if (city == '충북' || city == '충청북도') return 'Chungcheongbuk-do';
	else if (city == '충남' || city == '충청남도') return 'Chungcheongnam-do';
	else if (city == '전북' || city == '전라북도') return 'Jeollabuk-do';
	else if (city == '전남' || city == '전라남도') return 'Jeollanam-do';
	else if (city == '경북' || city == '경상북도') return 'Gyeongsangbuk-do';
	else if (city == '경남' || city == '경상남도') return 'Gyeongsangnam-do';
	else if (city == '제주' || city == '제주도') return 'Jeju-do';
	else {
		return 'err';
	}
}

여러 다른 코드들도 매끄럽지못하고 난잡하다. 다음번에는 좀더 보기좋게 코드를 작성하고싶다.