Study/Log

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Weather & 마무리

시작에 앞서서 사담을 좀 하자면...... 31일 이후에 이제서야 마지막 포스팅을 하게 된 이유. 그동안 취업을 위해 면접을 보러 다니고 이런저런 준비가 필요해서 포스팅을 쉬었었다. 그러다 보니 어느덧 벌써 6월 중순...! 5월 내로 끝내는 게 목표였는데, 미루고 미루다 이렇게 되어버렸다. ㅜㅜ 그래도 늦었다고 생각할 때가 가장 빠른 법! 다시 달려 보자! Weather Momentum에 내장되어 있는 날씨 기능을 구현해 보는 파트이다. GPS를 이용하여 유저가 현재 시스템을 사용하고 있는 지역의 날씨를 알아내고 보여 줄 것이다. #1. Geolocation 이 파트에서 우리가 사용할 것은 geolocation이다. 위치라는 의미를 담고 있는데, getCurrentPosition() 메서드를 사용하여 ..

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #To Do List

To Do List Momentum에 내장되어 있는 To Do List 기능을 구현해 보는 파트이다. #1. Setup 먼저 준비해야 할 것? 앞에서 수도 없이 많이 했다. To do list를 입력할 form 요소 안에 input 요소를 넣어주고, todo.js라는 이름의 js 파일을 import 해 준다. 그리고 입력한 To do list를 보기 위해서는? 목록 태그가 필요하다. ul 태그와 li 태그를 이용할 것이다. 대신, ul 내에 입력될 li 태그는 JavaScript를 통하여 구현할 것이기 때문에 ul 태그 안은 비워 두도록 한다. 00:00:00 HTML에서의 모든 설정이 끝났다면 todo.js로 가서 form과 ul 요소를 const로 선언하여 가져온 후, 함수를 만든다. 여기서 사용하는..

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Quotes And Background

Quotes Momentum을 봤을 때, 맨 하단에 새로고침을 할 때마다 랜덤으로 다른 명언들이 뜨는 것을 확인할 수 있다. 이번 파트는 그 부분을 구현해 보는 단계이다. 미리 조사한 명언들을 모아 Array를 만든다. 이 명언들은 영어여도 좋고, 한국어여도 좋다. 나는 그냥... 있어 보이려고 영어로 모아놨다. 여기서 주의할 점! 콤마(,)를 잊고 배열을 작성하면 안 된다. 가장 기초적이며 많은 실수이기도 하다. 이 점을 주의하며 아래 코드처럼 quotes.js 파일을 작성해 준다. 명언들은 이곳에서 가져왔다. const quotes = [ { quote: "You can't change what you are, only what you do.", author: "Philip Pullman" }, { ..

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Clock

Clock #1. Interval Interval이란? '매번' 일어나야 하는 무언가를 말한다. 예를 들어 매 2초마다 어떠한 일을 발생하게 하고 싶다면, 그때 Interval를 사용하면 되는 것이다. JavaScript에서는 이 기능을 기본적으로 보유하고 있다. Interval를 사용하고 싶다면 setInterval(function, ms)을 사용하면 된다. 첫 번째 argument는 호출할 함수의 이름을 넣어 주면 되고, 두 번째 argument는 호출되는 함수의 간격을 몇 ms로 할 지 넣어 주면 된다. clock.js 라는 이름의 JS 파일을 만들어 아래와 같이 코드를 작성하였다. sayHello라는 이름의 함수로 console에 Hello가 찍히도록 구현하였다. 그리고 지금 우리에게 가장 중요한..

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Momentum 소개 및 Login

노마드 코더에서 무료로 제공하고 있는 강의 중 하나인 '바닐라 JS로 크롬 앱 만들기'의 학습을 시작했다. 시작하게 된 계기? 최근에 '덕후가 코딩을 하게 되면 벌어지는 일' 이라는 글을 커뮤니티에서 하나 보게 되었는데 NCT 팬이 크롬의 모멘텀이라는 확장 앱을 클론하여 본인의 가수들이 크롬 배경화면에 뜨도록 만든 것이었다. 코린이들의 첫 걸음이라고도 하고, 그래도 나름 JavaScript를 알기도 하고! 흥미가 생겨 찾아보니 친절하신 니콜라스 스승님께서 무료 강의를 제공하고 있던 것! 그래서 바로 신청하여 시작하게 되었다. Chrome Momentum 위 사진과 같이 크롬 브라우저 창을 열게 되면 나타나게 되는 배경 화면? 이라고 할 수 있으려나. 보통 크롬 브라우저를 열면 심플하게 구글 로고와 검색할..