1.Reduce() , Array.prototype.reduce(callback[, initialValue])Reduce 함수란?reduce는 사전적으로 줄이다라는 뜻을 가지고 있다, 사저적 의미 그대로, 리듀스 함수는 배열의 요소를 순차적으로 순회하며 숫자든 배열이든 객체든 하나의 값우로 줄여 return하는 함수이다. 즉, 배열을 기반으로 하나의 값을 도출할 때 사용된다. reduce 함수 기본 문법arr.reduce(callback(accumulator, currentValue, index, array), initialValue);// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값); reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callba..

1. PromiseES6에서 비동기 처리하기 위한 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 2. 비동기 처리를 위한 콜백 패턴의 단점const get = (url) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { return JSON.parse(xhr.response); } console.log(`${xhr.status}`); };};const response = get("https://json~~"..

var arr = [10, 20, 30];var arr2 = [100, 400, 900];1. forfor 반복문으로 위 arr2를 출력하는 것인데, arr의 제곱을 출력하는 것이다.여기서 전체적으로 var를 사용할 것인데, 그 이유는 전첵적으로 같은 변수가 많기 때문에 사용 한 것이다.var arr2 = [];for (let i = 0; i  2. for of ( ES 6 )for of는 ES6에 나온 문법으로, arr라는 배열을 순회하면서 item에 요소를 할당해주는 것이다. 그래서 arr2라는 빈 배열을 만들고, push를 통해 arr2 배열에 item * item 한 값을 넣어주는 것이다.var arr2 = [];for (let item of arr) { arr2.push(item * item)..

1. 값을 바꾸면 자동 재 렌더링function Counter() { // let count = 0; // 여기 변수는 마음대로 작성이 가능하다. 하지만 그 기능에 맞게 작성하는 것이 좋다. const [count, setCount] = Index.useState(10); // const로 바꿔야 하고, 값만 바꾸는 것이 아닌 메서드 통해 변경을 해야한다. const handleDown = () => { setCount(count - 1); }; const handleUp = () => { setCount(count + 1); }; const handleReset = event => { ..

현재 실습은 Counter 라고, +를 누르면 +1가 되고, -를 -1이 되며 0을 누르면 0으로 초기화 되는 간단한 실습이다.1. HTML + JS이는 HTML 과 JS를 통해 구현한 방법이다. 아마 내가 자바스크립트를 어떤 것을 만든다면 이렇게 구성을 했을 것이다. Counter - HTML + JS 파일 경로: - 0 + 0  이렇게 body 부분은 이러한 형식으로 구현을 했을 것이다. 각 버튼에 이벤트를 걸고, 그것에 맞춰서 함수를 만들어 구현 했다.아래는 자바스크립트 부분이다. 중간에 filepath의 경우는 파일 경로를 동적으로 출력해주는 것이다. 이제 화면 갱신하는 부븐에서는 id가 counter인 요소..

이번 리액트 수업하기 전, 간단하게 자바스크립트로 Todo List를 실습해보는 것이다.나는 사실 자바스크립트로는 로그인, 회원가입을 제외한 기능을 구현해본 적이 없다. 즉 게시물이라던지 화면에서 삭제하고, 그런걸 제대로 해본 적이 없다. 그래서 이번 실습을 할 때, 코드는 이해가 되었으나 뭔가 바로 구현을 하기에는 좀 어려움이 있었다. 일단 순서대로 진행을 해보겠다. 아래 기본적인 화면이다. 할일을 적는 input과, 추가 버튼, 그리고 리스트와 삭제 버튼이 있다. 차근차근 진행해보겠다.일단 html 코드이다. Todo List - 목록 조회 :) 파일 경로: 쇼핑 목록 ..