차근차근 배움터

어떤 종류의 리액트 앱을 구현하더라도 알아야 하는 것 기본적인 사항들을 배운다 가장 중요한 컴포넌트 중심의 사용자 인터페이스를 구축하는 방법을 배워본다 리액트를 구성하는 핵심 구문 JSX 컴포넌트 구축방법 사용방법 리액트에서 데이터를 활용하는 방법 이런 비용 추적기 프로젝트를 만들어볼 것이다

concat concat은 배열을 합치는 거라고 보면 된다 예제만으로도 쉽게 이해가 가능하다 const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); // Expected output: Array ["a", "b", "c", "d", "e", "f"] slice() 배열을 자르는 것으로 slice(a, b) 일경우에 a 이상 c 미만의 요소들을 담는다 a, b가 음수일 경우는 뒤에서부터 생각하면 된 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals..

메서드 find()는 제공된 테스트 기능을 만족하는 제공된 배열의 첫 번째 요소를 반환합니다. 테스트 기능을 만족하는 값이 없으면 undefined 반환됩니다. const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 40); const index = array1.findIndex(element => element > 12); console.log(found); console.log(index); // 출력 // 130 // 3 요소가 하나만 출력된다

JS Array functions 차세대 자바스크립트는 아니지만 중요합니다. 다음과 같은 자바스크립트 array 함수가 있습니다: map() , filter() , reduce(). 많은 React 개념이 (불변의 방식으로) 배열 작업에 의존하기 때문에 제가 그것들을 꽤 많이 사용하는 것을 보게 될 것입니다. 다음 페이지는 어레이 프로토타입에서 사용할 수 있는 다양한 방법에 대한 좋은 개요를 제공합니다. 필요에 따라 이를 클릭하고 지식을 리프레시할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array 이 코스에서 특히 중요한 사항은 다음과 같습니다: map() => https://devel..

이 모듈에서, 저는 몇몇 핵심 차세대 자바스크립트 기능들에 대한 간략한 소개를 해 드렸습니다. 물론 이 과정에서 여러분들이 자주 보시게 될 것들에 초점을 맞추었죠. 여기 간략한 요약이 있습니다! let & const let 에 대해 더 읽어보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let const에 대해 더 읽어보기:: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const let 과 const 는 기본적으로 var 를 대체합니다. 여러분은 var 대신 let 을 사용하고, var 대신 const를 사용하게 됩..

리액트에서는 그저 자바스크립트의 최신 기능들을 더 사용할 뿐이다 이전 브라우저에서도 작동하는 코드를 계속 제공하면서 이런 모든 기능들을 사용할 수 있는 프로젝트를 설정하는 법을 간략하게 보여주겠다 언제든 이 모듈에 돌아와서 확인할 수 있다

지난 번에 filter 함수를 봤는데 우리는 비슷한 sort와 map 함수도 살펴볼 수 있다 개인적으로는 filter map이 상당히 유사하다고 느껴진다 map() 함수는 기존에 사용해봐서 어렵지 않다 map 안에 있는 요소들을 하나 씩 꺼내서 반복문처럼 돌리는 것 const numbers = [1, 2, 3]; const double = numbers.map((e)=>e*2); // 출력 [2, 4, 6] sort 함수도 정리해볼까 한다 Sort() sort 함수에서는 String 배열일 때 그냥 abc 순서대로 배열을 한다 (배열 자체가 변경된다) 근데 숫자일 때? 숫자의 크기를 비교하는 것이 아니라 1,2,3,4, 그 앞 숫자의 크기를 비교하게 된다 그래서 아래를 보면 10,000이 제일 끝이 아니..

Primitive Type and Reference Type Primitive Type 원시형 타입 (numbers, booleans, string) 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다. 객체와 배열은 참조형 자료 타입이다. 그렇다면 다른 타입은 복사를 하지 않는 다는 것인가? 맞다, 아래와 같이 코드를 작성할 때 객체 person은 메모리에 저장되어 있고, 상수 person에는 메모리의 주소를 가리키는 포인터를 저장한다. 그래서 위의 코드처럼 secondPerson에 값을 복사(?)하고 person.name을 바꾸면 secondPerson에는 이미 값이 할당 되어서 기존의 값인 'Max'가 출력될 것이라고 예상할 수 있지만 아까 말한 것처럼 값을 그대로 복사하는 것이 아니라 값..

배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장 스프레드를 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 우리가 사용하는 어떤 것에 전달한다 하지만 구조분해 Destructuring의 경우는 프로퍼티를 하나만 가져와서 변수에 저장한다. 이런 점에서 Rest Spread와 차이를 보인다

Spread 또는 Rest라고 불리는 ... 연산자 Spread 배열의 원소나 객체의 프로퍼티를 나누는데 사용한다 ... 연산자는 배열이면 배열, 객체면 객체, 새로운 배열 및 객체에 그 내부에 있는 것들을 꺼내서 넣는다고 생각하면 된다 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 5, 6, 7]; console.log(newNumbers); const person = { name: 'Max', age: 24 }; const newPerson = { ...person, gender: 'Male' } console.log(newPerson); // print // {name: 'Max', age: 24, gender: 'Male'} Rest Re..