Code Muri

요즘 인터넷 강의를 자주 듣다보니 PC 에서 무선 헤드셋으로 들으면 좋겠다는 생각이 들었다. 무선 헤드셋 한 녀석이 오래동안 놀고 있었는데... 너무 아까운 녀석이었다. 팔지도 못하고 쓰지도 못하는 자그마치 그 이름하여 비트 솔로 3 와이어리스.. 아시는 분은 아시겠지만 가격이 좀 있는 녀석이었는데 에어팟만 쓰다보니 먼지만 쌓여 있었다.

​

가끔 PS4 도 즐기다 보니 이것도 덤으로 헤드셋으로 게임하면 좀더 몰입할 수 있지 않을까라는 생각이 들었는데.......

​

그래서 블루투스 동글이 검색을 위해 인터넷을 서핑하다가 BT-W2 를 추천하는 글을 보았다. 궁금해서 검색해보니 BT-W3 라는 녀석이 출시되었고 고민고민 하다 결국 지름신이 강림하여 원래 막 비교하고 있던 만원 언저리인 블루투스 동글이가 아닌 좀 값이 나가는 BT-W3 를 구입하게 되었다는 거.

​

오늘 도착해서 개봉하였다.

​

아래 사진 처럼 포장되어 있고 크기는 에어팟을 기준으로 비교해 보았다.

처음에는 PC 에 연결 후 비츠 솔로 와이어리스에 연결해 보려 했다.

​

하도 안쓰던 걸 쓰려다 보니 비츠 솔로의 페어링 방법을 몰라서 한참을 헤매었다.

BT-W3 도 설명서가 뭔가 불친절하고 갑자기 막 답답했는데 흥분하지 않고 침착하게 네이버를 뒤적여서 무사히 페어링을 하게 되었다.

​

BT-W3 는 PC 에 연결만 하면 따로 설정이 필요치 않았다. 페어링이 되어 있지 않으면 파란색 LED 가 깜박이고 있는데, 이를 비츠 솔로 같은 블루투스 헤드셋과 페어링을 해주면 파란색이 깜박이지 않고 멈춘다. 그때부터 PC 에서 재생되는 소리를 헤드셋으로 들을 수 있었다.

​

아래는 PC 에 연결한 사진.

그리고 바로 PS4 에 연결해서 테스트 해보기로 했다. PS4 에 위 BT-W3 를 그대로 USB 에 연결해 준다. PS4 는 PC 와 달리 설정이 필요한데

​

"설정 > 오디오 기기" 에서 "헤드폰에 출력" 을 "모든 오디오"로 해주면 되었다.

여기서 정말 맘에 들었던 거는 BT-W3 와 헤드셋이 페어링이 된 이후에는 PC 에서 PS4 로, PS4 에서 PC 로 연결을 바꾸어도 페어링을 다시할 필요가 없다는 것이었다.

​

앞으로 이녀석과 친해져서 무선의 편리함을 즐겨야겠다.

요즘 Logitech M705 마우스를 사용하고 있는데, 평소 가운데 휠 버튼을 자주 사용하는데 이 마우스는 가운데 버튼을 누르면 잘 동작하지 않아서 너무 불편하다고 생각했다.

그래서 다른 마우스를 사려고 몇주동안 검색만 하다가 딱 맞는게 없어서 구입을 안하고 있었는데, M705 의 엄지 버튼을 가운데 휠로 사용하니 문제가 해결되었다.

로지텍의 초고속 휠은 스크롤은 편한데 내가 자주 사용하는 가운데 버튼이 잘 눌러지지 않아서 못쓰겠다고 생각했는데 그냥 엄지 쪽에 있는 버튼을 가운데 버튼으로 사용하니 문제가 해결되었다.

그래서 가운데 버튼을 대체하는 엄지 버튼을 막 테스트해보다가 새로운 걸 알았다.

1. 크롬이나 익스플로어의 탭에서 마우스 가운데 버튼을 누르면 창이 닫힌다. 와우!

2. 원래 알고 있는 기능인데 태스크바에서 실행 중인 앱 위에서 마우스 가운데 버튼을 누르면 하나 더 실행된다.

휴, 돈 굳었다. ㅋ

참고: 

Preventing XSS (Cross Site Scripting) in Javascript

XSS (Cross Site Scripting) Prevention Cheat Sheet

Google Application Security - XSS

XSS 를 피하기 위해서는, HTML 을 직접 추가하는 것을 피해야 한다. DOM 의 .html(), .innerHTML 을 사용하지 말고, 대신 .append(), .prepend(), .before(), .after() 등을 사용해야 한다.

위험한 예)

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var link = '<a href="' + data.url + '">' + data.title + '</a>';
 
    jQuery( '#my-div' ).html( link );
});

data.title 이 만약 <script>alert( "haxxored");</script>;? 을 포함하고 있다면?

대신, 올바른 접근 방법은 프로그래밍적으로 새로운 DOM 노드를 생성하고, 이를 해당 DOM 에 추가해야 한다.

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var a = jQuery( '<a />' );
    a.attr( 'href', data.url );
    a.text( data.title );
 
    jQuery( '#my-div' ).append( a );
});

jQuery 또는 브라우저의 DOM API 를 통해서 데이터를 전달함으로써, 값들이 적절하게 변환되고 (sanitized) 안전하지 않은 HTML 이 페이지에 추가되는 것을 제거한다.

※ 성능은 HTML 직접 삽입하는 방식(.html, .innerHTML)이 기술적으로 더 빠르다, 이유는 브라우저가 HTML 을 파싱하는데 최적화 되어 있기 때문이다. 최적의 방법은 메모리에 최대한 큰 오브젝트를 만들고 이를 한번에 DOM 에 추가함으로써 DOM 노드의 추가를 최소화 하는 것이다. 

<< 웹뷰 자바스크립트 디버깅하기 >>

참고 : http://blogs.perl.org/users/mark_leighton_fisher/2011/09/debugging-javascript-in-a-webbrowser-control-from-vs2010.html

You can debug JavaScript executing inside a WebBrowser control embedded in your .NET 4.0 application from VS2010 (Visual Studio 2010), but it takes a little effort.

1. Enable Script Debugging (both IE and Other) in Internet Explorer.
2. Disable friendly HTTP messages in Internet Explorer.
3. Enable Display a notification about every script error in Internet Explorer.
4. Modify VS2010 to debug Script from the Attach Process dialog. Please note that you cannot debug both JavaScript (Script) and .NET 4.0 code at the same time. (I don't know why.)
5. Add a debugger statement at the start of your JavaScript.
6. Start your WebBrowser-embedded application without debugging (Ctrl-F5).
7. When your application hits the JavaScript debugger; statement, select your current instance of VS2010.
8. Voilà! You can now debug the JavaScript executing inside the WebBrowser control in your .NET 4.0 application. 

Open Internet Explorer, go to Settings, tab Advanced, and, in the “Navigation” section:

• Uncheck “disable script debugging” (both IE and Other)
• Uncheck “Display friendly HTTP messages”
• Check “Display a notification about every script error” 

Jmeter Test Script Recorder 를 사용하려면, Proxy 를 설정한 후 사이트를 접속해야 하는데, 이때 https 에 대해서 레코딩을 하면 인증서 오류로 인해서 진행하기가 쉽지 않다.

이때 구글링을 해서 --ignore-certificate-errors 옵션을 붙이 크롬을 실행해도 마찬가지로 https 접속하면 신뢰할 수 없는 사이트라는 경고와 함께 제대로 표시가 되지 않았다.

이 때는 약간 위험하긴 하지만 다음과 같이 하면 해결할 수 있다. JMeter 의 bin 파일 하위에 보면  ApacheJMeterTemporaryRootCA.crt 라는 테스트용 임시 인증서 파일이 생성되어 있는데 이를 크롬의 인증서 설정 기능에서 추가해 주면 문제없이 테스트할 수 있다.

설정 > 고급 설정 표시 > HTTPS/SSL > 인증서 관리

'Trusted Root Certification Authorities' 탭 > Import... 버튼 클릭

해서 해당 인증서 파일 추가하고, IE 에서 Proxy 설정을 한 후 진행하면 문제없이 잘 된다.

View > Highlight 또는 Filter 에서 늘 하고 싶었던 게 금주의 Task 또는 금주 + 다음주까지의 Task 를 보고 싶었는데 어떻게 하는지 몰라서 'Date range...' 를 사용했었습니다. 근데 적어도 이번주 Task 에 대한 필터는 'More Filters' 에서 보면 존재한다는 사실. 그리고 이 필터를 참고하면 여러가지 다양한 필터를 만들 수 도 있다는 사실을 알았다.

'More Filters...' 를 클릭하면 많은 필터의 목록을 볼 수 있다. 

위 목록에서 'Tasks Due This Week' 라는 필터가 있는데 이걸 선택하고 Edit 버튼을 누르면 좀 더 상세한 내용을 볼 수 있다.

이 필터의 조건을 상세하게 볼 수 있는데 필요하면 이런 것들을 응용해서 내가 원하는 필터를 얼마든지 만들 수 있다는 것을 알게 되었다.

Task 는 기본적으로 하루를 다 소요하는 것으로 설정되기 때문에, 리소스 할당 시 overallocated 때문에 이를 수정을 하고 싶어진다. 이럴 때 Inspect 를 사용하면 보다 쉽게 수정할 수 있다.

Inspect 버튼을 누르면 왼쪽에 Task Inspector 가 나타난다.. 이때 초과 할당된 리소스의 경우 Reschedule 과 Team Planner 액션이 있는데 Team Planner 를 누르면 아래 화면이 나온다.

Reschedule Task 는 잘 이해가 안됬고, Team Planner 를 누르면 좀 더 쉽게 수정하기 위한 화면을 볼 수 있다.

위에서 보면 초과 할당된 리소스에는 빨간색으로 표시되며 Development, Test, Release 등 3개의 Task 를 볼 수 있다. 단순히 이 화면에서는 이게 뭐지 할 텐데 Details 버튼을 누르면 좀 더 자세한 내용을 볼 수 있다.

위 화면에서 Development 를 선택하면 해당 Task 에 대한 상세한 내용을 볼 수 있고, 여기서 Work 시간을 조정해서 적당한 시간을 할당하면 3개의 Task 가 하루에 24 h 가 아닌 8 h 에 맞추어 일정을 올바르게 수립할 수 있다.

이건 어디까지나 지금까지 둘러본 나만의 팁인거고 더 좋은 방법이 있을수도 있다.

Inactive task is when used to cancel a task but keep a record of the task in the project plan. The task remains in the project plan, but does not affect resource availability, the project schedule, or how other tasks are scheduled.

중요한 일정에 대해 마일스톤을 추가하고, 이를 다른 것들과 구분되도록 하기 위해서 배경 색상을 다르게 표시하고 싶을 때 간단하게 할 수 있다.

Format > Text Styles

Status 칼럼은 다음과 같은 정보를 표시한다.

[참고: https://msdn.microsoft.com/en-us/library/ff863390.aspx]

이 정보를 이용해서 Health 라고 하는 Custom 칼럼을 추가해 보자. 이 칼럼은 Status 값에 따라서 아이콘으로 좀더 효과적으로 보이게 하기 위한 것이다.

1. Health 라는 Custom 칼럼 하나를 추가

2. 해당 칼럼 위에서 오른쪽 마우스를 눌러 'Custom Fields' 를 클릭

3. Formula 를 선택해서 다음을 입력

4. 'Graphical Indicators...' 를 클릭한 후, 아래 그림 처럼  각 값 마다 적절한 이미지를 지정해 준다.

이렇게 하면 Health Column 에는 상태에 따라 아이콘이 표시된다. Status 칼럼은 Start/Finish 그리고 Complete 에 따라서 자동으로 설정되는 값이며 아래와 같다.

https://support.office.com/en-us/article/Status-task-field-769145ac-e052-45af-a847-e5ef15778bb1

Spring 으로 push 서버 기능 구현을 알아보다가 HTML5 의 WebSocket 샘플을 스프링에서 제공하는 걸 확인하였다. git 에서 다운받고 gradle 로 실행해보니 바로 기능을 테스트 해 볼 수 있어 좋았다.

https://spring.io/guides/gs/messaging-stomp-websocket/

gradle 일 경우 아래 명령 입력 후,

gradlew bootRun

브라우저에서 아래 주소로 접속하면 보인다.

http://localhost:8080/

아래는 샘플 스크린 샷. 크롬과 IE 간 메시지를 주고 받는 예이다.

기존엔 netstat -ab 명령으로 확인했었는데, 이 명령은 확인하기가 좀 어렵다. 그래서 구글링 해보니 역시 좋은 방법이 있었네.

Resource Monitor 가 있었어. 그래도 이런건 리눅스 처럼 명령어로 간단하게 뽑아낼 수 있으면 좋겠구만.

You Aren't Gonna Need It.

A programmer should not add functionality until deemed(여기다, 생각하다) necessary.

Always implement things when you actually need them, never when you just foresee that you need them.

Do the simplest thing that could possibly work.

https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it

모바일 콘텐츠 최적화 경쟁

Facebook - Instance Articles

Apple - Apple News

Google - AMP (Accelerated Mobile Pages)

구글의 AMP 는 구글이 정한 규약에 맞게끔 페이지를 구성하면 웹사이트 속도를 올릴수 있다고 한다.

AMP 는 다음 3가지 요소로 구성된다.

AMP HTML - 기존 HTML 문서에서 속도에 부담을 주는 요소를 배제하고, 몇몇 확장 속성들을 추가한 일종의 HTML 확장

AMP JS - AMP HTML 을 읽고 렌더링하는 런타임(Runtime)

Google AMP Cache - 구글이 제ㄱㅇ하는 AMP HTML 문서의 캐싱 서비스

AMP 문서를 만들어 올리면 구글이 자체 CDN 을 통해 더 빠른 액세스를 할 수 있게 해주는 것이다.

참고 : http://www.usefulparadigm.com/2016/02/24/adding-the-google-amp-to-mobile-website/

What is Functions as First-Class Values?

This is translated as "1등 시민으로서의 함수" in Korean. (Why is this translated like that?)

First class? 1등 시민? 

First-class (en-en dictionary)

: If you describe something or someone as first-class, you mean that they are extremely good and of the highest quality.

A class of this term does not mean the class of java. It seems that to distinguish class word from general java class "시민" might be used. 

But it causes me to understand it more confused. 

Anyway, return to the subject.

In Java, we are accustomed to passing objects and primitive values to methods, returning them from methods, and assigning them to variables. This means that objects and primitives are first-class values in Java. 

Java cannot declare any function without a class. Instead java only has methods.

But methods aren't first-class in Java.

You can't pass a method as an argument to another methods, return a method from a method, or assign a method as a value to a variable.

However, most anonymous inner classes are effectively function "wrappers".

Many Java methods take an instance of an interface that declares one method. 

package functions;
import java.awt.*;
import java.awt.event.*;
class HelloButtonApp2 {
 private final Button button = new Button();
 public HelloButtonApp2() {
 button.addActionListener(new ActionListener() {
 public void actionPerformed(ActionEvent e) {
 System.out.println("Hello There: event received: " + e);
 }
 });
 }
}

Let's introduce a abstraction for all these "function objects"!.

package functions;
public interface Function1Void( <A >) {
 void apply(A a);
}

And let's try to use Function1Void like :

package functions;
import java.fawt.*;
import java.fawt.event.*;
class FunctionalHelloButtonApp {
 private final Button button = new Button();
 public FunctionalHelloButtonApp() {
 button.addActionListener(new Function1Void <ActionEvent >() { // 1
 public void apply(ActionEvent e) { // 2
 System.out.println("Hello There: event received: "+e);
 }
 });
 }
}

Abstraction callback function is great but instead of using this, lambda approach on Java 8 is better. 

Refer : Functional Programming for Java Developers by Dean Wampler

It's very simple sample for CGLib Proxy being used by Spring.

	public static void main(String[] args) {
	    Enhancer enhancer = new Enhancer();
	    // enhancer.setSuperclass(MemberServiceImpl.class);
	    enhancer.setSuperclass(MemberService.class);
	    enhancer.setCallback(new MethodCallLogInterceptor());
	    Object obj = enhancer.create();
	    MemberService memberService = (MemberService)obj;
	    memberService.regist(new Member());
	}

public class MethodCallLogInterceptor implements MethodInterceptor {
	
	MemberService memberService = new MemberServiceImpl();
    
    public Object intercept(Object object, Method method, Object[] args, 
            MethodProxy methodProxy) throws Throwable {
        System.out.println("before ");
        
        // Object returnValue = methodProxy.invokeSuper(memberService, args);
        Object returnValue = method.invoke(memberService, args);
        
        System.out.println("after ");
        return returnValue;
    }
}

cglib.zip

Refer : http://javacan.tistory.com/entry/114

Here are some advanced tips for chrome developer tools.

About Console

You can run javascript function by entering its name. If you set a breakpoint in it, it will work. 

You can see the source code of any function and jump to the definition

: Type a function name without round brackets and hit the enter key then console will show its source 

Then click the right mouse button on the function name as below, then select 'Show function definition'. it will jump to the definition except for native function, 

You can use selectors which are the command line api within the console. 

 : https://developer.chrome.com/devtools/docs/commandline-api

Set or unset a breakpoint using debug and undebug function

: call the debug function passing the function name to debug as below. This is really helpful when you don't know where its source is so you cannot set the breakpoint there.

About source

If you want to search some text within the whole javascripts, use ctrl + shift + f short cut. This will show you the search window.

When you blackbox a JavaScript source file, you will not jump into that file when stepping through code you're debugging. You are able to debug just the code you are interested in.

Pause On Caught Exceptions

Pretty Print

: By clicking on the curly brace  ("Pretty Print") icon in the bottom left corner, the JavaScript is transformed into a more human readable form.

The end.