React (21) 썸네일형 리스트형 React Native Webview 디버깅 가이드 해당 글은 https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md 를 보고 번역하였습니다. ( 리액트 네이티브 웹뷰에서 다양한 스크립트를 실행하여 다양한 상황이 발생했는데 이를 추적하기가 쉽지 않았습니다.) Script Errors 웹뷰에서 발생한 syntax error, script error를 디버깅하기는 쉽지 않다. 왜냐하면 기본적으로 error를 console 창에 보여주지 않기 때문이다. ( 만약 HTML을 외부사이트에서 로딩하는거라면 ) content가 load 되기전에 error handler를 inject 하는 방법이 있다. 만약에 javascript를 inject한다면, try/ca.. React 공식문서 읽기 - 코드 분할 코드 분할 번들링은 훌륭하지만 앱이 커지면 번들도 커짐 => 초기화 로딩 비용 증가 그렇기 때문에 번들을 나누어야 함 = 코드 분할 Webpack, Browserify 같은 번들러가 지원하는 기능 코드 분할을 통해 지연로딩하게 도와줌 React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있음 // Before import OtherComponent from './OtherComponent'; // After const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 컴포넌트는 suspense 하위에서 렌더링 되어야 함 기다리는 동안 예비 컨텐츠를 보여줄 수 있음 import R.. React-Native 새로운 아키텍쳐 살펴보기 아래 그림은 새로운 아키텍처가 나오기 전 그림이다. JavascriptCore : React Native 에서 자바스크립트를 실행하는 자바스크립트 엔진 애플 iOS 가이드라인 룰인 Webkit 프레임워크와 Webkit 자바스크립트를 저석적으로 사용해야한다를 따른 것 ( JSC는 Webkit이 사용하는 프레임워크, Safarid에서 사용하는 엔진 ) Yoga : 사용자 화면의 UI 요소 위치를 계산하는데 사용되는 레이아웃 엔진의 이름 Codegen이란? 리액트 네이티브팀은 더욱 많은 정적타입 checker를 넣으려 함 ( flow, typescript를 통해 ) Codegen이란 툴을 통해, 자바스크립트와 네이티브 코드간 호환을 자동화함 JSI ( 자바스크립트 인터페이스 ) 란? 기존 아키텍처에서는 브릿지.. [React-Native 공식문서] 1. Core Components And Native Components https://reactnative.dev/docs/intro-react-native-components Core Components and Native Components React Native는 리액트와 native app 기능을 사용하여 안드로이드와 iOS 앱을 제작할 수 있는 오픈소스 프레임워크다. React Native를 쓰면, React Component에서 javascript를 통해 플랫폼 API에 접근하여 UI의 표현과 동작을 만들 수 있다. 이번 장에서는 React Native에서 component들이 어떻게 동작하는지 살펴보자 Views and mobile development 안드로이드와 iOS 개발에서 View 는 UI의 기본 블록이다. 아래 그림의 직사각형은 텍스트, 이미지를 보여.. 4장. Ducks 구조와 redux-actions 사용하기 https://velopert.com/3358 Redux 를 통한 React 어플리케이션 상태 관리 :: 4장. Ducks 구조와 redux-actions 사용하기 | VELOPERT.LOG 이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 4장. Ducks 구조와 redux-actions 사용하기 Redux 공식 문서에서는, ActionType, Action, Reducer 이 3가지를 따로 따로 다룹니다. 그러다보니, 하나의 액션을 추가하려면 3개의 다른 파일들을 수정해야하죠. 가끔씩은, 액션생성자를 하나하나 만들고 또 그것들을 dispatch 하는 과정이 귀찮게 느껴질때도 있습니다. 상태 velopert.com 해당 포스팅은 이 글을 읽으면서 저의 .. 3장. Immutable.js 익히기 https://velopert.com/3354 Redux 를 통한 React 어플리케이션 상태 관리 :: 3장. Immutable.js 익히기 | VELOPERT.LOG 이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 3장. Immutable.js 익히기 Immutable.js는 자바스크립트상에서 불변성의 데이터를 다루는것을 도와줍니다. 3장을 진행하기에 앞서, 우선 자바스크립트에서 객체의 불변성에 대해서 알아보겠습니다. 객체의 불변성 이를 이해하려면, 간단한 자바스크립트 코드들을 실행해보아야합니다. 크롬에서 개발자도구를 열고, 다음 코드를 입력해보세요: let a = velopert.com 해당 블로그를 보고 공부하면서 정리한 글입니다. 객체의 불변성.. React vs Vue 잘 정리되어 있는 기사가 있어 가져왔습니다 https://joshua1988.github.io/web_dev/vue-or-react/ Redux 시작하기 기초 - (마지막) React와 함께 사용하기 React와 함께 사용하기 Redux와 React는 관계가 없다. 그렇다면 왜 같이 사용하는 걸까? Redux는 앞에서 배운 것과 같이 액션을 통해 상태를 변경한다. 이 때문에 UI를 상태에 대한 함수로 기술하는 React와 잘 어울리기 때문이다. 할 일 앱을 React로 만들어보자! React Redux 설치하기 React 바인딩은 Redux에 기본적으로 포함되어 있지 않다. 명시적으로 설치를 해줘야 한다. npm install --save react-redux Smart Component(영민한)와 Dumb Component(우직한) 영민한 컴포넌트우직한 컴포넌트위치최상위, 라우트 핸들러중간과 말단 컴포넌트Redux와 연관됨예아니오데이터를 읽기 위해Redux 상태를 구독props에서 데이터를 읽음데이.. Redux 기초 - (2) 스토어(Store), 데이터 흐름 스토어 Redux 기초 - (1) 에서 '무엇이 일어날지'에 관한 액션과 '상태를 수정하는' 리듀서를 정의하였다. 이번에는 UI도 없이 Redux 기초 - (1) 에서 만들었던 로직들을 테스트해 볼 것이다. 이를 가능하게 하는 것이 스토어(Store)다. dispatch(action)를 통해 상태를 수정할 수 있음getState()를 통해 상태에 접근할 수 있음애플리케이션의 상태를 저장함subscribe(listener)를 통해 리스너를 등록함즉, 스토어는 액션과 리듀서를 가져오는 객체다. Redux 애플리케이션은 단 하나의 스토어만을 가질 수 있다. 만약 데이터를 다루는 로직을 쪼개고 싶다면, 전 장에서 배운 리듀서 조합을 사용하면 된다. 우린 이전 장에서 combineReducers()를 통해 여러 .. Redux 기초 - (1)액션, 리듀서 액션 데이터를 변경하려면 어떤 행동을 해야하는지에 대한 정의가 필요하다. 새 할 일의 추가를 나타내는 액션의 예시이다. 액션은 평범한 자바스크립트 객체다. const ADD_TODO = 'ADD_TODO'{ type: ADD_TODO, text: 'Build my first Redux app' }type - 어떤 형태의 액션이 실행될지 나타내는 속성. 앱이 충분히 커지게 되면 타입들을 별도의 파일로 분리type 외에 액션 객체의 구조는 마음대로 짜면 된다. ( 물론 권장사항이 있다. - https://github.com/acdlite/flux-standard-action )import { ADD_TODO, REMOVE_TODO } from '../actionTypes' 액션 생산자 액션을 만드는 함수다... 이전 1 2 3 다음
