ES6의 Fetch API

ES6에서 지원하는 fetch API는 ES6의 Promise와 함께 AJAX를 Wrapping 해주는 매우 가독성이 뛰어난 방식입니다. fetch API은 내부적으로 AJAX API와 Promise를 사용하면서 외부로 들어내지 않습니다. 이 글은 fetch API에 대한 매우 기초적이지만 가장 일반적으로 많이 사용되는 내용을 정리합니다.

먼저 아래의 코드는 이미지를 fetch API를 통해 가져와 표시하는 코드 중 먼저 DOM 요소에 대한 코드입니다.


언급할 필요조차 없을 정도로 간단합니다. 다음은 실제 관심이 집중되는 fetch API 코드입니다.

fetch('lion.jpg')
    .then(function (response) {
        return response.blob();
    })
    .then(function (blob) {
        var objUrl = URL.createObjectURL(blob);
        myImage.src = objUrl;
    });

먼저 1번 코드의 fetch 함수를 통해 인자로 lion.jpg라는 상대 경로의 URL을 통해 (네트워크에서) 이미지 데이터를 가져와 2번 코드의 첫번째 then에 지정된 함수의 response에 그 결과를 인자로 담아 함수를 호출합니다. 호출된 함수에서 반환하는 결과에 대해 5번 코드의 then에 지정된 또 다른 함수의 인자에 담아 호출하게 됩니다. 하나의 fetch는 이처럼 2개의 연속된 then으로 구성됩니다.

API의 실행에 있어 중요한 것은 해당 API의 실패에 대한 처리입니다. 만약 lion.jpg에 대한 URL이 올바르지 않을 경우에 대한 처리가 필요합니다. 아래의 코드는 이러한 예외에 대한 경우의 코드까지 담고 있습니다.

fetch('lion.jpg')
    .then(function (response) {
        if (response.ok) {
            return response.blob();
        } else {
            alert('네트워크 오류');
        }
    })
    .then(function (blob) {
        var objUrl = URL.createObjectURL(blob);
        myImage.src = objUrl;
    })
    .catch(function (err) {
        alert(err)
    });

첫번째 then은 네트워크 통신 및 인자로 지정한 URL에 대한 문제가 있는지를 검사해야 하는데, 3번 처럼 response 인자의 ok 속성을 통해 확인 가능합니다. 두번째 then은 첫번째 then이 성공했던 실패했든지간에 두번째 then에서 지정한 함수의 실행 시에 어떤 문제가 발생하면 13번 코드의 catch의 함수가 호출됩니다.

아래는 POST 방식에 대한 fetch API 사용예입니다.

var params = {
    '_id': 'test.getPlayersWhere2',
    'age': 10,
    'name': '%'
};

fetch('http://localhost:8080/Bang?query',
    {
        method: 'POST',
        body: JSON.stringify(params)
    })
    .then(function (response) {
        if (response.ok) return response.text();
    })
    .then(function (text) {
        if (text) div.innerText = text;
        else alert('error');
     });

위의 사용예에 대한 jQuery 방식은 아래와 같습니다.

var params = {
    '_id': 'test.getPlayersWhere2',
    'age': 10,
    'name': '%'
};

$.ajax({
    url: 'http://localhost:8080/Bang?query',
    type: 'POST',
    data: JSON.stringify(params),
    dataType: "text",

    success: function (response) {
        div.innerText = response;
    },

    error: function (xhr, status) {
        alert('Error: ' + status);
    }
});

jetty를 이용한 WebSocket 서버 구현하기

어플리케이션에 Servlet Container 이외도 여러가지 서버 기능을 내장할 수 있는 jetty 라이브러리를 이용해 WebSocket 서버를 구현하는 코드에 대한 뼈대를 정리한다. WebSocket는 HTML5에서 지원하는 기능으로 서버와 클라이언트는 연결되어 있는 상태에서 상호간에 데이터를 주고니 받거니 할 수 있는 기술이다. WebSocket은 그 막강한 통신 기능에 비해 서버와 클라이언트의 코드가 매우 작다. 그래서인지 뭔가 부족한 느낌이 드는데, 일단 기본적인거 정리하고 부족한 느낌이 드는 이유는 나중에 파악해 보자.

먼저 서버 단의 코드이다. Server를 구동하는 클래스와 WebSocket를 통해 접속하는 클라이언트를 나타내는 Session 범위의 클래스인데, 먼저 Server를 구동하는 클래스는 아래와 같다.

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.server.handler.ContextHandler;
import org.eclipse.jetty.websocket.server.WebSocketHandler;
import org.eclipse.jetty.websocket.servlet.WebSocketServletFactory;

public class test_webSocket {
    public static void main(String[] args) {
        Server server = new Server(8080);
		
        WebSocketHandler wsHandler = new WebSocketHandler() {
            @Override
            public void configure(WebSocketServletFactory factory) {
                factory.register(MyEchoSocket.class);
            };
        };

        ContextHandler context = new ContextHandler();
        context.setContextPath("/echoServer");
        context.setHandler(wsHandler);
		
        server.setHandler(context);

        try {
            server.start();
            server.join();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

그리고 다음은 서버에 접속하는 클라이언트(Session 객체로 구분) 마다 생성되는 Echo 기능을 갖는 MyEchoSocket 클래스이다.

import org.eclipse.jetty.websocket.api.Session;
import org.eclipse.jetty.websocket.api.WebSocketListener;

public class MyEchoSocket implements WebSocketListener {
    private Session outbound;
	
    public MyEchoSocket() {
        System.out.println("class loaded " + this.getClass());
    }

    @Override
    public void onWebSocketConnect(Session session) {
        this.outbound = session;		
    }

    @Override
    public void onWebSocketError(Throwable cause)
    {
        cause.printStackTrace(System.err);
    }

    @Override
    public void onWebSocketText(String message)
    {
        if ((outbound != null) && (outbound.isOpen()))
        {
            String echoMessage = outbound.hashCode() + " : " + message;
            outbound.getRemote().sendString(echoMessage, null);
        }
    }

    @Override
    public void onWebSocketBinary(byte[] payload, int offset, int len)
    {
        //.
    }

    @Override
    public void onWebSocketClose(int statusCode, String reason)
    {    	
    	System.out.println("Close, statusCode = " + statusCode + ", reasone = " + reason);
        this.outbound = null;
    }	
}

요즘 웹이 그렇듯이 WebSocket 기술은 Binary 데이터도 주고 받을 수 있다는 것을 알 수 있다. 중요한 것은 클라이언트 하나가 접속을 하면 위의 클래스가 매번 생성된다는 것이고, 클라이언트는 Session 객체를 통해 나타내지며, 이 객체를 통해 데이터를 주고 받을 수 있다.

서버를 살펴봤으니, 이제 클라이언트 코드를 살펴보면..




    
    


    

위의 13번 부분에 들어가는 js 코드는 다음과 같다.

        var webSocket = new WebSocket("ws://localhost:8080/echoServer/");
        var msgField = document.getElementById("messageField");
        var divMsg = document.getElementById("msg-box");

        function sendMsg() {
            var msgToSend = msgField.value;

            webSocket.send(msgToSend);

            divMsg.innerHTML += "
Client> " + msgToSend + "
"; msgField.value = ""; } webSocket.onmessage = function (message) { divMsg.innerHTML += "Server> : " + message.data; } webSocket.onopen = function () { alert("connection opened"); } webSocket.onclose = function () { alert("connection closed"); } webSocket.onerror = function (message) { alert("error: " + message); }

서버를 기동한 뒤, 클라이언트를 실행하고 메세지를 날리면, 해당 메세지가 메아리로 돌아오는 것을 볼 수 있다.

한번 적용된 CSS3 애니메이션(@keyframes)을 다시 적용하기

DOM 요소에 CSS3의 animation-name을 지정해 애니메이션을 지정해 플레이하고 난 뒤, 다시 이 DOM 요소에 animation-name을 지정하면 애니메이션이 플레이 되지 않는다. 이에 대한 CSS와 JS 코드는 다음과 같다. 먼저 CSS 입니다.


다음은 js입니다.


id가 dom_id인 DOM 객체에 blank 클래스를 처음 지정할때는 애니메이션이 발생하지만, 두번째부터는 애니메이션이 발생하지 않는다. 이럴 때는 23번과 24번 코드 사이에 아래의 코드를 추가한다.

domCounting.offsetWidth;

이건 Bug일까.. 아니면 의도된 것일까..

div 안의 img에 Inner Shadow 적용하기

아래와 같은 DOM 계층이 있다고 하자.

위의 div에 아래와 같은 스타일을 적용해 안쪽 그림자(Inner Shadow) 효과를 넣고자 한다면..

div {
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px inset;
}

div 요소의 자식인 img에 부모인 그림자 효과가 표시되어야 할 것이라고 기대했지만, 부모인 div의 그림자가 자식인 img에 가려져 아래와 같은 결과만을 볼 수 있다.

그렇다면 자식인 img에 의해 가려진 부모의 그림자를 들어내기 위해서 어떻게 해야할까? 부모의 그림자 역시 DOM 계층적으로 보면 또 하나의 공개되지 않은 DOM 요소이다. 이 그림자 DOM 요소가 img에 가려지므로 이 img의 z-index의 값과 z-index 속성값이 영향을 받도록 하기 위해 position 속성을 relative나 absolute로 지정하면 되는데, 아래와 같다.

img {
    position: relative;
    z-index: -1;
}

이제 그 결과를 보면, div 요소에 안쪽 그림자 효과가 반영되어, 좀더 입체적으로 이미지가 표현되는 것을 확인할 수 있다.