1. basic react React란? 어플리케이션 구조 중에서 View만을 담당하는 라이브러리 React is a JavaScript library for building user interfaces 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 그냥 기존 뷰를 날려 버리고 처음부터 새로운 데이터를 가지고 render함수를 호출하여 새로 렌더링 함으로써 어플리케이션의 구조를 간단화 -> render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교 -> 둘의 차이를 알아내 최소한의 연산으로 DOM 트리 업데이트 React 특징 VirtualDOM을 사용한 화면 조작 데이터를 업데이트하면 전체 UI를 Virtu.. 2020. 10. 24. 0. React intro basic react react component event handling component 반복 lifecycle hooks component styling todo project immer react-router, SPA Asynchrony redux todo project + redux middleware backend : express + mongodb MEMOAPP project : https://velopert.com/tag/reactcodelab 참고 - 리액트를 다루는 기술 - 인프런 : https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert#description 2020. 10. 24. Redux in React 0. 작업환경설정 1. UI 구성 2. 프레젠테이셔널 컴포넌트 생성 3. 리덕스 생성 4. 리액트 앱에 리덕스 적용 5. 컨테이너 컴포넌트 생성 6. redux-actions라이브러리 적용 0. 작업환경설정 $ yarn create react-app react-redux-tutorial $ cd react-redux-tutorial $ yarn add redux react-redux // redux 라이브러리 : createStore함수를 사용하여 스토어생성 // react-redux 라이브러리 : connect함수와 Provider컴포넌트를 사용하여 리액트에서 리덕스 관련작업 처리 1. UI 구성 리덕스를 사용한 리액트 애플리케이션 UI 구조 프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저.. 2020. 10. 24. Node.js 기본 개념 및 간단한 웹서버 구현 1. 기본 개념 * Node.js : V8-engine based runtime which allows using Javascript in server V8 자바스크립트 엔진을 기반으로 하는 서버에서 자바스크립트를 사용하게 해주는 런타임 - 특징 1. single thread 2. non-blocking I/O 3. event-drive * Global Object 1. console : 콘솔 창에 결과를 보여주는 객체 - dir(object) : 객체의 속성들을 출력 - time(id) : 실행시간 측정을 위한 시작시간 기록 - timeEnd(id) : 실행시간 측정을 위한 종료시간 기록 2. process : 프로세스의 실행에 대한 정보를 다루는 객체 - argv : 프로세스를 실행할 때 전달되는 파.. 2020. 10. 24. Redux MVC vs Flux MVC의 문제점 MVC 정의 : 애플리케이션 개발시 가장 많이 사용되는 디자인패턴으로, 컨트롤러(Controller)는 모델(Model)의 데이터를 조회하거나 업데이트하는 역할을 하며, 모델(Model)의 변화는 뷰(View)에 반영한다. 또한, 사용자는 뷰를 통해 데이터를 입력하는데 사용자의 입력은 모델에 영향을 준다. 문제점 : 페이스북과 같은 대규모 애플리케이션에서는 Model이나 Model과 관련한 View가 대량으로 시스템에 추가되면 복잡도가 폭발적으로 증가하는데, 이 같은 의존성과 순차적 업데이트는 종종 데이터의 흐름을 꼬이게 하여 예기치 못한 결과를 불러일으킨다. Flux 패턴 Flux 정의 : MVC 패턴의 문제를 해결하기 위해 고안된 아키텍쳐 단방향 데이터 흐름(u.. 2020. 10. 24. middleware 1. middleware? : 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 실행 -> 액션과 리듀서 사이의 중간자 1-1. loggerMiddleware.js 구현 const middleware = store => next => action => { // 현재 스토어 상태 값 기록 console.log('현재 상태', store.getState()); // 액션 기록 console.log('액션',action); // 액션을 다음 미들웨어 또는 리듀서에 전달 const result = next(action); // 액션 처리 후 스토어의 상태를 기록 console.log('다음 상태', store.getState()); return result; // 여기에서 .. 2020. 10. 24. 이전 1 ··· 22 23 24 25 26 27 28 ··· 32 다음
