Etc

AngularJs vs React

https://www.google.com/trends/explore#q=AngularJS%2C%20%2Fm%2F012l1vxv&cmpt=q&tz=Etc%2FGMT-9

SNS 서비스, 글 저작 도구 및 이미지 등록 등 작성도구 서비스 등

https://medium.com/

왜 테슬라는 한국, 제주에 진출하려는 걸까

http://www.bloter.net/archives/246719

개념 정리

AJAX
Callback
Asynchronous(비동기)
JSON
XML
AJAX CORS

AJAX란?

Asynchronous JavaScript and XML (AJAX)는 그 자체가 (특정한) 기술은 아닙니다. 하지만 HTML 또는 XHTML,Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, XMLHttpRequest object를 비롯한 기존의 여러 기술을 사용하는 "새로운" 접근법이라고 설명할 수 있습니다. 이러한 기술들을 AJAX 모델을 통해 결합하면, 웹 응용 프로그램을 빠르게 만들 수 있으며, 전체 웹 페이지를 다시 불러 오지 않은 채로 점진적으로 또 부분적으로 그 사용자 인터페이스(와 페이지 내용)를 갱신할 수 있습니다. 이 기능을 써서 더 빠르며 사용자가 취하는 동작이나 요구(예를 들어, 검색어 입력, 지도 스크롤, 새로운 위치 선택, 축척 조정 등)에 더 잘 응답하는 응용 프로그램을 만들 수 있습니다.

AJAX란 비동기 JavaScript와 XML을 말합니다. 간단히 말하면, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다. 서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

다시 말해 아래와 같이 두가지로 정리됩니다.

페이지 일부분을 업데이트 하기 위한 정보를 서버에 요청할 수 있다.
서버로부터 받은 데이터로 작업을 한다.

=> 페이지를 새로고침 하지 않고 만드려고, 프로그램의 중심을 front-end로 이동

Callback

: 나중에 연락해! 작업을 실행하고, 작업이 완료되면, 그 후 작업이 실행되는 것

비동기

: 멀티쓰레드 비슷함 내가 어떤 명령을 하고, 그 동안 나는 다른 작업 하는것. 선점 비선점 비슷하네?

jQuery chaining

With jQuery, you can chain together actions/methods.

Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

JSON

: (JavaScript Object Notation) 자바스크립트 객체 표기법

{"문자열":"string" or 숫자}

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

출저: http://www.json.org/json-ko.html

XML

: markup language 문자열이라서 호완성이 좋다. 그러나 코드 수가 길어진다.

XML is a software- and hardware-independent tool for storing and transporting data.

Why Study XML?

XML plays an important role in many IT systems.

For this reason, it is important for all software developers to have a good understanding of XML.

Before you continue, you should also have a basic understanding of:

HTML
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

출저: http://www.w3schools.com/xml/xml_whatis.asp

jQuery code

https://developers.google.com/speed/libraries/#hammerjs

Jackson 에서 JSON 처리에 제공하는 방법

1. Streaming API
     성능이 빠름.
2. Tree Model
     일반적인 XML처럼 노드형태로 Json 데이터를 다룸. 유연성이 가장 좋음. 입맛대로 구성할 수 있음.
3. Data Binding
     POJO 기반의 가자 객체들을 JSON으로 변환함.
   -Simple data Binding : 자바클래스 내의 Map, List, String, 숫자형, Boolean, null 형의 데이터들을 JSON으로 변환함.
   -Full data binding : Simple data Binding에서 제공하는것들을 포함하고 자바 빈타입에서 제공하는 데이터들도 JSON으로 변환함.

Jacskon maven

http://tutorials.jenkov.com/java-json/jackson-installation.html

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.5.3</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.5.3</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.3</version>
</dependency>

json은 로그인이 따로 없어서 api key라는 방식을 씀

면접 문제(개념)

ajax CORS

지난 포스트에서는 CORS에 대해서 (아직 지원하지 않는 브라우져가 많다고 지레 짐작하고) 용어만 언급하고 넘어갔다.
최근에 올라온 "Methods of communication"이라는 글에 걸린 링크를 통해 지금 당장이라도 쓸 수 있음을 확인하고, 몇 자 적어보려고 한다.

Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다.

MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규모 사이트를 개발할 때도 골치거리였다. Same Origin Policy를 우회하는 방법으로 JSONP, IFRAME IO, CrossDomain Proxy 등이 고안되었지만, 보안성이 취약하다거나, 동기 호출이 안되거나, 주고 받는 데이터 형식이 제한되거나, 직관적이지 못하거나(dirty hack), ... 등의 문제점 때문에 표준화되기엔 무리가 있었다.

(중략) 한 참 뒤에야 W3C는 (MS의 IE가 제공하는 방식을 수용하여) 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법을 표준화 했는데, 그것이 바로 CORS다.

CORS를 한 마디로 요약하면, "요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통신할 수 있다"라는 정책이다. 기술적으로는 크로스도메인에 위치한 웹서버가 응답에 적절한 Access-Control-Allow-류의 헤더를 보냄으로써 크로스도메인 Ajax를 허용 수 있다.

말이 뺑뺑도는 느낌인데, 예를 들어 보자(코드를 줄이기 위해 jQuery를 사용했지만 XMLHttpRequest를 직접 사용해도 마찬가지다). Ajax 요청을 보내는 one.html을 내려 준 a.com이 오리진 웹서버다. 이 요청을 받는 b.com이 크로스도메인 웹서버다. a.com에서 b.com으로... 그래서 크로스-도메인이다.

대충 그려보면 이런 식인데, b.com은 크로스도메인이므로 Ajax 통신이 불가능하지만, CORS를 적용하면 가능하다:

http://a.com/one.html

...
$.get('http://b.com/another.php', function(data) {
alert(data);
})

http://b.com/another.php

...
<?php header('Access-Control-Allow-Origin:*'); ?>
...

보다시피, Ajax 클라이언트 측에는 추가적으로 할 일이 없고, 서버 측에서 할 일도 많지 않다. 웹서버(b.com)이 응답에 Access-Control-Allow-Origin헤더를 통해 모든 Origin(*)에서 오는 요청을 허락했으므로 다른 도메인(요청을 보낸 one.html을 내려 준 a.com)과 Ajax로 통신을 할 수 있다. 플래시에 익숙한 개발자라면 crossdomain.xml 을 떠오를 것이다. 맞다. 사실상 똑같다.

CORS는 FF 3.5+, 사파리 4+, 크롬 등의 대부분의 현대적인 브라우져에서 지원한다. IE의 경우엔 IE8부터 지원하는데, XMLHttpRequest대신XDomainRequest객체를 사용해야 한다. 즉, 거의 다 된다! IE6,7만 무시하면... oTL

CORS 표준에 따르면 Origin외에도 HTTP 인증 여부, HTTP 메소드(GET, POST, ...), 특정 헤더 존재 유무 등의 다양한 기준으로 접근을 허용(preflight request)할 수 있는데, IE8은 이 스펙을 지원하지 않는다. -_-; CORS가 IE의 비표준 확장에 근거해서 만들어졌다는 점을 생각해보면.. 개그도 이런 개그가... -_-; IE9은... 아직 확인해보지 못했다.

클라이언트 대신 서버 측에서 뭔가를 해야 한다는 것은 장점인 동시에 단점인데, 기존의 수많은 OpenAPI들을 활용하고 싶어도 제공자들이 CORS를 적용하기 전까지는 무용지물... -_- OpenAPI를 제공하고 있거나, 제공할 계획이라면 JSONP 뿐 아니라 CORS도 고려해야 할 듯...

처음 언급된지 십년이 다 된 "Web as a Platform"이 실감나는 요즘이다. 팀 버너스 리가 원하던 원치않던... 웹은 점점 플랫폼으로 진화(혹은 변신)하고 있다. 별것 아닌 CORS도 이런 관점에서 보면 조금은 다르게 보일지도...

출저: CORS(Cross-Origin Resource Sharing)을 활용한 크로스도메인 Ajax

ajax cross domain

다른 도메인에서 접근할 수 있도록

http://blog.iolo.kr/494

ajax same origin policy(동일 출처 정책)

: 동일한 도메인에서는 데이터가 제대로 돌아감 ex)이클립스내에선 잘돌아감 but webstorm에서는 다른도메인이기 때문에 오류가 난다.

http://monolife.kr/167

해결하기 위해서는 CORS를 써야 된다. filter나 servlet에 적용한다.

보안문제가 잇음

ajax는 JSON, text, xml 이렇게 이루어짐

jsonp로 same origin policy를 해결할 수 있다

jsonp는 eval 같음

server로부터 받아온 문자열을 jsonp로 받고, 그 함수가 나에게 있는 함수면, 실행이 됨.

jsonp는 서버로부터 javascript를 받아서 실행함

ajax same origin policy 해결하는 방안

1. jsonp

장점: 간편함

단점: 서버에서 문자열을 만들지 않으면 사용 못함

네이버나 다음은 제공: key가 맞으면 그에 맞는 javascript file을 던져줌

2. proxy

장점: 서버가 막아도 자바 코드로 접근하기 때문에 막을 방법이 없다.

단점: 우리쪽에 서버사이드 서버가 필요함

a->b에 접근하고 c로 json을 받음

a는 c와 같은 도메인이기 때문에 same origin policy정책을 반하지 않음.

3. IFRAME IO

: Cross-Domain 간 Iframe 크기 변경 및 정보 전달

출저: http://egloos.zum.com/kingori/v/3837428

Animation

1. Spinner 효과 주기

//jsonTest.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Animate</title>
</head>
<body>
<style>
    .spinner {
        display: none;
        position: absolute;
        z-index: 100;
        top: 50%;
        right: 50%;
        margin-left: -96px;
        margin-top: -96px;;
    }

    .bigImage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        z-index: 100;
        display: none;
    }
    
    #testImg{
        position: absolute;
        border-radius: 50px;
    }

</style>
<img id='testImg' src="kiss.jpg" style="width: 100px; height: 100px;">
<img class="spinner" src="spinner.gif">
<img class="bigImage" src="kiss.jpg">
<h1></h1>
<button class='big'>이미지보기</button>
<button class='btn'>click</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        var $testImg =$("#testImg");
        $testImg.click(function () {
            console.log("clicked...");
            $testImg.animate({
                position:"absolute",
                left: "500px",
                opacity:0.1
            }, 1000);
        });

        var bigImage = $(".bigImage");

        $('.big').click(function () {
            bigImage.animate({
                display: "block",
                width: "100%",
                height: "100%",
                left: "0",
                top: "0"
            }, 1000);
        });

        var spinner = $(".spinner");

        $('.btn').click(function () {
            console.log("clicked.........");
            spinner.show(3000);
            $.getJSON("http://192.168.0.13:8080/web4/jsonTest", function (obj) {
                $("h1").html(obj.time);
                spinner.hide(3000);
            })
        });
    });
</script>
</body>
</html>

Post 방식 : 페이지가 새로 생성 되지 않고, post를 보낼 수 있음

jsonTest.html
1.9 KB

AjaxPostServlet.java
949 bytes

JsonServlet.java
1.8 KB

jsonTest.html
1.0 KB

web5.zip
31.2 KB

WebstormProjects.zip
16.3 MB

js.zip
683.3 KB

저작자표시

'IT > JavaScript' 카테고리의 다른 글

[Javascript] 이벤트 정리 (0)	2019.08.28
Javascript 부모창 id value 가져오기 (0)	2018.12.28
Google JavaScript Style Guide (0)	2018.04.03
Javascript 페이지에서 데이터교환 (0)	2016.09.08
20160623 [JavaScript] (0)	2016.06.23

Graduation

20160629 [JAVASCRIPT] json, cors

왜 테슬라는 한국, 제주에 진출하려는 걸까

'IT > JavaScript' 카테고리의 다른 글

티스토리툴바

20160629 [JAVASCRIPT] json, cors

왜 테슬라는 한국, 제주에 진출하려는 걸까

'IT > JavaScript' 카테고리의 다른 글

'IT/JavaScript' Related Articles

티스토리툴바