나라 목록 파일로 다운로드
사용자가 가본 나라를 선택할 수 있도록 전세계 나라 목록을 띄워야 하는데
API를 사용할 수도 있지만 데이터 특성상 변경이 거의 일어날 것 같지 않아서 굳이 그렇게 하지 않고 json 파일을 다운받아서 띄우기로 했다.
아래 Github 프로젝트에서 zip을 다운받았다.
https://github.com/stefangabos/world_countries
국가명(언어별), ISO 3166 표준 국가코드, 국기까지 이 앱에서 필요한 건 다 제공한다. 파일형태도 JSON 외에도 CSV, PHP, SQL 등 다양하게 제공.
일단 언어지원을 한/영만 할 계획이라 여러 파일 중에서
data/countries/en/world.json
data/countries/ko/world.json위 두 파일만 내 프로젝트에 가져왔다.
두 파일은 국가명에 쓰인 언어만 다르고 국가코드(id, alpha2, alpha3)는 똑같이 포함되어 있다. 따라서 가능하면 내가 하나의 파일로 합쳐서 사용해도 좋을 것 같다.
또한 각 폴더에는 countries.json 파일도 있는데, 이는 UN 가입국 193개만 포함되어 있어 기타 다른 영토도 포함된 총 249 행의 world.json 파일을 택했다.
자바스크립트에서 불러오기
자바스크립트에서 다른 파일을 가져올 때는 fetch 함수를 사용한다.
fetch(url)
.then((res) => res.json())
.then((countries) => {
// 나라 목록 띄우기
});이때 url은 자바스크립트 파일이 아닌 index.html 파일이 있는 최상위 폴더 기준으로 하여 상대경로로 작성한다.
아래와 같이 목록이 잘 뜬다.
회고 및 앞으로 할 일
라이브러리/프레임워크 사용에 익숙해져서인지 생각보다 자바스크립트만으로 앱을 개발하는 게 많이 막막하고 어렵다. 아주 별 거 아니어 보이는데도 시간이 꽤나 걸렸다. 하지만 어렵다는 건 그만큼 자바스크립트에 대한 이해가 부족했다는 것임을 깨닫고, 이 경험을 통해 기본기를 쌓을 뿐 아니라 라이브러리 및 프레임워크를 언제, 왜 사용하는지를 제대로 알고 사용할 수 있게 될거라 생각한다.
이제 각 나라에 체크박스 추가해서 선택할 수 있게 하고, 선택한 나라 목록을 유지 및 세계지도에 표시할 수 있도록 상태로 관리하고자 한다. -> Vanilla JS로 상태 관리하는 법 공부!
그리고 검색 기능만 추가하면 나라 목록 탭의 주요 기능 개발은 끝난다.
