차근차근 배움터

이전 강의를 건너 뛰셨다면 첨부 파일에 시작 프로젝트 스냅샷이 있습니다. 1. 다운로드 한 뒤 2. 압축을 해제하시고 3. npm install i 을 압축을 푼 폴더에서 실행하세요 4. npm start 를 실행해 개발 서버를 시작합니다. 이 강의를 위한 리소스 입니다. https://github.com/academind/react-complete-guide-code/tree/03-react-basics-working-with-components/code GitHub - academind/react-complete-guide-code: Code snapshots and materials for our "React - The Complete Guide" course (https:// Code snapsh..

create-react-app 리액트 프로젝트를 시작하기 가장 쉬운 방법이다 create-react-app.dev 홈페이지에서 더 자세한 사항을 확인할 수도 있다. 리액트 앱을 사용하는 것이 개발 과정들을 간단하게 해준다 Node.js 설치 리액트와 직접적으로 관련되어 있는 것은 아니지만 브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임입니다. 리액트 코드는 브라우저에서 실행되는 JS 코드입니다. 하지만 Create react app 툴을 위해 이 node.js가 필요하다. $ npx create-react-app my-app 이 명령을 실행하기 위해서는 컴퓨터에 node.js가 설치되어 있어야 한다. 그리고 create react ap의 생성된 프로젝트의 뒷단에는 produ..

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이 제일 끝이 아니..