차근차근 배움터

27. 새 React 프로젝트와 NodeJS에 대한 참고 사항 다음 강의에서 NodeJS(새 React 프로젝트를 생성하는데 필요한 도구)를 설치합니다. NodeJS를 다운로드하고 설치하는 방법과 더불어 React 프로젝트를 생성하는 방법을 배울 예정입니다. 새로 생성한 React 프로젝트를 실행하는 도중에 ‘digital envelope routines unsupported’ 오류가 발생한다면, 그 이유는 NodeJS 버전 때문입니다. 이 오류가 발생한다면, package.json 파일에서 다음을 교체하십시오. "start": "react-scripts start" 부분을 아래와 같이 바꿔주세요. "start": "react-scripts --openssl-legacy-provider start" 그리..

Declarative Approach 기본적으로 여러분은 바닐라 자바스크립트로 했던 것처럼 어떤 HTML 요소를 생성하고 사용자 인터페이스에서 어떤 위치에 삽입되어야 하는지 리액트에게 명령하지 않을 것이다. 리액트에서 최종 목표 상태를 다른 상황에 따라서 업데이트 되어야 하는 지 해결하는 것이다. 직접 구체적인 DOM을 업데이트하는 지침을 작성할 필요가 없다. 최종상황에서 어떻게 되어야 하는지 작성한다. 대신, 리액트나 리액트 컴포넌트로 작업할 때는 최종 상태와 어떤 상황에서 어떤 상태가 사용되어야 하는지 정의하면 됩니다 그리고 리액트는 이 모든 작업을 숨어서 처리합니다

리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리이다 컴포넌트는 재사용 가능하지만 재사용할 필요는 없다 하나의 특징인 셈이다. 프로그래밍의 기본 개념인 함수의 특성을 리액트가 그대로 가지고 있다고 생각할 수 있다.

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

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와 차이를 보인다