[Vanila JS] 바닐라 JS로 크롬 앱 만들기

이민정·2021년 4월 26일
0

VanilaJS

목록 보기
1/1

강의 링크 <- 노마드코더

Javascript를 사용하는 이유

  • backend에 사용할 언어는 python, ruby, asp, 하스켈 등 다양하지만, frontend의 경우 javascript가 유일한 프로그램
  • 인터넷이 빨리 발전하는 만큼 javascript도 빠르게 발전 - > 막강+영향력 커짐 ==> developer가 할 수 있는 일이 점점 더 늘어남
  • 웹, 웹앱, 모바일 어플리케이션, native application, 비디오 게임, 데스크톱 앱 등 다양하게 만들 수 있음
  • vscode나 atom은 javascript로 만들어진 데스크톱 앱

ES5, ES6

  • javascript의 version같은 개념
  • ES5 - ECMAScript5 / ES6 - ECMAScript6 -> specification에 대한 업데이트
  • javascript는 중앙집중화 되어있어서 누군가 업데이트하면 모든 브라우져에서 작동하게 됨
  • vanila js는 library가 없는 javascript를 말함

Vanila JS

  • 브라우저를 통해 제공된 javascript
  • 핵심이 되는 기능을 잘 사용할 수 있어야 하기 때문에 vanila javascript를 공부해야함

let, const, var

  • let - 재선언 금지, 재할당 가능
  • const - 재선언 금지, 재할당 금지
  • var - 재선언 가능, 재할당 가능
var a = b;
var a = c; // 재선언, 재할당 가능

let a = b; 
let a = c; // 재선언 불가능
a = c; // 재할당 가능

const a = b;
const a = c; // 재선언 불가능
a = c; // 재할당 불가능

Data Type

  • 변수 선언할 때는 const를 기본으로 사용, let은 필요할 때만
  • 변수 뒤에 올 수 있는 정보
    -> String : text를 의미
    -> Boolean : True / False
    -> Number : 숫자
    -> Float : 소숫점이 붙은 숫자
  • 변수명 지을때 Camel Case 방식
    -> 소문자로 시작하고 단어 덧붙힐 경우 대문자로 시작
    ex> lowerCase

Array , Object

  • 데이터 정렬 방법 -> Array, Object
  • Array = [] 방식, Object = {} 방식
  • Object는 value 값에 이름을 붙힐 수 있음

DOM

  • Document Object Model
  • HTMl의 요소를 가져와 객체로 바꿈

Event & Event Handlers

  • javascript는 event에 반응하기 위해 만들어짐
  • event - 웹사이트에서 발생하는 것 (click, resize, load, before, closing 등)
  • addEventListener 구문
    -> target.addEventListener(type, listerner);
function handleResize(){
	console.log("I have been resized");
}

//resize
window.addEventListener("resize",handleResize); // resize 이벤트가 발생될 때 handleResize 함수 실행

window.addEventListener("resize",handleResize()); // resize 이벤트 발생 여부와 상관없이 새로고침하면 handleResize 함수 실행됨 주의


**< 뒤에 코드 예제 따라하는 부분은 git에 업로드>**


[git](https://github.com/3sally/VanilaJS/tree/master/NomadCoders.ChromeApp)


profile
공부하자~!

0개의 댓글