1-1. 임의의 숫자 생성하기
const IMG_NUMBER = 4;
function genRandom() {
const number = Math.floor(Math.random() * IMG_NUMBER);
return number;
}
Math.floor()
: 숫자를 (바닥으로) 내림하여 정수로 만든다.
Math.ceil()
: 숫자를 (천장으로) 올림하여 정수로 만든다.
1-2. 화면에 띄우기
function paintImage(imgNumber) {
const image = new Image();
image.src = `img/${imgNumber + 1}.jpg`;
image.classList.add("bgImage");
body.appendChild(image);
이미지에 대한 새로운 클래스 값이 필요한 이유는 css 스타일링을 위해.
기존 로컬스토리지 저장하기와 마찬가지 방식으로,
로컬스토리지가 비어있으면 좌표를 물어본다.
function loadCoords() {
const loadedCoords = localStorage.getItem(COORDS);
if (loadedCoords === null) {
askForCoords(); //로컬스토리지가 비어있으면 좌표를 물어본다
} else {
//좌표가 있으면 getWeather
}
}
function askForCoords() {
navigator.geolocation.getCurrentPosition
(handleGeoSuccess, handleGeoError);
}
getCurrentPosition 객체는 두가지 요구사항이 있음.
1.포지션을 불러오는데 성공했을때 실행내용
2.실패했을때 실행내용
현재위치를 불러오는데 성공했을때:
위치값을 불러오고 값을 객체 안에 넣는다.
function handleGeoSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude: latitude,
longitude: longitude
};
saveCoords(coordsObj);
getWeather(latitude, longitude);
}
위치값 객체를 로컬스토리지에 저장하는 함수 만들기
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
API 란?
API (Aplication Programming Interface):
다른 서버로부터 손쉽게 데이터를 가져오는 수단이다.
특정웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된것. 객체형태로 데이터가 저장되어 있고 이 저장된 데이터 객체를 json이라고 함.
function getWeather(lat, lng) {
fetch(
`http://api.openweathermap.org/data/2.5/weather?
lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
)
.then(function(response) {
return response.json();
})
.then(function(json) {
const temperature = json.main.temp;
const place = json.name;
weather.innerText = `${temperature}@${place}`;
});
}
하지만 then 부분부터 너무 어려워서 1도 이해를 하지 못했다고 한다...... 다시 듣고 정리하겠음.
자잘하게 에러가 계속 나서 너무 답답했다.
강의 들으면서 공부하는 것의 단점은 어쨌든 강의 코드라는 답이 있으니까 내가 혼자 머리싸매고 해결하려고 한다기 보다는 코드 한 줄 한 줄 보면서 뭐가 잘 못 된건지 오타 찾으려고 하는 나를 자꾸 발견한다.
실제 코딩을 하게 되면 이제는 내가 혼자 해야만 하는데.. 아직은 아득하기만 할 뿐. 강의를 듣는게 과연 도움이 되는가 싶은 지점까지 왔다. 물론 지식이 생기는건 맞지만 어느시점부터는 내 개인 프로젝트를 빌드업을 시작해야한다. 이제 이번주 일요일부터 8주동안 토이프로젝트를 만드는 과정에 참여한다. 어떤걸 만들어보고싶은지 고민을 한번 해봐야겠다.