" javascript(으)로 태그된 글들"

장마대비 코드 수정

2016-07-05   //   alexken작성   //   기술  //  No Comments

가장 최근 게시글이 2014년 4월 글이다.
그래 뭐라도 좀 쓰자.

심각한 결정장애자로 구성된 팀원들이 매일 점심마다 엘리베이터타고 지하 1층까지 내려와서는 서로의 눈치만 살필뿐 어디가자 말하는 사람이 없이 한동안 멍하니 서있기만 한 상황이 싫어서 만든 웹앱이 “오늘의 밥집”이다.

상암동 누리꿈스퀘어 근무자만 사용가능한 앱이다.

img_1104

오늘같이 비가 퍼붓는 날은 건물 밖에 나갈 수 없으니 날씨에 따라 추천 밥집을 유동적으로 할 필요가 있겠다 싶어 현재 날씨 관련 OPEN API를 찾아서 적용하였다.

기준은 가장 쉬어 보이는 놈으로 해서 openweathermap.org 꺼로 정했다.

http://api.openweathermap.org/data/2.5/weather?q=Seoul,uk&appid=3427...

HTTP GET 메소드로 요청하면 JSON으로 반환해준다.

{
  "coord": {
    "lon": 127,
    "lat": 37.52
  },
  "weather": [
    {
      "id": 301,
      "main": "Drizzle",
      "description": "drizzle",
      "icon": "09n"
    },

    {
      "id": 701,
      "main": "Mist",
      "description": "mist",
      "icon": "50n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 292.66,
    "pressure": 1012,
    "humidity": 88,
    "temp_min": 290.15,
    "temp_max": 296.15
  },
  "visibility": 10000,
  "wind": {
    "speed": 1.5,
    "deg": 320
  },
  "clouds": {
    "all": 90
  },
  "dt": 1467724800,
  "sys": {
    "type": 1,
    "id": 8519,
    "message": 0.0104,
    "country": "KR",
    "sunrise": 1467663409,
    "sunset": 1467716182
  },
  "id": 1846735,
  "name": "Chamsil",
  "cod": 200
}

여기서 weather[0] –> main 에 해당하는 문자열만 끄집어 내서 Rain, Storm … 이면 건물 밖 밥집은 제외토록 하였다.

function currWeather(){
  var xhr = new XMLHttpRequest();
  var curr = "Clear";
  xhr.onreadystatechange=function() {
    if(xhr.status == 200 && xhr.readyState==4)
      curr = JSON.parse(xhr.responseText).weather[0].main;
  }

  xhr.open('GET', 'http://api.openweathermap.org/data/2.5/weather?" +
        "q=Seoul&appid=3427...'
,false);
  xhr.send();
  return curr;
}

나의 첫번째 Ajax 프로그램

2006-06-21   //   alexken작성   //   기술, 천문  //  3 Comments

요즘 Web2.0이니, Ajax니 무척이나 시끄럽다.
MS에 있었을 때 부터 MsXml은 워낙이나 친숙했던 터라, 그리 새삼스럽지 않았지만,
최근 구글에서 선보이고 있는 새로운 User Experience들(ActiveX 없이도 충분히 interactive하게 만들어 낸 구글맵이나 Gmail)을 보자면, MS는 같은 걸 가지고도 참 본 가치를 못 이용한다는 걸 느낀다.
(게다가 XmlHttpRequest는 MS가 얼마나 일찍부터 표준화 하고, 선도하고, 마케팅에도 얼마나 읅어 먹었던가? – 앞으로 다 이렇게 개발해야 한다고…)

정작 주인은 따로 있나 보다.

잡소리 그만하고,

오늘 문득 NASA가 제공하는 Astronomy Picture of the Day(오늘의 천체 사진) 페이지를 붙이고 싶었다.

운 좋게도 누군가가 RSS로 제공하는 것도 알았다. 이를 이용하면

XmlHttpRequest로 apod.rss를 가져와서,
DOM 객체 돌아댕기며,
필요한 Element만 끄집어 내서 페이지를 완성...
var isIE = false;
var req;
function loadXMLDoc(url) {
  // branch for native XMLHttpRequest object
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send(null);
  // branch for IE/Windows ActiveX version
  } else if (window.ActiveXObject) {
    isIE = true;
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
      req.onreadystatechange = processReqChange;
      req.open("GET", url, true);
      req.send();
    }
  }
}
function processReqChange() {
  // only if req shows "loaded"
  if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
      //req.responseXML 을 가지고 원하는 페이지를 구성
    } else {
      alert("There was a problem retrieving the XML data:\n" +
      req.statusText);
    }
  }
}

이 소스는 developer.apple.com에서 참조했고,
예전엔 당연히 new ActiveXObject(“Microsoft.XMLHTTP”);
만 사용했는데, 어느덧, Safari나, Firefox가 XmlHttpRequest 객체를 내장하게 되었고, 요즘 탈 Active X 분위기 이므로(IE 7.0에서는 MS도 XMLHttpRequest를 내장 할 계획이라니), MSXML만 고려한 코딩은 피해야 겠다.

req.onreadystatechange = processReqChange;

에서 XMLHttpRequest의 onreadystatechange 상태 시 Callback 함수로 processReqChange 함수가 비 동기적으로 처리하게 하는 부분이 보이니, <- 이게 맨 첨부터 요란히 말했던 아약스의 실체 아님감. 아약스가 뭔지 아직까지 정확한 정의는 모르지만 그까이꺼 대충 client단에서 xmlhttprequest로 비동기 적으로 서버랑 통신 하면서 사용자에게 좀더 interactive한 환경을 제공하믄 아약스 아닌가???


결국은 포기했다…
일단 IE에서는 SP2이후에 살벌해진 보안 분위기에 ActiveX 경고창이 뜨고, OS에 따라 브라우저에 따라 각기 다른 결과를 보여서
서버에서 처리하기로 했다.
클라이언트 CPU좀 슬쩍 사용해 보려고 했는데….이어서….