[겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드)

1. 연구 모듈/비분류 2017. 8. 3. 00:00

React Native는 react 문법을 사용하여 WebApp이 아닌 모바일 Native 앱을 작성할 수 있게 하는 기능을 제공한다.(안드로이드, 아이폰 지원)

  • [참고] 데스크탑용으로는 Native 어플리케이션 작성을 지원하는 react-native-macos(OSX용), react-native-windows(윈도우용)가 있고, WebApp 형태로 작성할 경우 OS별 테마가 적용된 react component인 react-desktop이 있다.


사전 설치 요구사항

  • Node.js


  • 안드로이드 스튜디오


안드로이드 스튜디오 세팅

  1. SDK Manager를 실행한다.


  2. Android 6.0 SDK(Marshmallow, API Level = 23)를 설치한다. (주의: 현재 Android 7.0 SDK는 지원하지 않는다)


  3. AVD Manager를 실행한다.


  4. 6.0 SDK를 사용하여 AVD를 생성한다.


React Native 설치

  1. 커맨드라인 상에서 아래와 같이 입력하여 React Native를 설치한다. 
    npm install -g react-native-cli


샘플 프로젝트 생성 및 실행

  1. 커맨드라인 상에서 아래와 같이 입력하면 샘플 프로젝트가 생성된다. 

    react-native init 생성할-프로젝트명

    => [참고] react-native init시 Unexpected token … 에러가 발생하는 경우


  2. AVD(안드로이드 에뮬레이터)가 실행되어 있는 상태에서 아래와 같이 입력하면 프로젝트가 빌드되어 에뮬레이터 상에 실행되는 것을 볼 수 있다. 

    react-native run-android


  3. [참고] IOS용 실행 커맨드는 참고로 다음과 같다. 

    react-native run-ios


참고 사이트

<테스트 환경>
- OS : Windows 7
- 안드로이드 스튜디오 버전 : 2.3.3
- node.js 버전 : 6.11.2
- react-native-cli 버전 : 2.0.1


저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

Pandoc을 사용하여 Markdown -> HTML 변환하기  (0) 2017.12.18
[React Native] react-native init시 Unexpected token ... 에러가 발생하는 경우  (0) 2017.08.06
[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js  (0) 2017.07.17
라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
,

[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js

1. 연구 모듈/비분류 2017. 7. 17. 00:00

자바스크립트로 되어있는 HTML5 Canvas 라이브러리


사용 준비

  1. 다음 홈페이지에서 Fabric.js 최신 버전들 다운받아 압축을 푼다.


  2. dist/ 디렉토리 밑의 fabric.min.js(배포용) 혹은 fabric.js(개발용) 파일을 포함하여 아래와 같이 뼈대 코드를 작성한다.


    index.html 
    <html>
<head>
    <script src="fabric.min.js"></script>
    <meta charset="utf-8">
</head>

<body>
    <canvas id="c" width="400" height="400" style="border:1px solid #000000"></canvas>
    <script>
        // 이 부분에 fabric js 코드가 들어간다.
    </script>
</body>
</html>


사용 예제


다음은 작은 사각형을 그리는 예제이다. 

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);


다음은 간단히 이미지 파일을 표시하는 예제이다. (같은 경로에 my_image.png 파일이 필요하다.) 
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});


Canvas vs. StaticCanvas


Fabric.js는 기본적으로 각 오브젝트에 아래와 같이 크기 변경, 이동 및 회전이 가능한 핸들이 붙어서 출력되게 된다.




이를 원하지 않을 경우는 Canvas 대신에 StaticCanvas를 사용하여 Canvas를 생성하면 된다. 
var canvas = new fabric.StaticCanvas('c');


참고 사이트

<테스트 환경>
- OS : Windows 7
- Fabric.js 버전 : 1.7.16


저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[React Native] react-native init시 Unexpected token ... 에러가 발생하는 경우  (0) 2017.08.06
[겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드)  (0) 2017.08.03
라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
,

라즈베리파이 제로 TRAVELShooting

1. 연구 모듈/비분류 2017. 6. 28. 03:22

1. 모니터 / 키보드 없이 USB로 연결하기 ==> 가운데 포트에서만 동작

2. Modmypi Wifi Dongle ==> 가운데 포트에서만 동작

3. 따라서 USB로 연결하여 Modmypi Wifi Dongle 사용하기는 불가 (ㅠㅠ)

   ==> 알고봤더니 가운데 포트만 USB 포트. 가장자리 포트는 단지 전원 포트라고 함.

 

4. Raspian 사용시 디폴트로 SSH가 막혀있다. 이를 Enable 하기 위해서는 윈도우 파티션 루트에 ssh(확장자 없이)라는 이름의 빈 파일을 생성한 후 부팅한다.

 

저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드)  (0) 2017.08.03
[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js  (0) 2017.07.17
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
,

[만료] 인터파크 도서상품권 (1000원)

3. 휴게 모듈 2017. 6. 20. 05:54

필요한 분 사용하세요. 만료되었습니다.


[인터파크] 도서상품권 도착!
[Web발신]
[인터파크 도서 상품권 지급안내]

"전국민 책읽기 캠페인 1천원 도서상품권(쇼핑)" 상품권이 지급되었습니다.
주문 시 현금처럼 사용하세요.

■ 인터파크 도서 상품권 1,000원
- 상품권번호 : C317Y4724T7195UD
- 30,000원 이상 구매 시 사용
- 1인 1회 사용 가능

■ 사용방법 
상품권 번호 등록 없이 주문/결제 시 즉시 사용이 가능합니다.
(PC / 모바일 사용 가능)

■ 유효기간  
본 상품권의 유효기간은 발급 후 1개월이며,미사용시 자동소멸됩니다.(발급일 : 6월 12일)

■ 이용안내
※사용기간 종료 후, 취소/반품시 상품권액 환불불가
※현금교환/사용기간 연장불가
※문의 1577-2555
※인터파크 도서 APP 다운받기
http://inpk.kr/bapp

★오늘의 베스트셀러★
*잠 1
http://inpk.kr/bipp7bestseller


저작자표시 비영리 동일조건

'3. 휴게 모듈' 카테고리의 다른 글

교보문고 <2016 고수의 선택, 10인의 미스터리 추천> 이벤트 페이지  (0) 2016.09.07
교보문고 바로콘 링크  (0) 2016.07.15
F1 맥라렌팀 월페이퍼 다운로드 링크  (0) 2015.08.27
하이패스 미납요금 조회 방법  (0) 2015.08.11
도로명 주소 영문으로 표기하기  (0) 2015.08.05
,

테스트용 웹 서버 간단히 구동하기 (Node.js 사용)

1. 연구 모듈/비분류 2017. 6. 9. 06:38

HTML과 자바스크립트 등으로 구성된 웹 서버 소스가 있을 때, 간단히 테스트용 웹서버 구동하기 (Node.js 사용)

  1. 설치 
    npm install -g http-server
  2. 실행 
    http-server <폴더명>


또 다른 방법 (global로 설치 필요없음)

npx http-server <폴더명>
저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js  (0) 2017.07.17
라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
,

티스토리툴바