1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..
1. 얕은 복사(Shallow Copy) field-by-field copy라고도 하며, 만약 복사하려는 값이 참조형 자료(배열, 객체, 함수 등)라면 원본의 주소를 복사(참조)하고, 원시형 자료라면 원본의 값을 그대로 복사하는 방법. ① 배열: Array.slice(), Array.from(), Array.map(), ... 등 Array 메서드, [ ...Array ] ② 객체: Object.assign(), { ... Object } A. 얕은 복사의 예 const arr = [ 1, 2, 3, 4 ]; const shallowArr = arr.slice(); console.log( shallowArr === arr ); // false 1차원 배열, 객체는 얕은 복사만으로도 원본을 변경하지 않고 ..
const obj = { string: "test", number: 123, array: [1, 2, 3, 4], method: function(param) { return param + 1 } } Object 객체에 대해 for ... of 반복문을 사용하면 위와 같은 에러 메시지가 뜸. Object인 객체 obj는 반복가능한(iterable) 객체가 아니기 때문에 for ... of 반복문을 사용할 수 없음. 1. Iterable Protocol [Symbol.iterator] 메서드를 가지고 있는 객체는 iterable이다. for..of 구조에서 어떠한 값들이 loop 되는지 등의 iteration 동작을 정의하는 방법. 배열과 문자열에 대해서는 for ... of 반복문을 사용할 수 있는데, 배..
1. Optional Chaining # if (obj.someMethod()) { ... }; A.B() 또는 A.B처럼 chaining의 형식으로 메서드를 실행하거나, 속성을 선택하려고 할 때 A가 undefiened일 경우 "B is not a function"과 같은 오류 메시지가 출력됨. 따라서 그 전에 A가 존재하는지 먼저 확인을 해야 함. if (obj && obj.someMethod()) { ... }; 위 코드처럼 "A가 존재하고, A.B()가 true"와 같은 조건문으로 A가 정의되었는지 먼저 검증을 해줘야 함. if (obj?.someMethod()) { ... }; 하지만 A?.B처럼 optional chaining을 이용하면 B 메서드, 속성에 접근하기 전에 먼저 A가 undefi..
2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
arr.reduce(reducer, initialValue); /* reduce()의 콜백함수 */ function reducer (accumulator, current, currentIndex) { ... return accumulator; }; reduce()의 콜백함수는 ① 누산기(accumulator): reduce()에 initialValue가 제공될 경우 initialValue, 아니면 배열의 첫번째 요소 arr[0] ② 현재값(current) - reduce()에 initialValue가 제공될 경우 배열의 첫번째 요소 arr[0], 아니면 배열의 두번째 요소 arr[1] - 콜백함수에 currentIndex가 제공될 경우 arr[currentIndex] ③ 초기값(initialValue):..
Todo 앱의 할일 목록을 관리하기 위해 Local Storage를 사용했으나, 데이터를 저장할 때마다 JSON.stringify()를 이용해 객체를 문자열로 변환시켜주는 과정이 필요하고, 객체 내부의 객체도 JSON.stringify()로 변환이 가능하나, HTML Element같은 객체는 제대로 변환이 불가능하고, Local Stroage의 용량은 최대 10MB 등의 단점으로 IndexedDB를 사용해보기로 함. ※ JSON.strigify()로 HTML Element 변환 저장이 가능하나 일반적인 객체를 저장하는 것만큼 간단하지 않음 How to JSON.stringify a dom element? 1-1. 데이터베이스 열기 // user-Todo라는 이름의 데이터베이스를 불러옴 let reques..
document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
setTimeout(), setInterval() 함수에서 콜백함수에 매개변수를 전달하는 가장 간단한 방법은 let i = 0; setTimeout(function(j) { console.log(j); }, 1000, i); setTimeout( callback, timeout, arg1, arg2, ... ) 형태로 함수를 작성하는 것이 있음. let i = 0; setTimeout(function(i) { // argument로 i를 지정했으므로 함수 내부에서 i는 지역변수 console.log(i); // 지역변수 i를 참조 }, 1000); 변수 i는 전역변수이기 때문에 arg1, arg2, ...를 입력하지 않고, 콜백함수의 매개변수로 전역변수 i를 지정하면 정상적으로 작동할 것 같음... 하지..
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..
JavaScript/React 2022. 5. 17. 20:48
1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..
JavaScript 2022. 5. 13. 23:17
1. 얕은 복사(Shallow Copy) field-by-field copy라고도 하며, 만약 복사하려는 값이 참조형 자료(배열, 객체, 함수 등)라면 원본의 주소를 복사(참조)하고, 원시형 자료라면 원본의 값을 그대로 복사하는 방법. ① 배열: Array.slice(), Array.from(), Array.map(), ... 등 Array 메서드, [ ...Array ] ② 객체: Object.assign(), { ... Object } A. 얕은 복사의 예 const arr = [ 1, 2, 3, 4 ]; const shallowArr = arr.slice(); console.log( shallowArr === arr ); // false 1차원 배열, 객체는 얕은 복사만으로도 원본을 변경하지 않고 ..
JavaScript 2022. 5. 10. 21:40
const obj = { string: "test", number: 123, array: [1, 2, 3, 4], method: function(param) { return param + 1 } } Object 객체에 대해 for ... of 반복문을 사용하면 위와 같은 에러 메시지가 뜸. Object인 객체 obj는 반복가능한(iterable) 객체가 아니기 때문에 for ... of 반복문을 사용할 수 없음. 1. Iterable Protocol [Symbol.iterator] 메서드를 가지고 있는 객체는 iterable이다. for..of 구조에서 어떠한 값들이 loop 되는지 등의 iteration 동작을 정의하는 방법. 배열과 문자열에 대해서는 for ... of 반복문을 사용할 수 있는데, 배..
JavaScript 2022. 5. 5. 23:03
1. Optional Chaining # if (obj.someMethod()) { ... }; A.B() 또는 A.B처럼 chaining의 형식으로 메서드를 실행하거나, 속성을 선택하려고 할 때 A가 undefiened일 경우 "B is not a function"과 같은 오류 메시지가 출력됨. 따라서 그 전에 A가 존재하는지 먼저 확인을 해야 함. if (obj && obj.someMethod()) { ... }; 위 코드처럼 "A가 존재하고, A.B()가 true"와 같은 조건문으로 A가 정의되었는지 먼저 검증을 해줘야 함. if (obj?.someMethod()) { ... }; 하지만 A?.B처럼 optional chaining을 이용하면 B 메서드, 속성에 접근하기 전에 먼저 A가 undefi..
JavaScript 2022. 5. 1. 19:53
2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
JavaScript 2022. 4. 27. 15:19
arr.reduce(reducer, initialValue); /* reduce()의 콜백함수 */ function reducer (accumulator, current, currentIndex) { ... return accumulator; }; reduce()의 콜백함수는 ① 누산기(accumulator): reduce()에 initialValue가 제공될 경우 initialValue, 아니면 배열의 첫번째 요소 arr[0] ② 현재값(current) - reduce()에 initialValue가 제공될 경우 배열의 첫번째 요소 arr[0], 아니면 배열의 두번째 요소 arr[1] - 콜백함수에 currentIndex가 제공될 경우 arr[currentIndex] ③ 초기값(initialValue):..
JavaScript 2022. 4. 25. 20:08
Todo 앱의 할일 목록을 관리하기 위해 Local Storage를 사용했으나, 데이터를 저장할 때마다 JSON.stringify()를 이용해 객체를 문자열로 변환시켜주는 과정이 필요하고, 객체 내부의 객체도 JSON.stringify()로 변환이 가능하나, HTML Element같은 객체는 제대로 변환이 불가능하고, Local Stroage의 용량은 최대 10MB 등의 단점으로 IndexedDB를 사용해보기로 함. ※ JSON.strigify()로 HTML Element 변환 저장이 가능하나 일반적인 객체를 저장하는 것만큼 간단하지 않음 How to JSON.stringify a dom element? 1-1. 데이터베이스 열기 // user-Todo라는 이름의 데이터베이스를 불러옴 let reques..
JavaScript 2022. 4. 15. 21:10
document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
JavaScript 2022. 3. 30. 16:31
setTimeout(), setInterval() 함수에서 콜백함수에 매개변수를 전달하는 가장 간단한 방법은 let i = 0; setTimeout(function(j) { console.log(j); }, 1000, i); setTimeout( callback, timeout, arg1, arg2, ... ) 형태로 함수를 작성하는 것이 있음. let i = 0; setTimeout(function(i) { // argument로 i를 지정했으므로 함수 내부에서 i는 지역변수 console.log(i); // 지역변수 i를 참조 }, 1000); 변수 i는 전역변수이기 때문에 arg1, arg2, ...를 입력하지 않고, 콜백함수의 매개변수로 전역변수 i를 지정하면 정상적으로 작동할 것 같음... 하지..
JavaScript 2022. 3. 29. 22:10
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..