[겉핥기 프로젝트] 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
,

테스트용 웹 서버 간단히 구동하기 (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
,

Atom 에디터에서 Markdown -> 마인드맵 변환하기

1. 연구 모듈/비분류 2017. 2. 12. 01:05

사전 준비사항


Atom 에디터에서 Markdown -> 마인드맵 변환하기 위해서는 markdown-mindmap 패키지 설치가 필요하다.


사용 방법


아래와 같이 헤드라인 요소를 사용하여 작성한 내용을 마인드맵으로 변환할 수 있다. <h1> ~ <h6>까지만 존재하므로 최대 깊이는 6으로 제한된다.

# Root Node
## Node 1
### Node 1-1
### Node 1-2
## Node 2
### Node 2-1


Packages 메뉴에서 Mindmap view를 켜면 아래와 같이 변환된 내용을 볼 수 있다.



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

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

라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
[C++] STL map 사용시 주의사항  (0) 2016.11.22
,

Perl을 사용하여 Markdown -> HTML로 변환하기

1. 연구 모듈/비분류 2017. 2. 11. 04:52

설치

  1. Perl 프로그램을 설치한다. 여기서는 윈도우용 구현체 중 하나인 Strawberry Perl을 사용한다.


  2. 마크다운 본진에서 마크다운 스크립트를 다운받는다.


사용법

  1. 결과를 화면으로 출력 
    perl markdown.pl inputfile.txt
  2. 결과를 파일로 저장 (헤더는 붙지 않는다) 
    perl markdown.pl inputfile.txt > outputfile.html


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

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

테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
[C++] STL map 사용시 주의사항  (0) 2016.11.22
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (Maven - 커맨드라인 개발환경)  (0) 2016.09.07
,

[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)

1. 연구 모듈/비분류 2016. 12. 2. 06:13

사전 설치 요구사항

  • JDK 8
  • Eclipse EE버전


설치

  1. Eclipse를 실행한다.
  2. Help -> Eclipse Marketplace 메뉴를 실행한다.
  3. vaadin으로 검색한다.
  4. Vaadin Plugin for Eclipse를 설치한다.


프로젝트 생성

  1. File -> New -> Project 메뉴를 선택한다.
  2. Vaadin/Vaadin X Project 항목을 선택 후, 다음을 누른다.
  3. 프로젝트 명을 입력한다.
  4. 기본적인 예제 코드를 포함하는 프로젝트가 생성된다.


프로젝트 실행

  1. 프로젝트 오른쪽 클릭 후, Run As -> Run On Server 메뉴를 선택한다.
  2. Next 버튼을 누른다.
  3. 실행할 프로젝트를 왼쪽에서 오른쪽으로 이동 후, Finish 버튼을 누른다.


<테스트 환경>
OS : Windows 7
Eclipse 버전 : Mars
Vaadin Plug-in 버전 : 2.3.6
저작자표시 비영리 동일조건

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

Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[C++] STL map 사용시 주의사항  (0) 2016.11.22
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (Maven - 커맨드라인 개발환경)  (0) 2016.09.07
SyntaxHighlighter 적용하기 위한 태그 & 언어 종류  (0) 2015.08.28
,

[C++] STL map 사용시 주의사항

1. 연구 모듈/비분류 2016. 11. 22. 05:59


레퍼런스에 있는 내용이지만, 자주 까먹는 내용..


STL map 사용시, [] 연산자를 사용하여 참조를 할 때, 해당 엔트리가 없을 경우 엔트리가 추가된 후 NULL이 리턴된다.



map<A, B> some_map;


...


C = some_map[D];




엔트리가 추가되는 것을 원하지 않을 경우, find() 함수를 사용하여 미리 확인 후 참조하여야 한다.


if (some_map.find(D) != some_map.end()) {

  C = some_map[D];

}







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

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

Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (Maven - 커맨드라인 개발환경)  (0) 2016.09.07
SyntaxHighlighter 적용하기 위한 태그 & 언어 종류  (0) 2015.08.28
[TortoiseSVN] 커맨드 프롬프트 상에서 TortoiseSVN 기능 사용하기  (0) 2015.07.22
,

티스토리툴바