Spring Boot 사용 시 Login 페이지가 계속 뜬다면,

Security Check를 하도록 설정된 것으로 pom.xml 파일 내 다음이 있는지 체크하여 제거할 것!

    <dependency>

      <groupId>org.springframework.boot</groupId>

      <artifactId>spring-boot-starter-security</artifactId>

    </dependency>

npm install 시 phantomjs 권한 오류가 날때

npm으로 패키지 설치 시 phantomjs 어쩌구 권한이나 Access 오류가 날 경우 npm에 --ignore-scripts 옵션을 주자.

AmazonS3Client 사용 중 NoSuchMethodError 예외 발생시

AmazonS3Client 사용 중 다음과 같이 NoSuchMethodError 예외 발생한다면,

java.lang.NoSuchMethodError: com.fasterxml.jackson.core.JsonFactory.requiresPropertyOrdering()Z
com.fasterxml.jackson.core.JsonFactory.requiresPropertyOrdering()Z
com.fasterxml.jackson.databind.ObjectMapper.<init>(ObjectMapper.java:472)
com.fasterxml.jackson.databind.ObjectMapper.<init>(ObjectMapper.java:391)
com.amazonaws.internal.config.InternalConfig.<clinit>(InternalConfig.java:43)
com.amazonaws.internal.config.InternalConfig$Factory.<clinit>(InternalConfig.java:304)
com.amazonaws.util.VersionInfoUtils.userAgent(VersionInfoUtils.java:139)
com.amazonaws.util.VersionInfoUtils.initializeUserAgent(VersionInfoUtils.java:134)
com.amazonaws.util.VersionInfoUtils.getUserAgent(VersionInfoUtils.java:95)
com.amazonaws.ClientConfiguration.<clinit>(ClientConfiguration.java:60)
com.amazonaws.ClientConfigurationFactory.getDefaultConfig(ClientConfigurationFactory.java:46)
com.amazonaws.ClientConfigurationFactory.getConfig(ClientConfigurationFactory.java:35)
com.amazonaws.services.s3.AmazonS3Client.<init>(AmazonS3Client.java:310)
...

jackson-core와 함께 jackson-databind도 포함되어 있는지 확인해 보고 추가되어 있지 않다면 추가하자.



Ubuntu Desktop 설치 및 XRDP 설치

sudo apt-get update
sudo apt-get install ubuntu-desktop

sudo apt-get install xrdp
sudo apt-get install mate-core mate-desktop-environment mate-notification-daemon

/etc/xrdp/startwm.sh
. /etc/X11/Xsession 위쪽에 다음 추가
mate-session

sudo /etc/init.d/xrdp restart





Cordova platform 추가 시 Api.js가 없다고 하면~

Cordova 프로젝트에 플랫폼을 추가할 때 다음과 같은 메시지가 나온다면,

  Error: Your XXXX platform does not have APi.js

관리자 권한 (sudo)로 해 볼 것! 권한문제로 추가할 플랫폼 파일을 쓰지못해 발생하는 경우가 있음.

Cordova run (or emulate) target 바꾸기

브라우저에서 cordova 프로젝트를 실행하려면, "cordova run browser" 명을 사용하면 된다. 그럼 기본으로 설정되어 있는 브라우저에서 실행된다.

여러 이유로 다른 브라우저에서 실행하고 싶다면 --target 옵션을 주면된다. 그리고 이 옵션에 어떤 값을 사용할 수 있는 지 알려면 "cordova run browser --list" 명령을 이용하면 된다. 그런데 이게 잘 안 나온다. 그래서 그냥 해 봤는데 다음과 같이 하면 다른 타겟에서 실행할 수 있다.

Browser의 경우

FireFox에서 실행시키려면 --target=firefox

Android의 경우

--target=emulator-5554 (5554는 Android 에뮬레이터의 포트번호)

Cordova Project를 Android Project에 합치기

1. CordovaLib Module로 추가

2. Android Main Module의 Dependency에 CordovaLib 추가

3. Android Main Module에 Cordova 프로젝트의 assets, platform_www, src 복사

4. AndroidManifest.xml에 Cordova 프로젝트의 내용 추가. <activity>, <service> 등.

  - 시작 Activity를 나타내는 action.MAIN 수정

  - 내용 중 일부 수정해야 함.

5. Cordova 프로젝트의 res/xml/config.xml 파일을 Android Main Module의 같은 위치에 복사.

  - 이거 안 하면 class not found 오류 나옴.

Touch Event 처리용 JavaScript 라이브러리 Hammer.js

모바일 WebApp 개발 중 Swiping (혹은 Panning) 이벤트로 처리해야 할 부분이 있었는데 mouse(혹은 touch) up, down, move 등의 이벤트로 구현하려니 성능 및 사용자 경험이 안 나와서...

뒤져 보니 Hammer 라는 좋은 라이브러리가 있네요.

http://hammerjs.github.io 참고.

Easing Effect 참고자료

Easing Effect가 어떤 것인지 궁금하면 아래 참고.

http://easings.net/ko

결국 이 효과를 주기 위해, 속성 값을 시간에 따라 효과에 맞게 변화시키는 함수가 필요하게 됨. 이건 아래에 있음

http://gsgd.co.uk/sandbox/jquery/easing/

재미있네요.

NGINX 설치 및 간단한 사용법

AWS EC2를 Amazon Linux AMI로 생성한 후 NGINX를 설치할 때의 방법 및 환경에 대해 정리한 내용임.

설치환경: AWS EC2 + Amazon Linux AMI

설치 방법 (참고: https://nginx.org/en/linux_packages.html)

1. Repository 설정

/etc/yum.repos.d/nginx.repo 파일에 다음과 같이 설정

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1

baseurl 중 OS는 rhel, OSRELEASE는 7로 설정함.

2. 설치

sudo yum install nginx

3. 실행

nginx

4. 컨트롤 명령

nginx -s [stop|quit|reload|reopen]

• stop: fast shutdown
• quit: graceful shutdown
• reload: 설정 파일을 다시 로딩
• reopen: 로그 파일을 다시 열기

5. ROOT 경로

/usr/share/nginx/html

6. 로그 파일 경로

/var/log/nginx/access.log

7. 설정 파일 변경

설정 파일 위치: /etc/nginx/nginx.conf

https://nginx.org/en/docs/beginners_guide.html 참고

http://kwonnam.pe.kr/wiki/nginx/location

* 아래와 같이 path와 파일명의 앞과 일치하는 경우 계속 redirection 하다가 오류가 나는 현상이 있음.

    location /send {

        # return 302 /sender.html;

        rewrite .* /sender.html;

    }

* HTTP를 HTTPS로 전환하려면, 다음과 같이 수정

    server {

        listen       80 default_server;

        listen       [::]:80 default_server;

        server_name  localhost;

        return 301 https://$host$request_uri;

    }

https://www.bjornjohansen.no/redirect-to-https-with-nginx 참고함.

Java 프로세스 메모리 덤프 및 분석하기

jmap을 이용하여 지정한 Java 프로세스의 메모리를 덤프할 수 있다.

사용법: jmap [option] <pid>

서버 내 실행 중은 Java 프로세스의 pid (Process ID)를 지정. Core dump나 저멀리 있는 서버 내 프로세스의 메모리도 덤프할 수 있다. (jmap 설명서 참고)

[option]에는 다음과 같은 것들이 들어감.

• -heap : Heap 요약 정보를 표시함.
• -histo[:live] : 메모리를 할당 받은 java object를 히스토그램으로 표시함. 부가 옵션 live가 지정되면 살아있는 object만 counting 함.
• -permstat : GC 설명할 때 나오는 Permanent 영역에 대한 통계 정보를 출력함.
• -finalizerinfo : GC가 되기를 기다리고 있는 object의 정보를 출력.
• -dump:[live,]format=b,file=<file> : hprof 바이너리 형태의 메모리 덤프 파일을 생성함. live를 넣으면 실제 활동(?) 중인 obejct에 대한 것만 덤프됨.

jmap -dump:format=b,file=a.dump 123 와 같이 실행하면 (123은 PID) 123에 해당하는 java process의 메모리 덤프가 a.dump 파일로 생성된다. 문제는 a.dump는 바이너리 파일이라 그냥 볼 수 없다. 하지만 Eclipse에서 제공하는 메모리 분석 툴로 이 파일을 읽으면 메모리 상태 및 다양한 분석을 할 수 있다. http://www.eclipse.org/mat/ 참고.

추가로 jmap 실행 시 다음과 같이
Error attaching to process: sun.jvm.hotspot.debugger.DebuggerException: Can't attach to the process
연결할 수 없다는 메시지가 나오면 root 권한으로 실행하면 된다.

JVM Thread Dump 생성하기

-XX:OnError="kill -3 %p" --> 오류가 발생했을 때 지정한 명령어가 실행됨.

-XX:OnErrorFile=파일이름 --> JVM에서 발생한 Fatal Error 로그 파일 위치 지정

-XX:+PrintConcurrentLocks --> 스레드 정보 출력 시 Lock의 상태 출력

-XX:+PrintClassHistogram --> 클래스별로 점유하고 있는 메모리 히스토그램 출력

스레드 Dump 생성 방법

1. kill -3 [PID] QUIT 시그널을 보냄. -3이 QUIT인지는 kill 매뉴얼에서 확인해야 함.

2. jstack [PID]

3. Ctrl-\

1이 가능 무난함.

System.out으로 Dump 생성되니 java ##### > $$$$$.txt & 와 같이 실행해 놓아야 함.

스레드 Dump 분석 방법: TDA (Thread Dump Analyzer) 이용. GNU License 공개 툴

ps -Lf -p [PID] --> 프로세스의 스레드까지 확인 가능 (LWP)

출처: 자바 개발자와 시스템 운영자를 위한 트러블 슈팅 이야기 (이상민, 2011)

[Tomcat] tomcat unable to process jar entry ~ for annotations 예외 발생 시

서블릿을 찾으려고 jar 파일을 스캔할 때 발생하는 오류임.

해당 jar 파일이 스캔할 필요가 없는 경우라면,

1. Tomcat 7에서는 catalina.properties에서 tomcat.util.scan.DefaultJarScanner.jarsToSkip 에 해당 jar 파일명 혹은 패턴을 추가함.

2. Tomcat 8에서는 1과 같이 조치하거나, context.xml에서 <JarScanFilter> 부분에 추가하면 됨.

참고: http://wiki.apache.org/tomcat/HowTo/FasterStartUp

netty에서 제공하는 기본 코덱

* base64 코덱

* bytes 코덱: 바이트 배열 데이터레 대한 송수신 지원

* compression 코덱: 송수신 데이터의 압축을 지원하는 코덱. 4.0은 zlib, gzip, Snappy 지원. 4.1은 BZip2, FastLZ, LZ4, LZF 지원 예정

* http 코덱:

HTTP를 지원하는 코덱으로 하위 채키지에서 다양한 데이터 송수신 방법을 지원함.

HTTP 코덱의 세부 구현체로 HTTP의 CORS(Cross Origin Resource Sharing) 송수신을 지원하는 cors 코덱,

파일 송수신과 같은 multipart 요청과 응답을 지원하는 multipart 코덱,

웹 소켓 프로토콜의 데이터 송수신을 지원하는 websocketx 코덱

NOTE: CORS는 현재 접속한 웹 서비스 도메인에서 다른 도메인에 존재하는 URI 호출을 허용하는 것을 말함.

* marshalling 코덱

마샬링: 객체 --> 네트워크 패킷

언마샬링: 네트워크 패킷 --> 객체

JBoss marshalling 라이브러리 이용: http://jbossmarshalling.jboss.org/

* protobuf 코덱

구글의 프로토콜 버퍼를 사용한 데이터 송수신 코덱

* rtsp 코덱

RTSP(Real Time Streaming Protocol). 오디오와 비디오 같은 실시간 데이터를 전달하기 위한 Application 레벨의 프로토콜.

실시간 동영상 스트리밍 제어 프로토콜임.

* sctp 코덱

TCP가 아닌 SCTP 전송 계층을 사용하는 코덱.

Bootstrap의 채널을 NioSctpChannel 혹은 NioSctpServerChannel을 사용해야 함.

* spdy 코덱

구글의 SPDY 프로토콜 지원 코덱.

* string 코덱

문자열 송수신을 지원. 첼넷이나 채팅 서버용 프로토콜에 사용.

netty 예제 중 TelnetServer 참고

* serialization 코덱

자바의 객체를 네트워크로 전송할 수 있도록 직렬화와 역직렬화를 지원하는 코덱.

JDK의 ObjectOutputStream 및 ObjectInputStream과 호환되지 않음!!

출처: 자바 네트워크 소녀 Netty (정경석 저, 한빛미디어)

[Linux] HDD와 메모리 속도 측정

sudo /sbin/hdparm -tT /dev/sda

 Timing cached reads:   26558 MB in  2.00 seconds = 13291.92 MB/sec <-- 메모리

 Timing buffered disk reads:  74 MB in  3.04 seconds =  24.37 MB/sec <-- HDD

HTML5 Intermediate 5일

* 서버와 클라이언트의 MVC 모델

* Client의 MVC 모델을 구현한 라이브러리: Backbone, Angular JS.

* JS는 모든 것이 객체이다. function 도 객체임.

- 함수, 변수 등을 선언하면 window 객체의 멤버가 되어 Global하게 사용할 수 있음.

* 일반 JS 메소드에서 this는 window 객체임. --> window를 생략할 수 있으므로 함수처럼 보이는 것임.

- 엄밀히 말하면 JS에서는 함수라는 것이 없음. 함수처럼 보이는 애들은 모두 메소드이며 특정 경우 객체를 생략할 수 있으므로 함수로 보이는 것임.

- 생략된 객체는 경우에 따라 달라짐. 보통의 경우는 windows 객체이며, Worker의 JS 파일에서는 Worker를 의미함.

- Worker JS에 다음과 같은 코드가 있다고 할 때 postMessage()는 worker의 것을 호출함.

function loadHandler() {

if( xhr.status === 200 ) {

/* 여기서 this는 xhr 객체임. 따라서 this.postMessage()로 호출하면 안됨. */

postMessage( new Protocol(2, xhr.responseText) );

}

else {

postMessage( new Protocol(2, '통신 오류 발생: ' + xhr.status) );

}

}

xhr.addEventListener('load', loadHandler);

-

* 이벤트 핸들러에서 this를 사용하면 그 이벤트 핸들러를 추가한 객체를 의미함.

- btn.onclick = function() { this. ~ } ==> this는 btn임.

* 서버와 통신 방식 비교

방식	Req-Res	Async	bidirection
form	X	X	X
AJAX	O	△	X
Web Socket	O	O	O

* Web Socket은 클라이언트의 표준임.

* Web Socket은 기본적으로 utf8을 이용함.

* Web Socket 서버 라이브러리 JavaDoc (tomcat 7.0)

- http://tomcat.apache.org/tomcat-7.0-doc/websocketapi/index.html

* Web Socket Binary 통신은

- AJAX에서 파일을 주고 받을 때와 같이 사용됨.

- blob 이라는 놈을 사용해야 함.

* 포커스를 잃을 때 발생하는 이벤트: blur

* 포커스를 얻을 때 발생하는 이벤트: focus

* Drag & Drop 하려면 draggable 속성이 true이여야 함. 이 속성은 모든 Tag에 적용될 수 있음.

HTML5 Intermediate 4일

* 팝업창에서 부모 창을 나타내는 객체: window.opener

- 부모 창에서 iframe 윈도우 객체: iframeTag.contentWindow

- 부모 창에서 팝업창 윈도우 객체: 

--> window.open(URL, name, features, replace)의 리턴값이 팝업창의 윈도우 객체임.

- 각 윈도우 객체의 postMessage()로 해당 윈도우에게 메시지를 보낼 수 있음.

* Cross Domain

- 보낼 window의 핸들을 얻을 수 있는 경우에만 가능

- 

* Web Worker

- worker thread는 웹 페이지에서 발생하는 이벤트를 받거나 직접 핸들링 할 수 없음.

- worker thread에는 window 객체가 없음 --> UI 작업에 제한이 따름.

- 메인 쓰레드에서 사용자 인터페이스 및 UI 작업을 하고 오래 걸리는 작업 등을 worker thread로 처리.

* BOM : Browser Object Model. 자바스크립에서 브라우저를 핸들링하기 위하여 제공되는 객체의 모델.

- window: 다음의 브라우저 관련 객체를 제공

-- document

-- location

-- history

-- navigator

-- screen

* Main 스레드 <--> Worker 쓰레드 간 통신: Cross-Domain의 API와 동일하게 사용할 수 있음.

- postMessage() 할 때 객체 자체를 보낼 수 있음. 어짜피 같은 브라우저에서 실행되는 것이므로 가능.

* 일반 함수에서 this는 window 객체임. Worker용 JavaScript 파일에서 this는 Worker임.

* Worker 스레드에서 사용할 수 있는 window 객체

- XMLHttpRequest

- create other web workers --> 권장하지 않음.

- applicationCache : offline web cache 기능 제공 객체. 서버와의 데이터 동기화 작업을 수행함.

- navigator : 브라우저 자체의 정보 제공 객체. Worker에서는 geolocation 정보는 가져올 수 없음.

- location : 브라우저의 주소창. 이를 이용하여 URL 정보 등을 알 수 있음. Worker에서는 페이지 전환을 시킬 수 없음.

- setTimeout method

- clearTimeout method

- setInterval method

- clearInterval method

- importScripts method : importScripts('경로명', '파일명', '경로명', '파일명', ....)

* GET 방식에서 파라미터에 한글을 지원하려면

- Tomcat 서버의 server.xml 파일에서 <Connector> 부분에 URIEncoding 방식을 추가해야 함.

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8" />

* Web Cache

- window.applicationCache 존재 여부로 지원 여부를 알 수 있음.

- Manifest 파일을 생성: Cache할 정보를 담고 있음.

- <html manifest='notes.manifest'> 와 같이 지정하면 notes.manifest를 브라우저가 받아 옴.

- Web Cache되는 컨텐츠는 동일 서버에 있는 것만 가능함.

- 외부 리소스를 참조하는 경우라면 로컬 서버에 가져다가 놓아야 함.

- manifest 파일은 다음과 같아야 함.

CACHE MANIFEST <-- 꼭 이 문장으로 시작

# v = 1.0.0 <-- 버전 정보. 이 값이 바뀜에 따라 캐싱이 다시 이루어짐.

./style.css <-- 여기부터 캐시할 리소드들을 쭉 나래비 함.

./notes.js

- <html manifest='notes.manifest'> 가 등록된 HTML 파일 당연히 캐시됨으로 위에 명시할 필요 없음. 명시해도 됨.

- 개발자 도구 다음에서 확인 가능.

- window.applicationCache의 update()를 호출해야 변경 내용을 새로 받음.

- Web Cache을 이용할 때는 업데이트 가능한 상태로 컨텐츠를 배포해야 함. 중요!!!

- Offline에서 Online이 되는 순간 업데이트 되도록 할 수 있음. navigator 객체 이용. navigator.onLine로 Online 여부를 확인할 수 있음.

- window.addEventListener('online', onlineHandler); 이용하여 Online으로 바뀌었는지 여부 확인 가능

Eclipse에 등록된 Tomcat 서버 설정 변경

Servers 창에서 등록된 서버 더블 클릭하면 다음과 같은 Tomcat 설정 화면이 나타남.

이 화면에서 포트 등 설정을 변경할 수 있음.

HTML5 Intermediate 3일

* Web Cache: Offline에서도 Web App을 사용할 수 있도록 데이터를 저장하는 기능

--> Client Storage로 가능해졌음.

* localStorage의 값 navigation: localStorage.lengh, localStorage.key(index) 이용.

* localStorage의 변경 이벤트

- window.addEventListener('storage', onChanged);

- function onChanged(event) { ... }

- event의 속성 중 key, oldValue, newValue, url(변경한 URL) 이용

* localStorage 데이터 저장 위치: Chrome Windows의 경우

- C:\Users\icore\AppData\Local\Google\Chrome\User Data\Profile 1\Local Storage

- 버전 및 사용자에 따라 조금 달라지.

* Custom Attribute:

- XXX.setAttribute('data-id', value) 와 같이 지정

- 단, 'data-'로 시작하여야 함.

- 설정: setAttribute(key, value)

- 값 가져오기: getAttribute(key), XXX['data-YYY']와 같이 사용할 수 없음.

- 제거: removeAttribute(key)

* 태그의 형태 구분: 다음 참조.

var notesClickHandler = function(event) {

/* 자식 노드 중 li 태그만 처리하고자 할 경우 아래와 같이 함.

* event.target : 실제 이벤트를 발생시킨 객체

* contructor 속성이 객체를 생성하기 위한 모든 정보를 가지고 있음.

*/

if(event.target.constructor === document.createElement('li').constructor) {

loadNote(event.target.getAttribute('data-id'));

}

};

* Indexed DB

var req = window.indexedDB.open('simpleDB', 1); /* (이름, 버전) */

/* 세 개의 이벤트 핸들러 */

req.addEventListener('success'); /* 정상적으로 오픈한 경우 */

req.addEventListener('upgradeneeded'); /* 생성하려는 DB가 없는 경우 발생. */

req.addEventListener('error'); /* 오픈 시 오류가 발생한 경우 */

HTML5 Intermediate 2일

audio 태그 예제

* addEventListener의 마지막 인수 : event bubbling, event capturing 여부 지정.

- bubbling 시 자식이 이벤트를 처리해도 부모에게 전파됨.

* 객체의 속성 존재 여부 판단: if( navigator.geolocation ) --> if( 'geolocation' in navigator )

* JavaScript에서

- 100 OR 200 ==> 100 - 처리과정: 100 --> OR --> 끝 ==>100

- 100 AND 200 ==> 200 - 처리과정: 100 --> AND --> 200 --> 끝 ==> 200

* Client Storage

1. Web Storage: Key-Value 형태. 복잡한 데이터를 담기에는 역부족.

2. Web SQL: 크롬과 사파리에 구현되어 있으며 sqllite3로 구현. 특정 제품에 종속된다는 이유로 HTML5 표준 스펙에서 빠짐. 모질라 계열(파이어 폭스)에서 반대함.

3. Indexed DB: Web SQL이 스펙에서 빠지면서 포함됨. 객체 저장소 제공. 저장된 객체에 인덱스를 부여하여 빨리 찾을 수 있도록 함.

* Web Storage:

- localStorage: 도메인 별로 값을 영구 저장하는 저장소. 변경 이벤트 제공 --> 동기화 작업 가능. 같은 도메인의 여러 어플리케이션에서 공유할 수 있음.

- sessionStorage: 임시 저장소. 한 어플리케이션에서 사용하는 임시 데이터. 다른 어플리케이션에서 이 값을 읽을 수 없음. Browser를 닫았을 때 값이 없어지며, 같은 Browser 인스턴스에서 F5로 갱신하거나 다른 곳에 다녀와도 지워지지 않음.

- 둘 다 window 객체의 속성으로 제공됨.

- 둘을 사용하기 위한 API는 동일함.

- 기본적인 API

-- storage.setItem(key, value) : 데이터 저장. key는 문자열, value도 문자열.

-- storage.getItem(key) : 데이터 반환

-- removeItem(key) : 데이터 제거

-- clear() : 데이터 모두 제거. 주의해서 사용해야 함!!

* window 객체의 메소드 및 속성을 사용할 때는 'window.' 쓰지 않아도 됨.

* JavaScript 객첵 생성 방법

1. 암시적 방법

var obj = { name: '홍길동', age: 24, married: true }

2. 명시적 방법

function People() {

  this.name = '홍길동';

  this.age = 24;

  this.married = true;

}

var obj = new People();

* JSON --> Object : JSON.parse(JSON 문자열)

* Object --> JSON : JSON.stringify( object )

* JavaScript의 Type: 총 6가지임

- Primitive Type: string, number, boolean

- Reference Type: function, object(Array 포함)

- undefined

- 이 중 function, undefined는 JSON으로 표현 안됨.