[Nomad coders - 바닐라 JS로 크롬 앱 만들기] 바닐라 JS 문법 정리

임유정·2023년 5월 14일
강의노마드코더바닐라js자바스크립트
0

Javascript

목록 보기
1/1
post-thumbnail

예전에 들었던 자바스크립트 강의 노마드 코더의 "바닐라 JS로 크롬 앱 만들기"에서 언급하는 JS 문법을 정리했습니다.
알았던걸 한 번더 정리해주기도 했고, 새롭게 배운 내용도 있었던 강의였습니다.

몰랐던 것 ..

요소 탐색
DOM 탐색은 가장 기초 중에 기초인데 난 jQuery에 의존했다. 하지만 document.getElementById, document.getElementsByClassName, document.querySelector, document.querySelectorAll 등을 사용하는 방법은 알고 있었다.

하지만 요소를 찾고 그 요소의 하위 요소를 또 찾을 때 어떻게 해야 하는지 몰랐다.

보통 jQuery로 $(".parent-element").find(".children-element"); 이런식으로 자식 요소를 찾았는데, Element.querySelector()가 되는지 처음 알았다.

var, let, const

var 키워드의 문제점은 크게 세 가지가 존재한다.

  • 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
  • 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
  • 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

ES6에서 나온 let과 const 키워드는 위의 세 가지 문제점을 해결했다.

1. 변수 중복 선언 불가

(1) let
let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.

let name = 'lyj'
console.log(name) // output: lyj

let name = 'lyj' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'lyj'
console.log(name) // output: howdy

(2) const
const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'lyj'

const도 let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가하다. 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하다. const 키워드는 재할당을 금지할 뿐, '불변'을 의미하지 않는다.

// 원시값의 재할당
const name = 'lyj'
name = 'jjung' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'lyj',
}
name.eng = 'jjung'

console.log(name) // output: { eng: "jjung" }

2. 변수 호이스팅

(1) let
let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'lyj'

따라서 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재한다.

(2) const

const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'lyj'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 떴다. 하지만 const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 진행되지 않은 상태이기 때문에 Cannot access 'name' before initialization 에러 문구가 뜬다.

정리

let 재선언 금지, 재할당 가능
const 재선언 금지, 재할당 금지
var 재선언 가능, 재할당 가능

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

Booleans

  • 0 off false

  • 1 on true

  • undefined=값이 정의되지 않음
    => undefined: let something; 처럼 변수에 값을 지정하지 않으면 메모리 상에 자리는 존재하지만 값이 채워지지 않은 채로 있다.

  • null=값이 없음
    => null: 컴퓨터에 값이 없음을 의도적으로 알리기 위해 채워진 값이다

Arrays

데이터를 나열하기 위한 방법 중 하나.
항상 [ ] 안에 콤마(,)로 데이터들을 나열한다. 변수도 쓰일 수 있고, boolean, text, 숫자 등 데이터 정렬이 가능하다.
ex) const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

만약, 위의 변수에서 5번째 element 값을 알려주세요. 라고 한다면 어떻게 출력해야 할까?
ex) console.log(daysOfWeek[4]) 라고 해야 5번째 값을 출력할 수 있다.

왜?? 컴퓨터는 숫자를 0부터 세기 때문에, “mon”은 0번째라고 생각하면 된다.
JS의 주석처리는 //

위의 상태에서 daysOfWeek이란 변수에 하나의 값을 더 넣고 싶다면 다음과 같이한다.
ex) daysOfWeek.push(“holiday”) .push는 추가하는 기능.

Objects

object는 property를 가진 데이터를 저장해주며, { } 를 사용한다.

const player = {
name : tomato,
color : red,
food : true,
};

console.log(player);

property를 불러오는 방법은 2가지가 있다.

  1. console.log(player.name); => tomato
  2. console.log(player["name"]); => tomato

또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다.
ex)
const player = {
name : tomato,
color : red,
food : true,
};

console.log(player);
player.color = "blue";
console.log(player.color);
--> blue

그리고 property를 추가 할 수도 있다.

player.koreanName = "토마토";

--> {name: "tomato", color: "blue", food: true, koreaName: "토마토"}

Fucnctions

argument : function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법

function은 계속 반복해서 사용할 수 있는 코드 조각이다.

function sayHello( ){
	console.log("Hello!");
};

소괄호 안에 작성하는 것은 실행버튼을 누를 때마다 발생한다.

sayHello( ); 이렇게 쳐서 실행할 수 있다.

argument(인수)는 function을 실행하는 도안 정보를 function에게 보낼 수 있는 방법으로, 소괄호 안에 위치한다.

함수의 구성 요소를 살펴보면

funtion plus(x, y){
	console.log(x + y)
}

위 함수에서 plus는 함수명, 그 옆의 소괄호 안의 x,y는 parameter(매개변수 또는 인자)이다.
함수를 호출해보면
plus(2,4) //6 >여기서 소괄호 안의 2와 4는 argument(인수)이다. 인수란 함수를 호출할 때 사용되는 값 이다.

객체 안에 함수를 정의 할 때는 functionName : function(){}의 형태

const player = {
  name: "nico",
  sayHello: function(otherPersonsName) {
  console.log("Hello " + otherPersonsName + " nice to meet you!");
}
};

호출 하면 player.sayHello("lynn");// Hello lynn nice to meet you!

Return

function안에서 return과 추가작업을 입력하면
return만 작업하고 추가 수행은 이뤄지지 않는다.
만약 return 앞에 기타작업이 있다면 이 작업은 수행된다.
즉, return"까지만" 수행된다!

The Document Object

Javascript와 HTML은 연결되어있다.
Javascript에서 HTML 을 불러 올 수도 있고, Javascript에서 수정도 가능하다

모든 것들은 document에서 시작된다.

Html in JS

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()

이렇게 자바스크립트를 통해 HTML을 가져올 수 있는 것이 크게 세가지 있음
이중에서 querySelector를 가장 많이 쓸 것임

getElementById() : 말 그대로 id , 하나의 값을 반환해줄때 쓴다
getElementsByClassName() : 클래스 네임을 가져옴, array에 할당
getElementsByTagName(): name할당 가능 array에 할당

하지만 가장 많이 쓸 것은

querySelector! 왜 ? css 셀렉터처럼 사용할 수 있기때문에
매우 간편하고 유용함
게다가 class, id전부 사용가능함 class id를 앞에 쓰고
거기에 해당하는 태그들을 쓰면 해당 클래스/id 특정 태그들만 가져오기 가능

but 만약에 동일한 class가 있다면 전부다 가져오는게 아니라
첫번째 element만 return함

동일한 조건에 있는 것들을 싹다 선택해서 가져오고 싶다면
querySelectorAll를 쓰면 됨
말 그대로 해당되는 것 전부다 가져옴 (물론 array 형태로)

Event

  • document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌
  • element의 내부를 보고 싶으면 console.dir()
    기본적으로 object로 표시한 element를 보여줌(전부 js object임)
    그 element 중 앞에 on이 붙은 것들은 event임
  • event: 어떤 행위를 하는 것
    모든 event는 js가 listen할 수 있음
  • eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
  • title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함
const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);

//click하면 handleTitleClick이라는 function이 동작하길 원함
//그래서 handle~ 함수에 () 를 안넣은 것임
//즉, js가 대신 실행시켜주길 바라는 것임!

listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색.
우리는 javascript의 element를 원하니, 링크에 Web APIs라는 문장이 포함된 페이지를 찾아. 왜냐면 이건 JS관점의 HTML Heading Element란 의미
너무 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨.

function handleMouseEnter() {
title.innerText = "Mouse is here!"
}
function handleMouseLeave() {
title.innerText = "Mouse is gone!"
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

하지만 대부분의 경우에는 style은 CSS를 통해 변경되어야함.

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야함.
ex) document.querySelector(“h1”);

window는 기본제공

function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

toggle

classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.
className은 이전calss를 상관하지않고 모든걸 교체해 버린다.

classList를 이용하는건
js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻

contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다

toggle은 토큰이 존재하면 토큰제거
토큰존재 하지않으면 토큰 추가

ex)
toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가

const h1 = document.querySelector(".appTitle");

function handleTitleClick() {
  h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick);

.preventDefault()


function onLoginSubmit(event){
  event.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
  // event object는 preventDefault함수를 기본적으로 갖
  고 있음

  console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);
// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미
// JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들

★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

Intervals

const clock = document.querySelector("#clock");

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


setInterval(sayHello, 5000);

setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.

//5000ms = 5초 -> 5초마다 hello 출력

setTimeout

const clock = document.querySelector("#clock");

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

setTimeout(sayHello, 5000);

setTimeout -> 1초 기다렸다가 한번만 실행.

정리

->setInterval(sayHello, 1000);
sayHello() 라는 펑션을 1초마다 반복한다는 의미.
단 바로 실행되지 않고 1초 후 첫 시작이 되고 계속 1초마다 반복된다.

->setTimeout(sayHello, 1000);
1초 기다렸다가 한번만 실행.

오늘 날짜와 시간가져오기

const clock = document.querySelector("#clock");

function getClock() {
  const date = new Date();
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

setInterval(getClock, 1000);

profile
임유정
console.log(youjung(🌼 , 🍣)); // true

0개의 댓글