🔥 부트캠프-웹 개발 🔥/JavaScript_advanced

localStorage 기초 localStorage 형식변환 localStorage 예제 1) localStorage 기초 localStorage.setItem('key', 'value') localStorage.getItem('key') localStorage.removeItem('key') localStorage.clear() 전체 제거 localStorage.key( index ) localStorage.length localStorage는 문자값으로 처리되며 { key : value } 형식으로 저장된다. 위 코드처럼 단순 값만 출력하게 되면 새로고침 시 내용이 모두 사라지게 된다. 하지만 localStorage를 사용하게 되면 local에 저장되기 때문에 마지막으로 입력한 값이 나오도록 해 보았..

module 사용법 import default module 합치기 module 예제 1) module 사용법 module을 사용하면 script를 여러 파일로 분리한 후 사용할 수 있다. array, function, class 등을 하나의 파일로 분리해 필요할 때 불러와 사용한다. 확장성, 유지/보수, 디버깅에 용이하다는 장점이 있다. export function make1(msg){ console.log(msg, 'make1'); } export function make2(msg){ console.log(msg, 'make2'); } export function make3(msg){ console.log(msg, 'make3'); } javascript 파일을 따로 만든다. html의 script에 ..

jsonplaceholder news pixabay 1) jsonplaceholder jsonplaceholder post api를 이용해 게시판을 만들어 보았다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com await와 fetch를 사용해 비동기통신을 하고, 총 페이지와 페이지당 표시될 post 숫자..

async / await fetch axios insertAdjacentHTML 데이터 출력 예제 1) async / await const test = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('1번 실행'); resolve(); }, 2000); }); }; const test1 = () => console.log('2번 실행'); console.log('시작'); const make = async () => { await test(); test1(); } make(); 시작 1번 실행 2번 실행 async은 Promise 기반이라고 생각하면 된다. await는 async가 처리 될 때 까지 기다린 ..

static private try / catch 1) static class Human { name kor eng constructor({ name, kor, eng }) { this.name = name this.kor = kor this.eng = eng } static sum(...obj) { return obj.reduce((acc, curr) => acc + (curr.kor + curr.eng), 0) } } const arr = [ new Human({ name: '김', kor: 80, eng: 90 }), new Human({ name: '이', kor: 100, eng: 50 }) ] console.log(Human.sum(arr[0], arr[1])); 320 static은 정적 메소..

1) class 연습 예제 #1 test class를 사용해서 html내용도 채워 넣었다. state 상태변호를 사용해 on / off 일 때 다른 값이 출력되도록 했다. 2) class 연습 예제 #2 const get = (target) => { return document.querySelector(target) } const getAll = (target) => { return document.querySelectorAll(target) } const $slides = getAll('.slide') const $next = get('.next') const $prev = get('.prev') class Banner { interval = 1000 timer = null auto = true con..

extends instanceof overriding 메서드 추가 / 재정의 overloading getter / setter class 예제 1) extends // 상속 class Animal { constructor(name, color){ this.name = name; this.color = color; } getInfo(){ return `${this.name}는 ${this.color}입니다` } } // sub class class Friend extends Animal{ constructor(name, color){ super(name, color); } } const dog = new Friend('강아지', '갈색'); const cat = new Friend('고양이', '흰색');..

JSON 구조분해 생성자 함수 class 1) JSON JSON.stringify() 웹페이지에서 서버로 보낼 때 문자열 변환해서 보냄 JSON.parse() 서버에서 문자열로 받은 데이터를 Object 형식으로 변환 let data = [ { "firstName" : "길동", "lastName" : "홍", "age" : 40 }, { "firstName" : "동길", "lastName" : "민", "age" : 20 }, { "firstName" : "윤길", "lastName" : "박", "age" : 50 } ] let result = ""; result = JSON.stringify(data, null, 4); console.log(result); console.log(data); let..

object 전개연산자 map arguments rest 배열 접근 키 생성 / 추출 Object 메서드 freeze defineProperty / seal arrCopy / assign 1) object 기본 객체 복습 const obj = { // key:value, key:value 나열 // 숫자, boolen, null, undefined는 따옴표 작성하지 않음 no : 1001, grade : 1, name : '홍길동', tel : '010-1111-4444' } // 기본 출력 객체.속성(객체.키) // react 출력 객체['속성'](객체['키']) console.group('기본 출력'); console.log('학번 : ' + obj.no); console.log('학년 : ' + o..