JavaScript

Fetch 란? 웹 브라우저에서 웹 서버에 HTTP 요청을 할 수 있다. Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. API 요청할 때 사용 사용법 // url는 openweathermap로 작성하였음 fetch(url, options).then((response) => console.log(response)); // 요청이 성공한 경우 Response 객체를 반환함. fetch(url, options).then((response) => console.log(response)) .catch((error) => console.log(error); // catch 구문을 추가하여 예외처리도 할 수 있다. 첫번째 인자로 url, 두번째 인자로 opti..

forEach 란? 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다. 예외를 던지지 않고는 중간에 멈출 수 없다. 따라서 중간에 멈춰야 하는 경우 for문 등 다른 방법을 사용한다. 사용법 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 매개변수 callback : 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받는다. currentValue : 처리할 현재 요소. index(Optional) : 처리할 현재 요소의 인덱스. 0, 1, 2 ... array(Optional) : forEach()를 호출한 배열. 배열 그 자체 thisArg(Optional..

filter 란? 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 함수이다. 모든 요소가 테스트를 통과하지 못했다면 빈 배열을 반환한다. 호출되는 배열을 변화시키지 않는다. 사용법 arr.filter(callback(element[, index[, array]])[, thisArg]) callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. element : 처리할 현재 요소, 아래 코드에서는 32, 25, 29 ... index(Optional) : 처리할 현재 요소의 인덱스. array(Optional) : filter를 호출한 배열. thisArg(Optional) : callback을 실행할 때 this로 사용하는 값..

localStorage 란? HTML 웹 스토리지 API에서 제공하는 객체로 localStorage 외에도 sessionStorage를 제공한다. 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key / value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공한다. key와 value는 항상 문자열이다. 만약 key를 정수 1로 지정하였다면 string "1"로 변경된다. 브라우저가 닫히거나 다시 열리더라도 데이터가 유지된다. 복잡한 작업이 필요하지 않은 개인 프로젝트 시 간단히 사용하기 좋다. 어디서 볼 수 있나요? 크롬 브라우저 기준 F12 눌러서 개발자도구 창 띄우기 Application 클릭 Storage 탭에서 Local Storage 클릭 사용법 // 데이터 저장 localStora..

JSON.stringify 란? 앞서 JSON 이란? 2022.02.04 - [JavaScript] - JSON JSON JSON 이란? JavaScript Object Notation은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다.(서 ex-xe.tistory.com JavaScript 값이나 객체를 JSON 문자열로 변환한다. 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다. Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(..

JSON 이란? JavaScriptObjectNotation은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다.(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). JSON의 구조 // openweathermap api에 요청하고 받은 데이터 값 { "coord": { "lon": 126.9498, "lat": 37.3888 }, "weather": [ { "id": 804, "main": "Clouds", "description": "overcast clouds", "icon": "04d" } ], "base": "stations", "main": { "temp": -1.55,..

querySelector 란? 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 사용법 // HTML // Javascript document.querySelector(selectors); // 매개변수는 하나 이상의 선택자를 포함한 DOMString, 유효한 CSS 선택자여야만 하며 아닐경우 SYNTAX_ERR 예외 발생 // ex1) HTML 내부에서 h2 태그의 id가 clock인 element를 clock 변수에 저장 const clock = document.querySelector("h2#clock"); console.log(clock); // 반환 // ex2) 찾고자하는 element가 없는 경우 const..

Template literals 란? 자바스크립트에서 문자열을 입력하는 방법이다. ES6에서 새로생긴 기능 사용법 기존 사용 방법 const name = "apple"; const text = "My name is " + name + " Nice to me you"; console.log(text); // 결과 : My name is apple nice to me you 문자열 중간에 변수가 있는 경우 변수 앞 뒤로 + 를 입력해야 한다. Template literals 사용 const name = "apple"; // ``(백틱)으로 감싸고 ${...} 안에 변수를 넣어준다. const text = `My name is ${name} nice to me you`; console.log(text); //..