JS로 Momentum Clone하기! - 3

배준현·2021년 9월 7일
0

JS로 Momentum Clone

목록 보기
3/3
post-thumbnail

Nomad Coder님의 'Vanilla JS로 크롬 앱 만들기'를 따라가며 제가 배운 것들을 정리하는 포스트입니다.

'바닐라 JS -> 관련 프레임워크 -> 백엔드' 로 빠르게 웹 개발과정을 돌아보는 과정의 시작입니다.

글 솜씨가 아주 부족합니다..

각 기능별로 여러개의 javascript 파일로 나누어 구현합니다.

  1. Greeting.js : 사용자로부터 입력을 받은 값을 Local Storage에 저장해 사용자를 기억합니다.
  2. Clock.js: 현재의 시간을 페이지에 나타냅니다.
  3. Quotes.js ,Background.js : 명언과 배경화면을 랜덤하게 화면에 띄워줍니다.
  4. Todo.js : 할 일을 User한테 입력받은 후, 바로 화면에 띄워줍니다. 또한, Greeting과 같이 Local Storage에 저장해두어 User가 다시 들어왔을 때 이전의 todo list를 띄워줍니다.
  5. Weather.js : navigator를 이용하여 현재 좌표를 받은 후, Open Weather API를 이용하여 현재의 위치의 날씨를 화면에 띄워줍니다.

지난 시간에는 Date객체로 시간을 화면에 나타내어 주는 Clock.js에 대해 알아보았습니다.또한 랜덤한 명언과 배경사진을 나타내는 Quotes.js와 Background.js에 대해 알아보았습니다. 이번시간에는 할일을 저장하고 나타내어주는 Todo.js와 현재 GPS정보를 받아와 현재 위치의 날씨를 나타내어 주는 weather.js에 대해 설명한 후 배운점을 정리해보겠습니다!

1. Todo.js

const todoForm = document.querySelector("#todo-form");
const todoList = document.querySelector("#todo-list");
const todoInput = todoForm.querySelector("input");

// 할일이 들어갈 todos 배열
let todos = [];

const TODOS_KEY = "todos";

function saveTodos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(todos));
}

function deleteTodo(event){
   const li =  event.target.parentElement;
   li.remove();
   todos = todos.filter(toDo => toDo.id !== parseInt(li.id));
   saveTodos();
}

function paintTodo(newTodo){
    const li = document.createElement("li");            // li 생성
    li.id = newTodo.id;
    const span = document.createElement("span");           //span 생성
    const button = document.createElement("button");       // button 생성
    span.innerText= newTodo.text;
    button.innerText = "❌";
    button.addEventListener("click",deleteTodo)             // 'X'의 클릭을 듣고 있는 Listener
    li.appendChild(span);               // li 안에 span을 생성한다.
    li.appendChild(button);             // li 안에 버튼을 생성한다.
    todoList.appendChild(li);
}

function handleTodoSubmit(event){
    // submit시 기본 실행되는 event를 막는다
    event.preventDefault();             
    const newTodo = todoInput.value;    // newTodo는 input의 값을 받는다.
    todoInput.value = "";

    const newTodoObj ={
        text: newTodo,
        id: Date.now(),                 // 순서에 맞는 id 부여
    };

    todos.push(newTodoObj);             // todos 배열에 push해준다. 
    paintTodo(newTodoObj);              // 값을 화면에 출력시켜준다.
    saveTodos();                        // 값을 localStorage에 넣어준다.
}


 // submit 이벤트를 듣고 있다. 
todoForm.addEventListener("submit",handleTodoSubmit); 

// "localstorage의 todos key로 값을 가져온다. "
const savedTodos = localStorage.getItem(TODOS_KEY); 

if(savedTodos !== null){
    // string으로 되어있는 것을 JS object로 바꿔준다. 
    const parsedTodo  = JSON.parse(savedTodos);         
    todos = parsedTodo;
    // array의 각각의 값마다 함수를 실행한다. 
    parsedTodo.forEach(paintTodo);               
}

💻실행

할일을 적은 후에 엔터키를 누르게 되면 할일들을 화면에 띄워주게 됩니다. 그 후에 'X'를 누르게 되면 삭제가 된다.

이번에는 Local Storage 입장에서 보자

데이터들을 순차적으로 입력하게 되면 Value와 id 값이 저장된다. 그 이후 'X'키를 눌러서 삭제하게 되면 local Storage에서도 삭제된다.

✨ 배운점 1 : createElement()

Document의 createElement() 메소드를 이용하게 되면 HTML에 삽입가능한 태그들을 만들어 낼수 있다는 것을 배우게 되었다.

    const li = document.createElement("li");            // li 생성
    const span = document.createElement("span");           //span 생성
    const button = document.createElement("button");       // button 생성

이렇게 생성되어진 태그들은 어떻게 HTML에 넣을까?

    li.appendChild(span);               // li 안에 span을 생성한다.
    li.appendChild(button);             // li 안에 버튼을 생성한다.
    todoList.appendChild(li);

위와 같이 appendChild를 이용하여 주어진 태그를 끝에 붙힐 수 있다.

✨ 배운점 2 : JSON.parse(), JSON.stringify()

    const parsedTodo  = JSON.parse(savedTodos); 
    localStorage.setItem(TODOS_KEY,JSON.stringify(todos));

JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.JSON으로 변환할 문자열을 입력받은 후 주어진 JSON 문자열에 대응하는 Object로 반환해줍니다.

✨ 배운점 3 : forEach()

parsedTodo.forEach(paintTodo);

parsedTodo의 각각의 모든 값에 대해 paintTodo 함수를 실행한다.

array의 각각의 값마다 함수를 실행한다.

2. Weather.js

const API_KEY = "07ea8ec2602384af676b3bd1bec9e685";

function onGeoOk(position){
    const lng =position.coords.longitude;
    const lat =position.coords.latitude; 
    const url =`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;
    fetch(url)
    .then(response => response.json())
    .then(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;
    } );
}
function onGeoFailure(){
    alert("Can't find you. No weather for you");
}   

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoFailure);

💻실행

JS의 navigator.geolocation.getCurrentPosition()을 이용하여 현재의 위도와 경도를 얻어낼 수 있습니다.

그 후에 Weather Api를 이용하여 날씨 데이터를 받아올 수 있다.

✨ 배운점 1 : Navigator

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타냅내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다. 이 인터페이스로 사용자의 특정 정보를 알아낼 수 있다는 것입니다. 저는 Navigator.geolocation()을 이용해서 사용자의 위치정보를 얻어올 수 있었습니다.

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoFailure);

onGeoOk 함수는 현재위치를 받아오는데 성공했을경우 실행하게 될 함수이고, onGeoFailure는 현재 위치를 받아오는데 실패하였다면 실행하게되는 함수입니다.

✨ 부족한 점

이 과정 이후에 fetch를 이용하여 Json을 받아온 후 날씨를 실질적으로 출력해주는 과정을 거쳤지만 아직 이해를 완벽하게 하지 못하였으므로 다른 강좌와 독학을 통해 지식을 완성한 후에 업로드하겠다.

동영상 강의에서는 여기에서 멈추었지만 웹페이지 자체가 굉장히 조잡한 형태로 남아있는 상태이다.

위와 같이 많이 허접한 상태로 되어있으므로 CSS부분을 개인적으로 수정한 후에 마지막 벨로그를 작성하겠습니다!

profile
취업어케하죠

0개의 댓글