[Javascript] Vanilla JS로 크롬 앱 만들기 - Review(2)

노마드 코더 [Javascript] 기초 - Vanilla JS

---

100% 다 듣고 작성하는 수강 리뷰.. 사실 98%찍히지만 다 들었는데도 왜 98%인지 모르겠다.

이전 글로부터 이어진다.

2022.08.11 - [개발 Study/Node, js, react] - [Javascript] Vanilla JS로 크롬 앱 만들기 - Review(1)

[Javascript] Vanilla JS로 크롬 앱 만들기 - Review(1)

 

결과 화면

css 를 적용 안해서 그런지 정말 날 것 그대로지만, 강의에 나온 기능들은 다 들어갔다.

프로젝트 폴더 구조

이번 강의로 알게된 내용들을 정리해보자.

---

1. setInterval()을 이용한 함수 호출

// 호출할 함수, milliseconds 입력
setInterval(getClock, 1000);

setInterval을 이용하면 지정한 시간마다 함수를 호출할 수 있다. 이 기능을 이용하여 Date를 받아 현재 시간을 업데이트 해주는 기능을 만들었다.

---

2. padStart()를 이용하여 문자열 지정

//Date 객체 생성
const date = new Date();   
//시간을 String으로 만든 후 2자리 수로 만들며 앞에서부터 0으로 채운다. ex) "9" -> "09"
const hours = String(date.getHours()).padStart(2, '0');

padStart()는 앞에서부터 문자열을 지정한 값으로 채우고 padEnd()는 뒤에서부터 채운다. 이 함수를 이용하여 시간:분:초 를 모두 0을 포함한 두자리수로 출력했다.

---

3. Math.floor(), Math.random() 으로 랜덤숫자 + 숫자내림

//Math.random()으로 0부터-length-1까지 랜덤 숫자를 만들고 floor로 숫자 내림하여 정수로 만든다.
quotes[Math.floor(Math.random() * quotes.length)];

Math.random() 함수는 범위 내 실수를 만들고 floor()는 실수를 내림으로 정수로 만들어준다.

---

4. createElement(), appendChild()로 HTML Element를 생성하고 추가하기

// ListItem 객체를 생성한다.
const li = document.createElement('li');
// 기존 객체의 child로 추가한다.
toDoList.appendChild(li);

createElement()로 html에서 사용되는 객체를 생성하고 appendChild()로 body에 추가하거나 기존 Element에 추가할 수있다.

---

5. JSON.stringifiy() / JSON.parse() 객체와 JSON 변환하기

// JSON을 Text로 변형한다.
localStorage.setItem(TODO_KEY, JSON.stringify(toDos));
// Text를 JSON형식의 Object로 변형한다.
toDos = JSON.parse(savedToDos);

localStorage에 저장할 때 객체를 text 형식으로 저장하고 저장된 text형식을 JSON.Object로 변형하여 사용해야한다.

---

6. navigator.geolocation.getCurrentPosition() 로 현재 위치 정보 얻기

//성공 시 불러지는 콜백함수
function onGeoOK(position) {   
     const lat = position.coords.latitude;   
     const lng = position.coords.longitude;
}

// successCallback/errorCallback을 넣어준다
navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);

js에는 현재 위치정보를 받아오는 함수가 있으며 인터넷 연결 정보를 통해 현재 위치를 알 수 있다. 성공했을때 불리는 Callback함수와 Erorr 시 불리는 Callback함수를 파라미터로 넣어준다. 성공시 콜백에는 위치 정보가 파라미터로 들어오며 이 정보를 통해 경도와 위도 정보를 알 수 있다.

---

7. fetch().then() 로 url 호출하고 반환된 값 사용하기

fetch(url).then(response => response.json()).then(data => {       
    console.log(data);       
    const weather = document.querySelector("#weather span:first-child");       
    const city = document.querySelector("#weather span:last-child");
    city.innerText = data.name;       
    weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;   
});

fetch()함수로 url을 호출하면 then()에서 response로 반환된 값을 받아 json() 형식으로 변환한다. 변환된 data를 각 목적에 맡는 key 값으로 value를 얻어와서 사용하면 된다.

날씨 api는 이 곳에서 끌어와 사용했다.

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

기초를 다지기에 충분한 강의였고 시간되면 wetube라는 youtube 클론 코딩 강의도 들어봐야겠다.ㅎㅎ