바닐라 JS로 크롬 앱 만들기 - API, ToDoList
Language/JavaScript2022. 2. 4. 19:41바닐라 JS로 크롬 앱 만들기 - API, ToDoList

Weather API [여기] 로그인을 하여 current weather API 사용을 위해, API key 발급 사용을 위해서는 왠만한 API의 경우에는 해당 사이트에 정리가 잘 되어 있다. Fetch : Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것 간단하게 API를 사용하기 위해서 정보를 받아오는 역할이다. (물론 post 역할도 있지만, 지금 당장에는 get) fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환, 보..

바닐라 JS로 크롬 앱 만들기 - LOGIN
Language/JavaScript2022. 2. 3. 16:35바닐라 JS로 크롬 앱 만들기 - LOGIN

알아두어야 하는 것 querySelector preventDefault classList addEventListener localStorage querySelector 문서 내에서 일치하는 querySelector() 첫 번째 항목을 반환 "#idName" : id 가 idName과 일치하는 ".className" : class가 className과 일치하는 "input" : input과 일치하는 preventDefault [여기] 이벤트가 명시적으로 처리되지 않으면 기본 작업이 정상적으로 수행되지 않아야 한다고 사용자에 알려줌 classList 클래스를 조작하는데 사용, add() remove() replace() 그리고 toggle() 메서드가 있다. addEventListener [여기] Event..

Language/JavaScript2021. 10. 11. 14:56[JavaScript] 내장 객체 & 데이터 타입

자바스크립트의 내장 객체 Object Function Array String Boolean Number Math Date RegExp 배열의 확장 1 2 3 4 5 6 Array.prototype.rand = function(){ var index = Math.floor(this.length*Math.random()); return this[index]; } var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba'); console.log(arr.rand()); Colored by Color Scripter cs Object 아무것도 상속받지 않는 순수한 객체 확장이 가능하나 모든 객체에 영향을 미치기 때문에 바람직하지 않다. Object ..

Language/JavaScript2021. 10. 10. 13:07[JavaScript] 상속

상속 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능 아래와 같은 코드가 있으면, 1 2 3 4 5 6 7 8 function Person(name){ this.name = name; this.introduce = function(){ return 'My name is '+this.name; } } var p1 = new Person('egoing'); document.write(p1.introduce()+" "); cs prototype을 통해서 상속을 할 수 있다. 1 2 3 4 5 6 7 8 9 function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototype.introduce = funct..

Language/JavaScript2021. 10. 9. 20:04[JavaScript] 객체지향, new 그리고 this

Java와 비슷한 거 같으나 전혀 다른 객체지향을 추구 서로 연관되어 있는 변수와 메소드를 객체에 담아낸다. var person = {} // {} 는 object == 객체 (비어있는 상자)) peeson.name = 'egoing'; // name 이라는 property (속성)를 객체에 담고 그 내용은 'egoing' person.introduce =fuction() { // property에 담겨있는 게 함수라면, 메소드 return 'My name is '+this.name; } document.write(person.introduce()); 위와 같은 객체는 아래 코드처럼 사용이 가능하다. 1 2 3 4 5 6 7 var person = { 'name' : 'egoing', 'introduce..

Language/JavaScript2021. 10. 9. 19:13[JavaScript] arguments, apply

arguments 변수에 담긴 숨겨진 유사 배열 1 2 3 4 5 6 7 8 9 function sum(){ var i, _sum = 0; for(i = 0; i

Language/JavaScript2021. 10. 8. 13:35[JavaScript] 함수

JavaScript에서는 함수도 객체, 일종의 값 함수는 객체의 속성 값으로 담겨진 함수를 메소드 1 2 3 4 5 6 7 8 9 10 var process = [ function(input){ return input + 10;}, function(input){ return input * input;}, function(input){ return input / 2;} ]; var input = 1; for(var i = 0; i

Language/JavaScript2021. 10. 7. 09:56[JavaScript] 정규표현식

컴파일 검출하고자 하는 패턴 만드는 일, 아래와 같이 정규표현식 객체를 만드는 일은 2가지가 있다. 정규표현식 리터럴 var pattern = /a/; 정규표현식 객체 생성자 var pattern = new RegExp('a'); 정규표현식 메소드 실행 RegExp.exec() console.log(pattern.exec('abcdef')); //TRUE console.log(pattern.exec('abcdef')); //FALSE Sting과 정규표현식 String.match() RegExp.exec()와 비슷하다. var pattern = /a/; var str = 'abcde'; str.match(pattern); // ["a"] 출력 'bcdef'.match(pattern); // null 출력..

image