filter - 콜백함수에 지정된 조건에 맞는 요소를 새롭게 반환한다. 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array)이다. 예제를 보겠습니다. let data = [ {name:'obm', age:28}, {name:'dcy', age:25}, {name:'kch', age:23}, {name:'khm', age:16}, {name:'hjw', age:13}, ] // age가 20 미만인 원소 추출(필터링) let result = data.filter(x => { return x.age < 20 }); console.log(result); - 콜백함수 3개 인자 x, idx, array를 잘 확인하세요. let data = [ {name:'obm', age:28..

프로젝트 개발시 화면 이동시에 데이터를 영구저장이 필요할 때가 있습니다. 이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다. localstorage란? ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작. ・모바일에서도 사용 가능 쿠키와 차이점 ・유효 기간이 없고 영구적으로 이용 가능 ・5MB까지 사용 가능 (쿠키는 4KB까지) ・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신) localstorage 기본 구성 ・키(key)와 값(value)을 하나의 세트로 저장. ・도메인과 브라우저별로 저장. ・..

api를 호출하기 위해 axios 라이브러리 설치 axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. REST API 를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 메서드들은 다음 의미를 가지고 있습니다. GET: 데이터 조회 POST: 데이터 등록 PUT: 데이터 수정 DELETE: 데이터 제거 참고로 이 메서드 외에도 PATCH, HEAD 와 같은 메서드들도 있습니다. 사용법 import axios from 'axios'; axios.get('/users/1'); get 이 위치한 자리에는 메서드 이름을 소문자로 넣습니다. 예를 들어서 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용하면 됩니다. 그리..

1. 이벤트 추가하기 - addEventListener() 2. 이벤트 제거하기 - removeEventListener() 이벤트 추가하기 - addEventListner() 객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다. element.addEventListener(type, eventListener); addEventListener()는 2개의 파라미터를 입력받습니다. - type : 이벤트 타입 - eventListener : 이벤트가 발생했을 때 실행할 함수 import React from 'react'; const App = () => { window.addEventListener('click', async () => { const eventBtn = docum..

ES5에서 this의 움직임 function test(){ return { rs : 25, bar : function(){ console.log(this.rs); } } } test.call({rs:100}).bar(); // 25 ES5 function 안의 this는 자신을 가장 마지막으로 품고 있는 scope로 항상 변한다. Arrow Function에서의 this의 움직임 function test(){ return { rs : 25, bar : () => { console.log(this.rs); } } } test.call({rs:100}).bar(); // 100 arrow Function은, 처음 바인딩 된 스코프 안에서 가리키는 this가 절대 변하지 않는다. 차이점 1. 화살표 함수와 기..