Programming/JavaScript52 [책] React.JS 프로 리액트 (2/2) [책] React.JS 프로 리액트 (2/2) React.js를 이용한 모던 프런트엔드 구축 프로 리액트 React.js를 이용한 모던 프런트엔드 구축카시우 지 소자 안토니우 저/최민석 역 동형 리액트 애플리케이션 동형isomorphic 자바스크립트 애플리케이션은 코드가 전체 또는 부분적으로 클라이언트와 서버 간에 공유되는 애플리케이션이다. 리액트 컴포넌트의 테스트 Jest 제스트는 리액트가 권장하는 테스트 프레임워크다. 널리 이용하는 재스민Jasmine 프레임워크를 기반으로 하며 여러 유용한 기능이 추가됐다. 가상 DOM 구현으로 테스트를 실행한다.(따라서 테스트를 명령줄에서 실행 할 수 있다.) JSX를 기본적으로 지원한다. 웹팩 소스맵 생성 원래 작성된 파일을 가리키는 소스맵을 생성하는 devtoo.. 2018. 5. 20. [책] React.JS 프로 리액트 (1/2) [책] React.JS 프로 리액트 (1/2) React.js를 이용한 모던 프런트엔드 구축 프로 리액트 React.js를 이용한 모던 프런트엔드 구축카시우 지 소자 안토니우 저/최민석 역 시작하기 리액트의 정의 리액트는 자바스크립트와 (필요에 따라) XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진이다. 리액트의 장점 편리한 반응형 렌더링 순수 자랍스크립트를 이용한 컴포넌트 기반 개발 문서 모델의 유연한 추상화 컴포넌트 계층 정의 컴포넌트는 단일 관심사를 가져야 하며 작아야 한다. 즉, 컴포넌트는 한 가지 일만 해야 한다. 컴포넌트가 더 성장하는 경우 작은 하위 컴포넌트로 분할해야 한다. 프로젝트의 와이어프레임과 레이아웃을 분석하면 컴포넌트 계층에 대한 많은 힌트를 얻을 수 있다. 데이터 모델이.. 2018. 5. 19. Cesium Viewer 화면 설정 확인 Cesium Viewer 화면 설정 확인 Viewer - Cesium Documentation 에서 자세한 내용을 확인 할 수 있습니다. animation: false import React, { Component } from "react"; import { Viewer } from "cesium"; class CesiumPage3 extends Component { componentDidMount() { this.viewer = new Viewer(this.cesiumContainer, { animation: false, }); } render() { return (this.cesiumContainer = element)} />; } } export default CesiumPage3; 좌측 하단의 애.. 2018. 5. 18. Cesium-React 적용 Cesium-React 적용 출처: cesium-react - npm create-react-app react 프로젝트 생성 create-react-app cesium-react-test cd cesium-react-test yarn eject yarn install 모듈 설치 cesium cesium-react html-webpack-include-assets-plugin copy-webpack-plugin yarn add cesium cesium-react html-webpack-include-assets-plugin copy-webpack-plugin webpack.config 수정 config/webpack.config.dev.js // config/webpack.config.dev.js cons.. 2018. 5. 17. [책] 빠른 모바일 앱 개발을 위한 React Native [책] 빠른 모바일 앱 개발을 위한 React Native 자바스크립트로 만드는 네이티브 모바일 앱 개발 가이드 바니 아이젠먼 저/이종은 역 플랫폼 API XHR은 XMLHttpRequest의 줄임말이다. XHR을 이용하여 사진을 POST로 요청하는 기본 구조 var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://posttestserver.com/post.php'); var formdata = new FormData(); formdata.append('image', {...this.state.photo, name: 'image.jpg'}); xhr.send(formdata); Promise는 비동기 방식을 처리할때 사용되는 객체이다. https://deve.. 2018. 5. 16. [책] Learning React [책] Learning React 알렉스 뱅크스,이브 포셀로 공저/오현석 역 리액트를 사용하는 전체 사이트 https://github.com/facebook/react/wiki/Sites-Using-React 예약어와 className 자바스크립트에는 개발자가 임의로 변수나 객체 이름 등에 사용할 수 없는 예약어가 있다. ES2016 기준으로 그 예약어 목록은 다음과 같다. break case class catch const continue debugger default delete do else export extends finally for function if import in instanceof new return super switch this throw try typeof var void wh.. 2018. 4. 25. 이전 1 2 3 4 5 ··· 9 다음