앜스토리 | 호기심 많은 개발자의 보물창고

보기만 해도 존나 복잡해보이는 이 그림 도대체 뭐하는 놈인지 파헤쳐보자. 진짜 간단한 SPA 프레임워크 냅두고 내가 왜 리액트를 파야하는 것인가...... 후ㅜㅜ... 리액트 어렵다. Redux란? 간단하게 말하면 React에서의 State를 관리하는 상태관리 라이브러리다. 상태관리의 로직을 컴포넌트 밖에서 처리하게 해준다. 위키피디아에서의 설명대로라면 단순하고 작은 라이브러리라는데 나한텐 왜케 어려운지 모르겠다. 얼마나 복잡한지 코드 구조좀 살펴볼까? 그냥 코드구조를 본 느낌은 ??? 이게 뭐지?? 하는 느낌이다. 도대체 어디서부터 시작이고 어디가 끝인지 알 수가 없는 복잡도.... 느낌만 말하자면 AJax처럼 데이터를 변수에 담아 말아서 던지는 느낌이다. 아래로부터는 리덕스에 대한 개념을 정리한 블로..

영상2000×1100 189KB React 개발을 마스터하기 위한 선별된 무료 리소스 목록 목차 동기 부여 92 필수 경로 30 왜 반응합니까? 34 반응 6 ES2015+ 5 라우팅 7 상태 관리 15 번들러 삼 물건 만들기 8 선택적 경로 타이프스크립트 8 이 가이드를 사용하는 방법 11 협업 방법 1 팀 영감 및 추가 리소스 9 동기 부여 이 프로젝트는 React로 애플리케이션을 구축하는 방법을 배우고 개념을 이해하려는 사람들을 위한 최고의 무료 리소스 를 수집하는 것을 목표로 합니다. 2 Functional Programming, Composition, Unidirectional Data Flow 및 기타 많은 것과 같은 채택과 함께 제공됩니다. 필수 경로 왜 반응합니까? Facebook의 JS ..

이 가이드의 목적은 React 생태계에 대한 아이디어를 제공하고 혼란스러운 경우 학습을 안내하는 것입니다. 관심이 있는 경우 프론트 엔드 개발 에 중점을 둔 프론트엔드 개발에 대한 또 다른 로드맵 이 있습니다. 또한, 아래 목록은 전체 목록이며 항목은 특정 순서 없이 나열되어 있음을 유의하시기 바랍니다. 그림에 나열된 모든 것을 배울 필요는 없지만 모르는 것을 아는 것이 아는 것만큼 중요합니다.

ES6의 전개 연산자(spread operator)는 독특하면서도 매우 유용한 문법 입니다. 전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용합니다. 사용 방법은 배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력합니다. 다만, 배열, 객체, 함수 인자 표현식([], {}, 0) 안에서만 사용해야합니다. ES6의 배열 전개 연산자 사용 방법 알아보기 E56 이전 문법에서는 배열의 일부 요소만 잘라내거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 사용해야 했습니다. 다음은 기존 문법으로 배열의 일부 요소를 잘라내거나 연결한 예제입니다. 직접 실습해 보면 알겠지만 아래의 방법은 배열 내장 함수를 일일이 기억해야 하고 코드가 길어서 불편합니다. 1 var array1 = ['one', 't..

가장 먼저 알아볼 ES6 문법은 템플릿 문자열(template string)입니다. 템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용합니다. 기존 자바스크립트의 문자열 사용 방법 알아보기 기존 자바스크립트에서는 문자열과 문자열 또는 문자열과 변수를 연결하려면 병합 연산자(+) 를 사용해야 했습니다. 다음은 병합 연산자로 문자열과 문자열 또는 문자열과 변수를 연결하는 예제입니다. var stringl = '안녕하세요'; var string2 = '반갑습니다'; var greeting = stringl + ' ' + string2; var product = { name: '도서', price: '4200원' }; var message = '제품' + product.name + '의 가격은' + pr..

템플릿 문자열 전개 연산자 가변 변수와 불변 변수 클래스 화살표 함수 객체 확장 표현식과 구조 분해 할당 라이브러리 의존성 관리 배열 함수 비동기 함수 디바운스와 스로틀