Nomad Coder의 '바닐라 JS로 크롬 앱 만들기' 강의정리

https://academy.nomadcoders.co/courses/enrolled/435558

바닐라 JS로 크롬 앱 만들기

임시저장된 글이 한번 날아갔다...(크롬과 티스토리의 플래시 문제라고 한다..) 그래서 다시 쓰는 강의정리

 

• 자바스크립트는 모든 브라우저에 이미 설치 되어있으며 어디서든 쓸 수 있는 언어이다.
• 프론트엔드 개발자는 자바스크립트만이 개발할 수 있는 도구이다.
• 우리가 배울 바닐라 자바스크립트는 자바스크립트 중에 화장을 하지 않은(즉 프레임워크나 라이브러리가 없는) 자바스크립트이다. 이걸 배우는 이유는 첫 자바스크립트를 근본이 있는 것을 알아야 나중에 어떤 자바스크립트를 가도 사용할 수 있기 때문이다.

 

• 우리가 만들 프로그램의 목표는 chrome앱의 momentum이다.

https://momentumdash.com/

Momentum Dashboard

위의 앱은 자기할일 저장, 현재 시간확인, 날씨 받아오기 등을 할 수 있지만 자바스크립트는 그외에도 많은 것을 할 수 있다. 우리가 좋아하는 게임을 만든다던지 우리가 상상하는 그 이상을 만들 수 있다.

 

자바스크립트는 중앙제어프로그램이다. 누군가 자바스크립트를 업데이트한다면 모든 브라우져가 그것을 업데이트한다. 자바스크립트는 specification이다. 체계메뉴얼이다. 크룸, 익스플로어, 파이어폭스는 이런 메뉴얼을 보고 자기들의 방식으로 해결하는 것이다. ES5, ES6는 이런 자바스크립트의 버전이다.

 

바닐라자바스크립트는 핵심이다.

 

JS파일은 body아래에 존재해야하며 모두 완성된 상태에서 마지막에 추가해주어야한다.

 

자바스크립트는 문법을 많이 지키지 않아도 많은 것을 도와준다. 하지만 이런 도움은 크게 좋은 방법이 아님

	문법	설명
변수 선언	let, var(3년전에는 var만 사용가능했음)
고정변수 선언	const
주석	//, /**/
함수사용	function function_name(arg1,arg2){}
변수와 스트링사용(``==백틱)	`스트링 ${변수이름} 스트링`	옛날에는 "스트링"+변수이름+"스트링" 이렇게 사용해왔음
if/else	prompt(유저의 내용을 물어볼수 있음) 하지만 오래된 내용이라 사용하지않음
같음을 의미하는것	===(==이 아니다)
클래스	.클래스이름{}
인터벌설정	setInterval(실행할함수,시간)
브라우저에 저장	로컬스토리지 사용

변수는 일단은 const로 선언한 상태로 하고 나중에 사용할 때가 되면 let으로 바꾸기

변수에는 여러가지 데이터형이 들어갈 수 있다(스트링, boolean, float)

객체, 배열 내가 배운 것들을 그대로 사용할 수 있다.

 

console이라는 객체안에 log라는 키가 있는 것이다. log는 함수다.

 

css파일에서도 html의 내용을 불러서 수정할 수 있다.

자바스크립트에서 html의 내용을 객체로 만들 수 있고 그것을 변경할 수 있다.

ex)

const title=document.getElementById("title");

title.innerHTML="Hi From JS";//이렇게 변경할 수 있음

 

DOM=Document Object Module

 

Event란 웹사이트에서 일어나는 모든 것

 

자바스크립트는 자바스크립트 파일에서 html은 html에서 활용하고 싶다.

 

로컬저장소는 자바스크립트의 객체를 저장하지 못한다.

 

>이후의 momentum을 만드는 강의 실습은 깃허브에 올려 놓았습니다.

https://github.com/Burugi/Momemtum_application_clone

Burugi/Momemtum_application_clone