https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

블로그 이미지

클라인STR

,


Json Object 에서 특정 key 값의 최대, 최소 값 구하기 


https://lodash.com/



_.minBy(array, [iteratee=_.identity])


_.maxBy(array, [iteratee=_.identity])


var objects = [{ 'n'1 }, { 'n'2 }];
 
_.maxBy(objects, function(o) { return o.n; });
// => { 'n': 2 }
 
// The `_.property` iteratee shorthand.
_.maxBy(objects, 'n');
// => { 'n': 2 }


var objects = [{ 'n'1 }, { 'n'2 }];
 
_.minBy(objects, function(o) { return o.n; });
// => { 'n': 1 }
 
// The `_.property` iteratee shorthand.
_.minBy(objects, 'n');
// => { 'n': 1 }


참고 https://stackoverflow.com/questions/33351934/get-the-min-and-max-from-array-of-objects-with-underscore-js


https://lodash.com/docs/4.17.11#minBy

https://lodash.com/docs/4.17.11#maxBy

블로그 이미지

클라인STR

,


공공데이터포털 에서 아래와 같은 API 서비스를 이용하였다.


1. 측정소정보 조회 서비스



측정소 정보 서비스 조회하기 이다.  실제 대기오염 지표를 조회하는 방법중 현재 위치에 근처에 있는 근접 측정소를 조회한뒤 해당 측정소에 대기오염 지표를 조회한다. 




2. 대기오염정보 조회 서비스



대기오염 정보조회 서비스를 이용해서 대기오염지수를 조회한다. 먼저 조회해서 확인해볼 데이터는 측정소별 실시간 측정정보 조회이다.  해당 API에 대한 자세한 정보는 airkorea_openapi_guide-v1_6_1.docx 통해서  확인가능하다.



3. 근접측정소 목록 조회 하기






TM 좌표를 기준으로 가장 가까운 측정소 list를 구한다. 

TM좌표 구하는 방법에 대한것은 이전 포스팅을 참고한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
async function getNearbyMsrstnList(tmX, tmY) {
    let url = `${API_NMT}?tmX=${tmX}&tmY=${tmY}&pageNo=1&numOfRows=10&ServiceKey=${SERVICE_KEY}&_returnType=json`;
    
    let res = await fetch(url)
    .then(response => response.json())
    .then(data => {
        
        // data.list.
       let tms = _.minBy(data.list, 'tm');
       
       return tms;
       
    })
    .catch(error => {
        console.log("error");
        
    });
    return await getMsrstnAcctoRltmMesureDnsty(res.stationName);
}

cs


tm좌표를 기준으로 가장 가까운 측정소 리스트를 조회한다음, 현재 위치에서 측정소 거리가 가장 가까운 Object를 찾는다. 



4. 측정소별 실시간 정보 조회 하기





측정소별 실시간 측정정보를 조회하기 위해서는 측정소명이 필요한데  근접측정소 목록 조회결과 값으로 측정소 명을 알 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
async function getMsrstnAcctoRltmMesureDnsty(stationName) {
    let url = `${API_MSRSTN}?stationName=${encodeURIComponent(stationName)}&dataTerm=${DATA_TYPE}&pageNo=1&numOfRows=1&ServiceKey=${SERVICE_KEY}&_returnType=json`;
    console.log(url);
    return await fetch(url)
    .then(response => response.json())
    .then(data => {
        console.log("getMsrstnAcctoRltmMesureDnsty");
        console.log(data.list);
        console.log(data.list[0].mangName);
        console.log(data.list[0].dataTime);
        console.log(data.list[0].pm10Grade);
        console.log(data.list[0].pm10Value);
        console.log(data.list[0].pm25Grade);
        console.log(data.list[0].pm25Value);
        console.log(data.list[0].so2Value);
        console.log(data.list[0].so2Grade);
 
        console.log(data.list[0].coGrade);
        console.log(data.list[0].coValue);
        console.log(data.list[0].khaiGrade);
        console.log(data.list[0].khaiValue);
       
        return data.list[0];
    })
    .catch(error => {
        console.log("error");
        console.log(error);
        
    });
}

cs






블로그 이미지

클라인STR

,

위도 경도 좌표변환에 대해서 알아 보는중 통계청 지리정보 서비스를 발견하게 되었다. 


SGIS PLUS 개발지원센터



회원가입 신청 버튼을 선택한다. 



Chrome 브라우저에서 회원가입 신청링크로 접속이 되지않아서 이후에 진행은 IE브라우저에서 진행하였다. 




스크롤을 내력서 사용약관을 읽고 정책 동의를 모두 체크한다음 회원가입 버튼을 선택한다. 



필수입력항목을 입력하고 회원가입 버튼을 선택한다. 



인증키 발급 신청을 선택한다. 



API 약관을 읽고 동의 버튼을 선택한다.



인증키 신청내역중 필수입력항목을 빠짐없이 입력하고 신청 버튼을 클릭한다.



https://sgis.kostat.go.kr/developer/html/openApi/app/myApp.html 마이페이지 접속하면 현재 신청된 인증키 를 확인할 수 있다. 

서비스ID , 보안Key를 실제 API 신청시 사용한다. 

블로그 이미지

클라인STR

,

React Native 위도 경도 구하기  바로가기


이전 포스팅에서 위도 , 경도를 구한 값을 TM좌표로 변환해보기로한다. 

TM좌표로 변환하기위해서는 통계청 SGIS API를 이용한다. 


  API를 사용하기위해서는 인증단계를 먼저 거쳐야한다. 응답정보 값인 accessToken 값이 필요하다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const API_AUTH = "https://sgisapi.kostat.go.kr/OpenAPI3/auth/authentication.json";
 
const CONSUMER_KEY = ""//Service ID
const CONSUMER_SECRET = ""//서비스 Secret
 
 
function fetchAuth(latitude, longitude) {
    let url = `${API_AUTH}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`;
    console.log(url);
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log("fetchAuth Result");
            console.log(data);
            fetchCrdTms(data.result.accessToken, latitude, longitude);  
        })
        .catch(error => {
            console.log("error");
            console.log(error);
        });
}
cs


fetchAuth 함수를 하나 생성하여 인증 accessToken을 요청한다. 



인증 요청결과 Json Data 형식





좌표변환 API는 위와 같은요청형식을 사용한다. 

src는 현재 좌표체계 값이고 dst는 변경하고자하는 좌표 체계의 값이다. 


위도 경도를 구한 좌표값은 WGS84(World Geodetic System) 형식이다. 좌표계코드표를 참고를 선택하면 아래와 같이 팝업이 호출된다.




공공데이터 포털 API중 환국환경공단에서 사용하는 좌표계는 중부원점이다. 

공공데이터 포털 Q&A 좌표계변환 문의 참고링크



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const API_TRAD = "https://sgisapi.kostat.go.kr/OpenAPI3/transformation/transcoord.json";
const WGS84 = 4326//WGS84 경/위도
const GRS80 = 5181//GRS80 중부원점

function fetchCrdTms(accessToken, latitude, longitude) {
    //x축이 longtitude 경도 y축이 latitude 위도 
    let url = `${API_TRAD}?accessToken=${accessToken}&src=${WGS84}&dst=${GRS80}&posX=${longitude}&posY=${latitude}`;
    console.log(url);
    fetch(url)
    .then(response => response.json())
    .then(data => {
        console.log("fetchCrdTms Result");
        console.log(data);
      
    })
    .catch(error => {
        console.log("error");
        console.log(error);
    });
}
cs





블로그 이미지

클라인STR

,

기상자료 포털에 접속이 되지않는일이 발생하였는데, 내 Mac PC에만 접속이 안되는듯하다. 보통 고급버튼을 눌리면 안전하지 않은 링크로 이동이라는 버튼이 보이는데 해당버튼 조차 보이지 않는다. 


사파리 브라우저를 열어서 해당URL 접속해보자 .




이 웹 사이트 방문할  부분 클릭한다.




웹사이트 방문 클릭하면 해당 웹페이지로 진행할 수 있다.

크롬에서 볼 수 있는 방법은 좀더 찾아봐야될듯하다. ㅠㅠ

블로그 이미지

클라인STR

,

https://developers.google.com/maps/documentation/geocoding/start  접속한다.




Get STARTED 버튼을 클릭한다.




사용하고자하는 제품군을 선택한다.일단 3개다 체크했다.


계속버튼을 클릭한다.


Enter new project name에 적당한 이름을 적고  라디오버튼 Yes 체크 후 NEXT 클릭한다. 



무료 평가판 시작하기 클릭한다. 






DONE 완료버튼을 선택한다.



Google Cloud Platform 에 가입하면 1년동안무료로 사용할 수 있다. 







API를 사용하기 위해서 사용자 인증 정보만들기 버튼을 클릭한다.









Google Cloud SDK 설치하기




현재사용하는 컴퓨터가 MAC이라서 MACOS용을 설치를 선택하였다.



GCS를 사용하기위해서 파이썬이 설치되어있어야한다. 운용체제에 맞는 패키지를 다운로드 받는다. 




터미널을 열어서 쉘종류를 확인한다. zsh인경우 vi ~/.zshrc 파일을 연다. 

i 입력하여 insert 모드로 들어가서 아래와 같은 환경변수를 추가하고 저장하고 모드를 종료한다.


## Google Cloud

export GOOGLE_CLOUD_SDK_PATH=[google-cloud-sdk 넣어둔 경로]

export PATH=$PATH:$GOOGLE_CLOUD_SDK_PATH/bin



source .zshrc 명령어를 입력하여 환경변수를 적용하고, gcloud --version 입력하여 설치가 잘됬는지 확인한다.


gcloud init 명렁어를 사용하여 초기화 시킨다.



사용하고자 하는 계정을 선택한다. 


허용버튼을 클릭한다.



완료되면 다음 화면이 나타난다. 

You must log in to continue. Would you like to log in (Y/n)? 라고 나오면 y를 선택한다.



사용할프로젝트를 선택하는데 기존에 만들었던 프로젝트를 선택해줬다.


여기까지하면 Google Cloud SDK 설치가 끝났다. 



추가로 몇가지 설정만 더 해주자.


vi ~/.zshrc 접속하여 아래 문구를 추가한다.

export GOOGLE_APPLICATION_CREDENTIALS=/Users/home폴더명/GoogleCredential/컴퓨터에 저장된 비공개키파일.json



gcloud auth application-default login 터미널에 입력한다. 


브라우저에 해당화면이 호출되면 사용하고자하는 계정을 선택한다.




허용버튼을 눌르면 설정이 정상적으로 끝난다. 






참고링크 

참고링크2

블로그 이미지

클라인STR

,