달란트(Talanton)

리눅스 기본 명령어에 대한 설명을 한다.

1. $ ls

  - 디렉토리에 있는 파일 목록을 보여 준다.

  - $ ls -a    // .으로 숨겨져 있는 파일을 포함하여 파일 목록을 보여 준다.

    + 예를 들어, .profile, .bashrc 등의 파일을 더 볼 수 있다.

  - $ ls -l    // 파일 목록에 대한 보다 자세한 정보를 볼 수 있다.

    + 파일 종류, 억세스 권한, 소유자, 그룹에 대한 정보, 파일 크기, 생성일에 대한 정보를 볼 수 있다.

다음에 계속 기술...

라즈비안 OS를 설치하는 방법은 3가지가 있다.

1. NOOBS 사용방법 : 전체 이미지 다운로드 후 설치

2. NOOBS Lite 사용방법 : 초기 부팅을 위한 부분만 다운로드 받고, 네트워크에 의하여 나머지 부분을 다운로드 받아 설치하는 방법으로 네트워크 기능이 동작하여야 한다.

  - 보통 DHCP로 IP address를 할당하는 체계라면, Ethernet을 연결하면 자동으로 IP address가 할당이 되어 외부와 통신할 수 있게 된다.

3. 라즈비안 OS만 다운로드하여 설치하는 방법 : 다른 OS를 설치하지 않고 전용 라즈비안만 설치 가능

보통 설치환경이 DHCP를 사용하여 IP address를 할당받는 네트워크라면, Ethernet을 연결하면, 최초 NOOBS로 부팅이 될 때, 자동으로 네트워크가 활성화되고, 외부와 통신이 가능하게 된다. 그러면 다른 OS 설치에 대한 정보가 보이게 된다.

고정 IP address를 사용한다면 라즈비안 OS만 설치할 수 있다. 부팅 시 네트워크가 동작하지 않아 다른 OS에 대한 정보가 표시되지 않는다.

따라서 DHCP 서버에 의하여 dynamic하게 IP address를 할당받는 방법이 설치에 용이하다.

라즈베리파이에서 최신 라즈비안 OS인 Jessie를 사용하여 static IP address를 사용하려고 하였더니 어려움이 있었다.

Jessie 버전이 dhcpcd5를 default로 사용하다보니 혼동이 있다.

이에 정리를 해본다.

우선 문제가 DNS 서버에 대한 주소를 어떻게 설정하느냐 인데, 보통 DHCP를 사용하면 DHCP 서버로부터 DNS 서버 주소를 가져오기 때문에 자동으로 설정이 된다.

그래서 /etc/resolv.conf 파일을 보면 DNS 서버 주소가 저장이 되고 그것을 사용해서 DNS 프로토콜이 동작을 하고 domain name에 대한 IP address를 가지고 와서 연결을 해 나간다.

그러나 static IP address를 사용하면 DHCP를 사용하는 것이 아니기 때문에 DNS 서버 주소를 어디에선가 설정을 해주어야 한다.

착각할 수 있는 것이 /etc/dhcpcd.conf에서 static domain_name_server=192.168.0.1 8.8.8.8 이라고 마치 설정을 해주는 것 같은데, 실질적으로 동작을 하지 않는다.

그래서 /etc/network/interfaces에 domain name server 주소를 설정해 주어야 한다. 또한 auth eth0도 꼭 넣어주어야 한다. 즉,

auto eth0

iface eth0 inet manual

dns-nameservers 168.126.63.1 168.126.63.2

/etc/dhcpcd.conf 파일은

interface eth0

static ip_address=192.168.0.142/24

static routers=192.168.0.1

static domain_name_server=168.126.63.1 168.126.63.2 8.8.8.8

PhoneGap을 안드로이드에서 개발하기 위한 방법을 찾던 중에 Adobe PhoneGap에서 제공하는 방법이 있어 따라해 본다. (사이트 주소 : http://phonegap.com/getstarted/)

1. Install our desktop app

  - PhoneGap Desktop app을 다운로드하고 설치한다.

    (C:\Program Files (x86)\Adobe\Adobe Photoshop CS4)

    윈도우 시작 창>Adobe>PhoneGap>Adobe>PhoneGap>PhoneGap Desktop이 설치됨

2. Install our mobile app

  - PhoneGap mobile app을 구글 플레이스토어에서 다운로드하여 설치

3. Create your new PhoneGap app

  - 1번 과정에서 설치한 PhoneGap Desktop을 실행한 후 새로운 프로젝트를 생성한다.

  - template를 선택하고

  - workspace를 지정하고

  - package 명을 지정하고

  - 프로젝트명을 지정하였더니 새로운 프로젝트가 생성이 되었다.

  - 그리고 서버가 내 컴퓨터의 주소에서 수행이 되고 있다고 표시가 되었다.

4. Preview your new app on your device

  - 2번 과정에서 휴대폰에 설치한 앱을 사용하여 3번과정에서 얻은 서버로 접속을 시도 합니다.

  - 그랬더니 앱에 새로 생성한 프로젝트가 수행되었습니다.

5. Write some code & celebrate the world of possibilities!

  - 3번 과정에서 생성한 경로에 가서 서버 프로그램을 하면 된다.

Android studio를 이용해 폰갭 앱을 개발하기 위한 방법을 기술해 본다. (윈도우 7 OS를 기준)

1. node.js를 설치

  - https://nodejs.org/en/ 사이트에서 최신 버전의 Node.js를 다운로드 받는다.

    (작성 시점에서 v6.9.5로 node-v6.9.5-x64.msi 파일)

  - 다운로드 받은 파일을 실행하여 설치한다.

  - 컴퓨터를 다시 시작한다.

  - cmd창을 열고, 다음과 같이 입력하여 phonegap을 설치한다.

    c:> npm install -g phonegap

2. ant 설치

  - http://ant.apache.org 사이트에서 download 사이트로 이동

    (ant.apache.org/bindownload.cgi)

  - 1.10.1 zip archive 파일을 다운로드 (apache-ant-1.10.1-bin.zip 파일)

  - 적당한 디렉토리로 이동 후 압축을 푼다.

  - 환경변수 PATH에 다음을 추가한다.

    + ANT_HOME : ant가 설치된 디렉토리 경로

    + ANDROID_PLATFORM : android sdk에 있는 platform-tools 디렉토리 경로

    + ANDROID_TOOL : android sdk에 있는 tools 디렉토리 경로

    + PATH에  %ANT_HOME%\bin;%ANDROID_PLATFORM%;%ANDROID_TOOL%; 추가

  - cmd 창에서 설치하고자 하는 디렉토리로 이동한 후 다음 명령어를 수행하여 phonegap을 설치

    + C:> phonegap create my-app[경로] com.example.myapp[패키지명] MyApp[프로젝트명]

    + C:> cd my-app

    + C:> phonegap platform add android    // 오랜 시간이 소요

  - Android Studio에서 phonegap이 적용된 프로젝트 생성

    + Android Studio를 시작한다.

    + 위에서 생성한 android platform 프로젝트는 Eclipse 환경의 프로젝트 구조이므로 Android Studio 버전으로 변환한다.

    + 위에서 설치한 디렉토리 my-app의 platforms/android 디렉토리를 기존의 Eclipse ADT로 읽기를 수행하여 import 한다.

    + 프로젝트를 build하고 Run As하여 휴대폰에 앱을 설치하면 PhoneGap 앱이 수행된다.

오늘은 안드로이드에서 웹앱을 만드는 방법에 대하여 기술한다.

참고 : Do it 안드로이드 앱 프로그래밍 3장 웹브라우저 사용하기

예제 파일 : SampleWebView

안드로이드 스튜디오에서 "Import project(Eclipse ADT, Gradle, etc..)" 메뉴를 사용하여 위의 예제 파일을 import 한다. 그러면 안드로이드 스튜디오 버전으로 변경된 프로젝트 SampleWebView1이 생긴다.

이 예제는 기본적으로 휴대폰에 내장된 서버 기능을 가지고 있다.

그래서 assets 디렉토리에 sample.html과 face_angry.png, face_normal.png 파일이 있다.

안드로이드 휴대폰을 사용하는 사용자는 보통 이동통신 요금을 정액제를 사용한다.

그래서 자신의 휴대폰 요금에 맞게 사용할 수 있는 패킷 데이터양이 제한이 있다.

외부의 서버에 접속을 하면 휴대폰내의 앱에서 서버에 접속하여 html, css, js, images 파일들을 통신을 통하여 가지고 와서 동작을 해야 한다. 이처럼 외부 서버를 이용하기 위해서는 서버와의 통신이 필요한 것이다.

그러나 이러한 통신의 양을 줄이는 방법이 외부 서버를 사용하지 않고 자신의 휴대폰에 서버를 구측한다면 통신의 필요성이 줄어들게 되고, 데이터 사용량이 줄어든다.

이 예제에서는 이와 같이 서버 기능을 자신의 휴대폰에 둠으로써 인터넷 사용으로 인한 데이터 사용량의 부담을 완화한 것이다.

그러나 이러한 방법은 내 휴대폰에 앱을 설치하는 순간에 서버의 기능이 고정되어 버린다. 왜냐 하면 html, css, js, images 등 모든 서버의 기능을 담당하는 것이 앱을 설치하는 순간에 다운로드되어 버리기 때문이다.

따라서 웹의 장점인 Dynamic한 부분이 제약이 생긴다. 즉, 새로운 기능을 업그레이드 하려면, 새로운 앱의 버전을 마켓에 등록을 하고 사용자가 다운로딩을 해야 하기 때문이다.

외부 서서를 사용한다면 통신에 대한 부담은 있지만 기능의 확장이나 변경은 용이하다.

그러므로 둘간의 적정한 tradeoff가 필요한다.

SampleWebView1의 동작을 기술하면 아래와 같다.

기본적으로 자신의 휴대폰에 있는 sample.html이 동작한다.

화면의 사진을 클릭하면 사진이 변경됨을 확인할 수 있다.

동작을 자세히 기술하면, 사진을 클릭하면 HTML의 <a>가 동작하여 onClick="window.sample.clickOnFace()" 함수가 동작한다. 그래서 안드로이드 MainActivity.java에 있는 clickOnFace() 메서드가 불리게 된다.

이부분은 안드로이드와 웹의 연동을 하는 부분이다.

사진을 변경하도록 이미지를 눌렀을 때, 안드로이드의 버튼의 글자를 변경해주기 위해서 웹과 앱의 연동을 해주는 것이다.

또한 안드로이드에서 Javascript와 연동하기 위하여 webView.loadUrl(javascript:changeFace('" + myNumber + "')"); 부분이 읶는 것이다. 이것을 통해 안드로이드에서 넘겨준 글자를 message에 보여주고, 사진을 변경하는 것이다.

- 웹에서 안드로이드와 연동

  + <a onClick="window.sample.clickOnFace()">  // 웹에서 안드로이드를 부르는 부분

  + public void clickOnFace() {    // 안드로이드에서 동작하는 부분

       mHandler.post(new Runnable() {

         public void run() {

           loadBtn.setText("클릭수 열기");

         }

      }

    }

- 안드로이드에서 웹으로 연동하는 부분

  + 안드로이드에서 웹으로 시작하는 부분

    String myNumber = "abcd:;    // 안드로이드에서 웹으로 넘겨주는 값;

    webView.loadUrl("javascript:changeFace('" + myNumber + "')");    // 안드로이드에서 웹의 javascript를 호출하는 부분

  + 웹의 javascript에서 동작하는 부분

    function changeFace(input) {

      document.getElementById("face").src = "face_angry.png";    // 이미지를 변경

      document.getElementById("message").innerHTML = input;  // 안드로이드에서 수신한 글자를 보여줌

    }

자신의 PC에 서버를 구축하여 URL 주소를 입력하면 휴대폰에 있는 서버로 접속하는 것이 아니라 서버로 접속을 하게된다. 그러면 서버의 프로그램을 다양하게 변경할 수 있으며, 계속 새로운 앱의 다운로드 없이 서버의 프로그램의 변경으로 새로운 콘텐츠를 제공할 수 있다.

스프링 MV 프로젝트에서 Ajax와 다중 파일 첨부기능을 구현하기 위하여 sample 프로젝트를 만들었다. (긴적인 Hello Spring에 추가되는 사항을 위주로 기술)

1. 환경

- Oracle DBMS

- Eclipse Java EE + Spring plugin

- Tomcat 8.5

2. 기능목록

- 게시글 작성 : 2개의 첨부파일 가능

- 게시글 목록보기

- 게시글 수 가져오기

3. 파일목록

- pom.xml : 파일 업로드, Oracle DBMS driver, JSON 처리 하는 라이브러리를 가져오기 위한 Maven dependency를 추가

- web.xml : UTF-8 encoding filter 추가, 에러 페이지 처리 추가

- servlet-context.xml : 파일 업로드를 위해 multipartResolver 추가, Oracle jdbc driver 추가, SqlSessionFactory 추가, SqlSessionTemplate 추가

- home.jsp 수정사항 : 게시물 목록보기 화면으로 이동하도록 버튼 배치 -> /list 발생

- HomeController에서 /list를 받으면 데이터베이스에서 게시글을 가져와 listView.jsp에 보여 준다.

- listView.jsp : 게시글 목록을 보여주고, 게시글 쓰기 버튼과 게시글 갯수 가져오기 버튼을 둔다.

  + 게시글 추가 버튼을 누르면 /writeForm이 서버로 전달된다.

  + 게시글 가져오기 버튼이 눌려지면 javascript에서 Jquery Ajax를 사용하여 서버에서 게시글의 수를 알아온다.

- HomeController에서 /writeForm을 수신하면 writeForm.jsp을 보여준다.

- writeForm.jsp에서는 게시글을 작성하도록 입력을 받아 서버로 전달한다. (/write에 실림)

  + 제목, 본문, 첨부파일 정보를 실어준다.

- HomeController에서 /write를 수신하면 게시글을 게시글 테이블에 저장하고, 첨부파일을 서버의 특정 디렉토리에 저장하고, 첨부파일 정보를 파일정보 저장 테이블에 저장한다.

  + /list로 redirect 한다.

- HomeController에서 /getCount를 listView.jsp로부터 수신하면

  게시글 테이블에서 게시글의 수 정보를 얻어 listView.jsp의 javascript로 전달한다.

sample.zip

이클립스에서 Spring MVC 프로젝트를 만들어서 ojdbc6.jar 를 적용하는 방법을 기술한다.

보통 pom.xml에 maven dependency를 다음과 같이 적용해준다.

<!-- Oracle Driver -->

<dependency>

<groupId>com.oracle</groupId>

<artifactId>ojdbc6</artifactId>

<version>12.1.0.1</version>

</dependency>

그러면 maven repository에 ojdbc6.12.1.0.1.jar 파일이 생기기는 하지만, Eclipse에서 artifactId가 적용되지 않았다고 하면서 에러가 발생한다.

그러면 다음과 같이 처리를 해주어야 한다.

1. oracle 사이트에 가서 ojdbc6.jar 파일을 다운로드 받는다.

  - 아니면 오라클을 설치한 폴더에서 가져온다. 나는 아래와 같은 폴더에 설치

    (D:\database\app\User\product\11.2.0\dbhome_1\jdbc\lib)

  - 나는 C:\raspberry\driver 디렉토리에 저장하였다.

2. windows OS에서 수행되는 mvn을 다운로드 한다.

  - maven.apache.org/download.cgi 사이트에서 binary zip archive를 다운로드

    (apache-maven-3.3.9-bin.zip)

  - 적당한 디렉토리에 옮겨놓고 압축을 해제한다.

  - 환경설정에서 MAVEN_HOME을 등록한다.

    + File Explorer에서 시스템 우클릭>속성을 선택한다.

    + 고급 시스템 설정을 클릭한 후 환경변수 버튼을 클릭

    + 시스템 변수로 MAVEN_HOME을 mvn을 설치하여 압축을 푼 디렉토리 명을 써준다.

      변수 이름(N): MAVEN_HOME

      변수 값(V) : C:\raspberry\apache-maven-3.3.9

    + 시스템 변수 path에 %MAVEN_HOME\bin을 추가한 후 확인을 눌러 빠져 나온다.

3. command 창을 띄우고 다음을 수행한다.

  C:.> mvn install:install-file -Dfile=C:\raspberry\driver\ojdbc6.jar -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=12.1.0.1 -Dpacking=jar

  - 빌드 success되고, 그러면 ojdbc6.jar 파일이 자신의 PC에 있는 maven repository에 적용이 된다.

4. 이클립스에서 Meven Clean을 하면 error가 사람짐을 알수 있다.

참고 : https://www.mkyong.com/maven/how-to-add-oracle-jdbc-driver-in-your-maven-local-repository/

학원에서 스프링 MVC를 적용하여 프로젝트를 학생들이 하고 있는데 Ajax와 첨부파일을 적용하는 것이 어렵다고 하여 정리해 본다.

나의 작업환경은 다음과 같다.

1. 멀티 게시판 : 하나의 Article 데이터베이스 테이블에 여러 개의 게시판의 게시물을 한꺼번에 저장

  - 게시판 테이블 운영

  - ref, step, depth 체계를 가진 게시판

  - 네이버에서 공개한 스마트에디터 사용

  - 본문에 사진 추가 기능 사용

  - 첨부 파일은 5개 까지 적용 가능

  - 오라클 11g DBMS 사용 : Board, Article, PdsItem 테이블 및 각각의 sequence 운영

2. 스마트에디터에 대한 스프링 MVC 적용

  - 소스코드 위치 : src/main/webapp/resources/smarteditor

  - photo_uploader/popup/attach_photo.js 수정

    + html5Upload() function

      * 본문에 삽입되는 사진을 서버에 저장하기 위한 URL : /contextPath/board/file_uploader_html5 (내부적으로 Ajax 처리)

    + callFileUploader() function

      * sUrl : 'contextPath/board/file_uploader'

      * sCallback : 'resources/smarteditor/photo_uploader/popup/callback.html'

  - writeForm.js 수정 : 게시판 쓰기를 위한 jsp 파일의 javascript 파일

    + nhn.husky.EZCreator.createInIframe 수정

      nhn.husky.EZCreator.createInIFrame({

        oAppRef: editor_object,

        elPlaceHolder: "smarteditor",

        sSkinURI: ctx + "/resources/smarteditor/SmartEditor2Skin.html", 

        htParams : {

            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseToolbar : true,             

            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseVerticalResizer : true,     

            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

            bUseModeChanger : true,

            fOnBeforeUnload : function(){

            }

         }

       });

    + 전송 버튼을 눌렀을 때 처리 : 가비지 컬렉션 처리를 위해 먼저 사진 파일에 대한 관리를 먼저하고, 이후 첨부파일에 대한 저장을 처리

      $("#addBtn").click(function(){

        //id가 smarteditor인 textarea에 에디터에서 대입

        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);

        // 이부분에 에디터 validation 검증

        var el = document.createElement('html');

        el.innerHTML = editor_object.getById["smarteditor"].elPlaceHolder.value;

        var imageF = el.getElementsByTagName('img');

        var url = ctx + "/board/file_uploader_real";

        var params = "";

        for(var i = 0;i < imageF.length;i++) {

          if(i == 0)

            params += ("src=" + imageF[i].src + "&title=" + imageF[i].title);

          else

            params += ("&src=" + imageF[i].src + "&title=" + imageF[i].title);

        }

        sendRequest(url, params, callbackFunction, "POST");

        callTimerProcessing();

      })

      function callTimerProcessing() {    // 사진에 대한 처리를 보장하기 위해 loop를 돌다, 응답이 오면 처리

    if(loop) {

      setTimeout(function() {

           callTimerProcessing();

          }, 100);

    }

    else {

          //폼 submit

          $("#frm").submit();

    }

      }

서버에서 처리는 다음에 ...