바닐라 JS 클론코딩

soonrok·2021년 5월 13일
0

클론코딩

목록 보기
1/1
post-thumbnail

노마드코더의 '바닐라 JS로 크롬 앱 만들기'강의를 하루만에 완강해보자.
(이미 잘 아는 내용은 기술X)


이론 - 1

환경: 크롬, VSC
만들 것: 모멘텀(브라우저를 처음 열 때 나오는 창)

자바스크립트: 웹에 쓰이는 프로그래밍 언어, 인터렉티브한 웹을 만들기 위한 언어

바닐라 자바스크립트: 자바스크립트의 한 종류로 라이브러리를 사용하지 않는 자바스크립트

라이브러리나 프레임워크는 자바스크립트의 화장(메이크업)같은 존재이다.

var은 변수 선언 키워드(재선언O, 재할당O)
let은 변수 선언 키워드(재선언X, 재할당O)
const는 상수 선언 키워드(재선언X, 재할당X)

ERROR를 읽는 것은 프로그래머에게 중요한 습관

"와 "사이에 들어가는 것은 모두 텍스트로 처리된다. (string타입)
true(1)나 false(0)로 나타내는 것은 boolean타입 (정확히는 0을 제외한 다른 모든 값은 true로 처리)

카멜기법은 변수명의 네이밍에서 여러 단어를 사용할 때 첫 단어는 소문자, 다음 단어의 시작은 대문자로 하는 것을 말한다. (예: daysOfWeek)

Array는 배열이다. 변수명 = [ ]을 통해 사용한다. 0부터 인덱스가 시작된다.

Object는 객체이다.변수명 = { }을 통해 사용한다.
객체는 프로퍼티를 가질 수 있으며, 프로퍼티는 각각 키와 값으로 이루어진다.
객체의 안에 있는 값을 바꾸는 것은 문제가 되지 않는다.
또한 Object를 Array안에 넣을 수 있으며, Object의 프로퍼티 값으로 Array를 넣을 수도 있다.
프로퍼티와 프로퍼티 사이에 구분은 ,으로 한다.

const nicoInfo = {
  name: "Nico",
  age: 33,
  gender: "Male",
  favFood: [
    { name: A, price: B },
    { name: C, price: D },
  ],
}

이론 - 2

함수는 어떤걸 수행하는 한 부분을 나타낸 것이다.

function sayHello() {
  console.log("Function");
}

-> sayHello는 Function이라는 문자열을 콘솔에 출력하는 함수이다.

백틱을 사용하면 문자열안에 표현식(${ })을 넣을 수 있다.

function sayHello() {
  console.log(`Hello ${name}, you are ${age}years lod`);
}

DOM: Document Object Model
HTML문서에 있는 모든 것을 가져와 객체로 만들 수 있으며 조작할 수 있다.

HTML에 있는 DOM요소를 가져오는 법: document.querySelector("선택자");
정확히는 선택자에 해당하는 노드 중 첫 번째 노드를 가져온다.

안에 내용을 수정하는 법: DOM요소.innerHTML = "내용";
스타일을 수정하는 법: DOM요소.style.CSS요소 = "내용";

console.log는 요소를 HTML과 같은 트리 구조로 출력한다.
console.dir은 요소를 JSON과 같은 트리 구조로 출력한다.

window.addEventListener("이벤트명", 함수); 의 뜻은 window객체에 특정 이벤트가 들어오면 지정한 함수가 실행되게끔 리스너를 추가한 것이다.

이때 함수에 event를 인자로 넣어주면 이벤트가 실행될 때 event객체를 받을 수 있다. 이벤트 종류

promt("문구"); 는 사용자에게 값을 받을 수 있는 알림창을 띄운다. (좋지 않은 방법으로 사용 권장X)

해당 DOM요소가 가지고 있는 class들을 가져오는 법: DOM요소.classList;
해당 DOM요소가 어떠한 class를 가지고 있는지 확인하는 법: DOM요소.classList.contains(클래스명);

class를 추가하는 법: DOM요소.classList.add(클래스명);
class를 삭제하는 법: DOM요소.classList.remove(클래스명);
class가 있으면 삭제, 없으면 추가하는 법: DOM요소.classList.toggle(클래스명);


실전

현재 시간을 얻는 법: const date = new Date();
현재 시간이 date에 담기게 되고, date.get~~()을 통해서 원하는 값만 담아 올 수도 있다.
getDay, getDate, getMonth 등...

동일한 작업을 일정 주기마다 반복하는 법: setInterval(함수, 시간);
해당 함수를 지정된 시간마다 반복 호출한다. (1000이 1초)

querySelector는 찾은 최초의 요소를 가져오지만, querySelectorAll은 해당 선택자를 가진 모든 요소를 가져와 Array형태로 반환한다.

localStorage는 개인 컴퓨터의 저장소이다.
localStorage.setItem("키", 값);을 하면 키값으로 값을 저장한다.
localStorage.getItem("키");를 하면 해당 값을 반환한다.
값은 항상 string으로 저장된다.

form형식에서 submit을 하면 자동으로 페이지가 새로고침되는데 이를 막기 위해서는 submit이벤트 객체를 받아서 event.preventDafault();를 해줘야 한다.

text input의 값을 받기 위해서는 해당 요소의 DOM요소.value를 하면 된다.
또한 해당 값을 다른 값으로 set할 수도 있다. DOM요소.value = "내용";

HTML문서에 없는 Element를 만들기 위해서는 document.createElement("태그명");을 사용해서 한다.
해당 요소에 text를 넣고 싶으면 만든요소.innerText = "내용";을 하면 된다.
요소안에 다른 요소나 만든 요소를 자식, 하위로 넣고 싶으면 부모요소.appendChile(자식요소);를 하면 된다.
부모 요소에서 자식요소를 삭제하고 싶으면 부모요소.removeChild(자식요소);를 하면 된다.

JSON.stringify(객체);는 객체를 string형식으로 저장되게 해준다. (localStorage에 저장이 가능하다는 얘기다.)
JSON.parse(string);은 JSON.stringify(객체);통해 string으로 변환된 객체를 다시 객체형태로 돌려준다.

event.target은 event를 실제로 일으킨 요소를 가져올 수 있다.

Array객체.forEach(함수)는 Array객체에 들어있는 모든 element에 대해서 해당 함수를 실행시킨다는 것을 의미한다.
Array객체.fileter(함수)는 Attay객체에 들어있는 모든 element를 검사해서 return 조건이 true인 것들만 모아 새로운 Array객체를 반환한다.

parseInt(string타입변수);를 진행하면 Number타입으로 데이터타입이 바뀐다.

Math.random()은 0에서 1사이의 랜덤한 값을 반환한다.
-> Math.random() * N을 하면 0에서 N까지의 랜덤한 값을 의미

Math.floor()는 내림, Math.ceil()은 올림

위치정보를 가져오는 법: navigator.geolocation.getCurrentPosition(성공시 실행될 함수, 실실패시 실행될 함수);
성공시 실행될 함수에는 position이라는 매개변수가 들어가며 position.coords.속성을 통해 위도나 경도 등 위치정보를 알 수 있다.
위도: position.coords.latitude, 경도: position.coords.longitude

OpenWeatherMap API를 사용해서 현재 위치의 날씨 정보와 도시정보를 가져올 수 있다. OpenWeatherMap

API를 사용해서 정보를 받아오는 법은 fetch('API주소');이며 뒤이어 then등의 명령어를 써서 정보를 가져왔을 때 실행할 함수들을 작성할 수 있다.

fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${위도}&lon=${경도}&appid=${API_KEY}&units=metric`
  ).then(function(respones) {	//정보를 가져오면 가져온 respones를 인자로 받는 함수
    return respones.json();	//repones를 객체로 만들어 반환
  }).then(function(json){	//객체가 반환되면 실행될 함수
    const temp = json.main.temp;
    const name = json.name;
    weather.innerText = `${temp} @${name}`;	//해당 객체에서 각종 정보를 가공해서 사용
  });

마치며...

순수 100% 바닐라 JS로 만든 크롬 앱 서비스

시계, ToDoList, 날씨, 배경사진 기능 구현

profile
I Will be Relaxed Person

0개의 댓글