🟨 JavaScript/개념

[제로초] Promise와 동기/비동기 관련 짤막 키워드정리

https://sunshineyellow.tistory.com/64 위는 같이 볼만한 드림코딩 콜백지옥 탈출 Promise 기초 게시글. 제로초 인간JS엔진 보다가 추가적인 키워드 문장 정리가 필요해 작성한다. Promise란? 실행은 됐는데!!! 결과값을 나중에 쓸 수 있다. "실행은 됐는데"가 중요. 그래서 new Promise 안의 익명함수는 동기적으로 실행이 된다. 동기비동기 실행순서 관련해서 아래 코드가 중요하다. 기억해 놓자. let a = 2; const p = new Promise((resolve, reject) => { console.log('실행1'); setTimeout(() => { a = 5; console.log('실행3', a); resolve(a); }, 0); }); // ..

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다. F12 개발자 도구에서 Application(애플리케이션) > Storage(저장용량) 카테고리를 보자. 1. Local Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 재접속해도 유지된다. 2. Session Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 나가면 삭제된다. 3. IndexedDB 구조화된 대용량데이터를 저장한다. 3. Cookies 유저의 인증정보(로그인정보 등)를 저장한다. 4. Cache..

[코딩애플] ajax로 서버와 데이터 주고받기 (1)

서버에 요청하는 법 어떤 데이터인지 url을 제대로 작성한다 (틀린 url로 요청시 404error가 뜬다) 어떤 방법으로 요청할지 결정한다 (GET/POST .. PUT, DELETE 등) GET GET 요청은 서버에 있던 데이터를 읽고 싶을 때 주로 사용한다. 브라우저 주소창에 url을 적으면 그곳으로 GET 요청을 날린다. POST POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. POST 요청을 날리고 싶으면 form 태그 + method="post" + action="url"을 이용하면 된다. GET과 POST는 요청하면 브라우저가 새로고침된다. AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능이다. (ex. 댓글을 서..

[mdn, 코딩애플 등] for, forEach, for in

for 일반적으로 지정된 횟수만큼 반복할 때 사용한다. 예를 들어 배열의 인덱스를 기반으로 반복을 수행해야하는 경우에 사용할 수 있다. forEach forEach문은 배열을 순회할 때 사용한다. forEach문은 배열의 각 요소에 대해 함수를 실행한다. forEach문은 첫번째 파라미터인 element를 기준으로 index를 받아오기 때문에 index로 array에 접근하는 것은 비효율적이다. 또한 break, continue 등의 제어문을 사용할 수 없다. 화살표함수 버전/일반버전 화살표함수를 쓰면 함수 내의 this값을 바깥에서 가져와 쓰기 때문에 주의. const array = ['a', 'b', 'c']; array.forEach(element => console.log(element)); co..

[코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)

1. document.createElement() / appendChild() / clondeNode() / importNode() document.createElement() : html 자료를 생성한다. element.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. (한 노드는 문서상의 두 지점에 동시에 존재할 수 없으므로, 노드가 이미 부모가 있다면 삭제되고 새로운 위치로 이동한다.) * append()와의 차이점 : append는 jquery에서 지원하는 메소드로, 원시 자바스크립트인 appendChild()와 다르다. 또한 append는 .append(`내용`) 처럼 요소를 바로 때려박을 수 있는 반면, appendChild()는 creat..

[코딩애플] 자료형 : Array, Object (특징과 차이점)

https://sunshineyellow.tistory.com/38 이거에 이어서.. Array 자료형 let car = ['소나타', 50000, 'white']; 순서개념이 있다. -> 숫자영어가나다순 정렬(sort)/x번자료부터 x번자료까지 자르기(slice)/x번자료 바꾸기/맨 뒤, 맨 앞에 자료 넣기/원하는 자료 검색하는 등 다양한 기능 활용이 가능하다. Object 자료형 let car2 = { name : '소나타', price : 50000 }; 제목(key)가 들어간다. 순서개념이 없다. (앞에 썼다고 맨처음 데이터가 되는 게 아님) -> key만 기억하면 자료 뽑을 때 array보다 쉽다. object에서 자료 뽑는 법 두가지 console.log(car2['name']); //소나타 ..