바닐라JS로 크롬 앱 만들기

강주현·2021년 11월 21일
0
post-thumbnail

바닐라JS로 크롬 앱 만들기

  • Javascript : 웹에 쓰이는 프로그래밍 언어

  • Native 란? : 앱스토어에 있고, 다운로드가 가능하다는 건가?

  • Specification ( 스페씨피케이션 ) 이란? : 체계 매뉴얼 (안내책자) 이나 설명문 같은 것이다.

  • ES5 을 지원했던 것에서 ES6 을 지원한다고 한다는 것은, ES5 라는 버전의 안내문에서 Es6 라는 새로운 안내문을 발행했다고 이해하면 쉽다.

  • 바닐라 자바스크립트

    • 조리가 되지 않은 날 것의 javascript 를 말한다. ( 화장하지 않은 Javascript )
    • 브라우저를 통해 우리에게 제공된 javascipt 라고 보면 된다.
  • 업데이트가 되지 않아 오래된 javascript 버전은 임시방편으로 떼워야 하는 경우가 있다.

변수( Variables )

  • 변경되거나, 변경될수 있는 것.

  • Javasciprt 는 오류를 허용한다는 것이 단점이다. ( 마치 훈육을 하지 않은 부모님처럼. )

  • 모든 표현식은 한 줄에 있어야 한다. 그리고 표현식이 끝나는 곳을 선언하는 방법은 ; ( 세미콜론 ) 을 붙이면 된다.

  1. 변수 생성
  2. 변수 초기화(할당)
  3. 변수 사용
  • 변수에 값을 할당하거나 생성할때에는 변수를 선언하는 키워드를 써야 하지만, 이미 선언한 변수를 재사용할때에는 키워드를 안써도 된다.

변수 생김새

  1. 카멜케이스 : 중간에 스페이스가 필요한 경우, 스페이스 대신에 대문자를 써주고, 그 다음 다른 단어를 쓰는 규칙. ( 항상 소문자로 시작한다. )
  2. 특수문자는 $ 와 _ 제외하고는 아무것도 사용하면 안된다.

let

  • 변수를 초기화할때 사용할수 있는 키워드이다.
  • 초기화할때는 사용이 가능하지만, 이미 let 키워드로 선언한 변수를 또 let 키워드를 사용하여 재선언할수 없다. 재선언이 안되는거고, 재할당(초기화)이 가능한것이다.
  • 다른 값으로 바꿀수 있는 변수를 선언하때 쓰는 키워드이다.

const

  • 변하지 않는 변수인 상수를 변수로 선언할때 쓰는 키워드이다.
  • 상수인 변수에는 값을 재할당 할수 없다.

var

  • var 로 선언한 변수에 할당했던 값을 다른 값으로 바꿀수 있다.

데이터 타입

String

  • 문자열
  • 문자열의 값을 변수에 할당할때는 작은 따옴표 나 큰 따옴표로 해당 값을 감싸야 한다.

Boolean

  • 논리적 참과 거짓을 나타내는 값
  • true 나 false

Number

  • 숫자

데이터 타입 정렬

1. Array

  • 배열 ( 리스트 같은 것 ) 이라는 데이터를 저장하는 자료구조
  • 여러 값을 [ ] ( 대괄호 ) 로 묶는 것이다.
  • 컴퓨터는 사람이 아니라서 0 부터 세기 시작하기 때문에, 배열 안의 값의 순서를 알고 싶으면 인덱스를 사용해야 한다.

2. Object

  • 객체 라는 데이터를 저장하는 자료구조

  • 각 value 에 이름을 줄수 있다.

  • 여러 value 와 값을 { } ( 중괄호 ) 로 묶는 것이다.

  • 객체 안의 값을 동적으로 바꿀수 있다.

함수

  • 어떤 것의 기능

인수

  • 변수같은거
  • 우리가 주는 값을 저장한다.

템플릿 리터럴

  • 문자열로 만들고 싶은 값을 `` ( 백틱 )으로 감싼다.

return

  • 반환값

이벤트

event

  • 매개변수에 event 로 넣으면, 이벤트를 다루는 함수를 만들때마다 자바스크립트는 자동적으로 함수를 event 라는 객체에 저장한다. 그러면 event 라는 객체는 우리가 다룰수가 있게 된다.

ClassList

  • add : 새로운 class 이름을 달아주는 메서드
  • remove : 달린 class 이름을 빼주는 메서드
  • contains : value 가 존재하는지 체크하여 불리언 값을 반환해주는 메서드
const title = document.querySelector('#title');
const clicked_class = 'clicked'


function handleClick() {
    const hasClass = title.classList.contains(clicked_class);
    console.log(hasClass); // title 의 class 이름에 clicked_class 을 포함하는게 있는지 확인. => false

    if(hasClass){
         title.classList.remove(clicked_class)
     } else{
         title.classList.add(clicked_class);
     }
}

function init() {
    title.addEventListener('click', handleClick);
}
init()

==> add 메서드 와 remove 메서드를 쓸바에야 toggle 메서드를 쓰는게 좋다.

  • toggle : 클래스 이름이나 무엇인가를 붙였다 떼줬다(혹은 빼줬다) 해주는 메서드
const title = document.querySelector('#title');
const clicked_class = 'clicked'


function handleClick() {
    title.classList.toggle(clicked_class);
}

function init() {
    title.addEventListener('click', handleClick);
}
init()

로컬스토리지

  • 정보들을 유저 컴퓨터에 저장하는 장소

event - preventDefault

  • 보통 이벤트가 발생하면, 해당 이벤트는, current 타겟에서 발생해서 window까지 이벤트가 올라가는 이벤트 캡쳐링이 일어나고,
    이벤트 타겟까지 전달되는 이벤트 버블링이 일어난다.
    예를들면, form 에서 이벤트가 발생하면, 해당 이벤트는 document(window) 까지 올라가는 이벤트 캡쳐링이 일어나면서 form 안에 있는 input 창 등이
    새로고침이 되는 기본동작을 하게 된다,
    이때 새로고침이 일어나지 않게끔 해주는게 preventDefault 다.
  • 이벤트의 기본동작을 막을때 사용한다.
profile
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자

0개의 댓글