티스토리

IT 메모장

검색하기

블로그 홈

IT 메모장

happyer16.tistory.com/m

IT와 관련된 정보들을 쉽게 풀어놓은 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

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.. 공감수 0 댓글수 0 2022. 7. 7.
React 공식문서 읽기 - 코드 분할 코드 분할 번들링은 훌륭하지만 앱이 커지면 번들도 커짐 => 초기화 로딩 비용 증가 그렇기 때문에 번들을 나누어야 함 = 코드 분할 Webpack, Browserify 같은 번들러가 지원하는 기능 코드 분할을 통해 지연로딩하게 도와줌 React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있음 // Before import OtherComponent from './OtherComponent'; // After const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 컴포넌트는 suspense 하위에서 렌더링 되어야 함 기다리는 동안 예비 컨텐츠를 보여줄 수 있음 import R.. 공감수 1 댓글수 0 2022. 6. 15.
React-Native 새로운 아키텍쳐 살펴보기 아래 그림은 새로운 아키텍처가 나오기 전 그림이다. JavascriptCore : React Native 에서 자바스크립트를 실행하는 자바스크립트 엔진 애플 iOS 가이드라인 룰인 Webkit 프레임워크와 Webkit 자바스크립트를 저석적으로 사용해야한다를 따른 것 ( JSC는 Webkit이 사용하는 프레임워크, Safarid에서 사용하는 엔진 ) Yoga : 사용자 화면의 UI 요소 위치를 계산하는데 사용되는 레이아웃 엔진의 이름 Codegen이란? 리액트 네이티브팀은 더욱 많은 정적타입 checker를 넣으려 함 ( flow, typescript를 통해 ) Codegen이란 툴을 통해, 자바스크립트와 네이티브 코드간 호환을 자동화함 JSI ( 자바스크립트 인터페이스 ) 란? 기존 아키텍처에서는 브릿지.. 공감수 0 댓글수 0 2022. 5. 17.
[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의 기본 블록이다. 아래 그림의 직사각형은 텍스트, 이미지를 보여.. 공감수 1 댓글수 0 2022. 3. 20.
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 해당 포스팅은 이 글을 읽으면서 저의 .. 공감수 0 댓글수 0 2019. 10. 29.
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 해당 블로그를 보고 공부하면서 정리한 글입니다. 객체의 불변성.. 공감수 1 댓글수 0 2019. 10. 28.
React vs Vue 잘 정리되어 있는 기사가 있어 가져왔습니다 https://joshua1988.github.io/web_dev/vue-or-react/ 공감수 0 댓글수 0 2019. 2. 28.
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에서 데이터를 읽음데이.. 공감수 0 댓글수 0 2017. 11. 21.
Redux 기초 - (2) 스토어(Store), 데이터 흐름 스토어 Redux 기초 - (1) 에서 '무엇이 일어날지'에 관한 액션과 '상태를 수정하는' 리듀서를 정의하였다. 이번에는 UI도 없이 Redux 기초 - (1) 에서 만들었던 로직들을 테스트해 볼 것이다. 이를 가능하게 하는 것이 스토어(Store)다. dispatch(action)를 통해 상태를 수정할 수 있음getState()를 통해 상태에 접근할 수 있음애플리케이션의 상태를 저장함subscribe(listener)를 통해 리스너를 등록함즉, 스토어는 액션과 리듀서를 가져오는 객체다. Redux 애플리케이션은 단 하나의 스토어만을 가질 수 있다. 만약 데이터를 다루는 로직을 쪼개고 싶다면, 전 장에서 배운 리듀서 조합을 사용하면 된다. 우린 이전 장에서 combineReducers()를 통해 여러 .. 공감수 0 댓글수 0 2017. 11. 21.
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' 액션 생산자 액션을 만드는 함수다... 공감수 0 댓글수 0 2017. 11. 20.
#4. React 성능과 렌더링 Avoid Reconciliation 앞서 설명한 대로 React는 Reconciliation에서 O(n)의 시간복잡도를 가지고 있으며, 필요 이상의 DOM 접근이나 업데이트를 피하기 때문에 성능에 대한 고민을 할 필요가 없다. 하지만 컴포넌트가 렌디링하는 엘리먼트가 수천 수만개라면? O(n)도 느리다. 개발자는 일부 경우에 실제 렌더링이 필요 없는 상황을 알고 있다. 그래서 컴포넌트가 렌더링 전에 호출하는 라이플사이클 메서드 shouldComponentUpdate() 를 오버라이드하여 성능을 향상시킬 수 있다. 기본 구현을 return true이기 때문에, 항상 Reconciliation을 포함한 렌더링 작업을 수행한다. 개발자는 컴포넌트 렌더링이 필요 없는 때에만 return false를 통해 Rea.. 공감수 0 댓글수 0 2017. 6. 19.
#3. Reducer React-Router란? mapStateToProps : 컴포넌트의 props에 매핑시켜준다. ( isLoggedIn에 값을 넣어 줌 )Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 Smart Component(똑똑한)와 Dumb Component(멍청한) Smart Component Dumb Component 위치 최상위, 라우트 핸들러 중간과 말단 컴포넌트 Redux와 연관됨 Yes No 데이터를 읽기 위해 Redux 상태를 구독(?) .. 공감수 0 댓글수 0 2017. 6. 5.
#2. React-Router React-Router란? Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 이후 다른 페이지로 이동 시, 페이지를 처음부터 로딩하지 않고 js 파일을 이용하여 기존 컴파운드를 언마운트시키고 다른 컴포넌트를 마운트한다. 예를 들어 웹의 헤더 컴포넌트와 같은 것을 처음부터 렌더링하지 않고 그대로 유지할 수 있다는 소리. React-Router v3 vs v4? 예제 프로젝트는 v3이여서 구현할 때 v4로 바꿔줘야 했다. IndexRoute : Ro.. 공감수 0 댓글수 0 2017. 6. 5.
#1. 서버 구성 - 라우팅 프로젝트 구조 server측 코드가 있는 폴더 ( /server )가 있다. 해당 프로젝트를 만들 때 React 공부가 목적이였기 때문에 javascript를 같이 사용할 수 있는 node.js를 이용하였다. server측 언어는 php, ruby, python, node.js 등 다양한 종류가 있지만 각자 편한 걸 고른다고 하면 된다. node.js는 브라우저 밖에서도 javascript를 실행 시켜주는 runtime일 뿐이다. ( atom이 node.js로 만들어졌다네.... ) Express Web framework일 뿐이다. 웹서버 구축할 때 필요한 것들을 도와주는 역할이다. 라우팅 [ server/main.js - 라우팅 설정하는 부분 ] [ src/actions/authentication.js.. 공감수 0 댓글수 0 2017. 6. 3.
Tip code template 생성 1) File > Snippets > 아래 내용 복사 '.source.js': 'React Component': 'prefix': 'rc' 'body': ''' import React, { Component, PropTypes } from 'react'; const propTypes = { }; const defaultProps = { }; class ${1:MyComponent} extends Component { constructor(props) { super(props); } render() { return( ${1:MyComponent} ); } } ${1:MyComponent}.propTypes = propTypes; ${1:MyComponent}.defaultPr.. 공감수 0 댓글수 0 2017. 5. 23.
#3. Redux Flux 문제점 사용자와 상호작용은 뷰와 이루어지기 때문에 가끔 뷰가 모델을 업데이트해야 되는 경우가 있다. App이 작은 경우는 문제가 발생하지 않지만, Model간의 dependency를 물고 있는 경우, 변경이 비동기적으로 일어나는 경우를 생각하면 예측하지 못한 에러가 발생할 수 있다. 이것은 데이터 흐름을 디버그하기도 어렵게 만든다. 실제로 페이스북에서 읽지않은 메세지가 1이라 떠있었는데 확인해보면 읽은 메시지였던 경우가 있었다. 해결책 : 단방향 데이터 흐름 공감수 0 댓글수 0 2017. 5. 23.
TroubleShooting 1. Uncaught Error : Invariant Violation: Element type is invalid: expected a string ( for built-in components) or a class/function but got:object import { Router } from 'react-router' : imports the default export import Router from 'react-router' : imports the export 'Router' from the file 2. Unterminated JSX contents 3. 화면이 보이지 않은 문제 ( this.props.children ) 상황 : this.props.children에 태그가 붙지 않아 화.. 공감수 0 댓글수 0 2017. 5. 22.
#2. ReactJS 시작하기 CODEPEN 설정, ES6 클래스 ES6클래스를 사용하기 위해 Preprocessor는 Bable을 사용한다. Codepen의 다음과 같은 기능을 사용하지 않고 설정을 하려면 node install 한후 그에 맞는 명령어를 옵션에 더해야한다. 이런 것도 IDE에서 제공해주는 편리한 기능인 것 같다. JSX의 특징 XML 같인 생긴 애를 native Javascript로 변경해준다. 이게 어디서 동작하는가? Babel이 JSX Loader를 이용하여 코드를 변환해준다. 질문 : HTML과 Javascript 즉 UI와 behavior를 한 곳에 짜는건 잘못된 거 아닌가요? => 간단한 application에서는 괜찮지만 규모가 큰 application에서는 수만개의 UI와 각각의 behavior가 있는데.. 공감수 0 댓글수 0 2017. 5. 16.
#1. ReactJS 소개 소개 JavaScript 어플리케이션을 어떻게 구조화 할까? AngularJS? Ember? 뭐를 사용해야 되는거지??ReactJS는 프레임워크( 틀을 제공 - 필요기능 대부분 구현되어 있어 틀을 벗어날 수 없음 )가 아닌 UI를 만들기 위한 라이브러리이다.즉, 다른 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. React는 무엇인가 : Virtual DOM과 Reconciliation React는 HTML Element들을 Virtual DOM을 이용해 표현하고 있다. Virtual DOM 은 가상의 HTML Element들을 가지고 있다가, 새로 그릴때 필요한 부분만 업데이트 ( DOM 조작 ) 하는 방식이다. jQuery를 사용하는 경우 밑의 예제처럼 셀렉터를 이용하여 해당 DOM을 찾은 후 .. 공감수 0 댓글수 0 2017. 5. 15.
2일차 - React로 변경 (4.9.일) AngularJS2에서 React로 변경 AngularJS2로 프로젝트를 시작하려 했으나, 주위 친구들과 네이버 D2글을 읽어보니 근래에는 React의 인기가 가장 좋은것 같아 React로 변경을 하였다. 네이버도 15년 쯤에 메일함 화면 수정을 하면서 React와 Redux로 넘어갔었다. 처음에 UI 작업만 진행하면 될 줄 알았는데 JSP코드와 Javascript 두 군데를 중복으로 수정해야 하며, Javascript에 뷰와 로직이 모두 들어있는 문제를 보고 새로운 프레임워크를 검토하다 React를 선택했다고 한다. ( 메일함 구현이 초기 페이지 렌더링은 서버에서 JSP로 진행하고 이후 동작은 AJAX 통신으로 동작하는 SPA(single page application) 이기 때문에 JSP 파일과 Ja.. 공감수 0 댓글수 0 2017. 4. 9.
1일차 - AngularJS2 환경 구축 (4.8.토) 프로젝트를 위한 GitLab 생성 1. gitlab 계정 생성 ( happpyer16@gmail.com ) 2. 프로젝트 생성 ( http://kkangeva.tistory.com/36 )3. SourceTree에 프로젝트 복제(clone) - HTTPS 복사해서 생성 기본적인 AngularJS2 프로젝트 구성 ( https://medium.com/@jazzyredface/angularjs2-0-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-1-649365fa6b61 참고 ) npm run go 내용정리 필요 느낀점 - 저런 기본적인 구성을 해주는 IDE는 없을까? 공감수 0 댓글수 0 2017. 4. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.