StudyServer
web, server, java, spring 등.. 공부한 것을 기록하는 장소 입니다. 공부하면서 정리하였기 때문에 틀린 내용이 있을 수 있습니다. 이야기 해주시면 수정하겠습니다.
HOME /About /algorithmus /db /front /git /java /ml /search /server /spring

다음지도 key 등록(kakao map)

2018-12-23 00:00:00 +0000

다음 지도 API

어플리케이션 생성

  • daum지도 사용 참고
  • http://apis.map.daum.net/web/guide/#step3
  • kakao developers 에서 회원가입
  • map을 선택하고 어플리케이션 생성
  • 내 계정에서 map 선택 후 설정-일반-플랫폼-플랫폼 추가 선택
  • 도메인 추가(http://localhost:8080)

좌표로 지도 출력

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8"/>
       <title>Daum 지도 시작하기</title>
</head>
<body>
       <div id="map" style="width:500px;height:400px;"></div>
       <script type="text/javascript"  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=인증키"></script>
       <script>
              var container = document.getElementById('map');
              var options = {
                     center: new daum.maps.LatLng(33.450701, 126.570667),
                     level: 3
              };
              var map = new daum.maps.Map(container, options);
       </script>
</body>
</html>

공공 데이터 open api

2018-12-22 00:00:00 +0000

공공 데이터 포털 OpenAPI 사용법

API 신청

  • https://www.data.go.kr
  • 자신이 활용하고 싶은 데이터를 찾는다
  • 활용신청 버튼을 누른다
  • 활용신청이 끝나면 곧바로 사용할 수 있다
  • 지역코드는 여기서 확인할 수 있다

개발계정 API키 받기

  • 마이페이지-개발계정 메뉴에서 ‘일반 인증키 받기’ 선택
  • 참고문서에서 API 사용법을 확인한다
  • 내가 신청한 API 는 단독/다가구 전월세 자료이고 아래 url로 요청하면 결과를 받을 수 있다고 적혀있다
  • http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcSHRent?LAWD_CD=11110&DEAL_YMD=201512&serviceKey=서비스키
  • 위 url을 주소창에 입력하면 다음결과를 받을 수 있다
<response>
<header>
<resultCode>00</resultCode>
<resultMsg>NORMAL SERVICE.</resultMsg>
</header>
<body>
<items>
<item>
<건축년도>1991</건축년도>
<계약면적>53.76</계약면적>
<년>2015</년>
<법정동> 청운동</법정동>
<보증금액> 25,000</보증금액>
<월>12</월>
<월세금액> 0</월세금액>
<일>11~20</일>
<지역코드>11110</지역코드>
</item>
<item>
<건축년도>1995</건축년도>
<계약면적>95.48</계약면적>
<년>2015</년>
<법정동> 청운동</법정동>
<보증금액> 30,000</보증금액>
<월>12</월>
<월세금액> 50</월세금액>
<일>21~31</일>
<지역코드>11110</지역코드>
</item>
....

Parsing

  • 서버로 요청한 결과값은 글자 덩어리이므로 데이터 셋에 알맞게 Parsing해야함
  • 아래는 XML 데이터를 파싱해서 출력하는 예제
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
public class Main {
       
       public static String getValue(String item, Element eElement) {
       
              // 몇몇 태그가 없는 경우도 있기 때문에 체크한다
              if(null == eElement) {
                     return null;
              }
              
              if(null == eElement.getElementsByTagName(item)) {
                     return null;
              }             
              
              if(null == eElement.getElementsByTagName(item).item(0)) {
                     return null;
              }             
              
              NodeList nlList =  eElement.getElementsByTagName(item).item(0).getChildNodes();
              Node nValue = (Node)nlList.item(0);
              if(nValue == null)
                     return null;
              
              return nValue.getNodeValue();
       }
       
       public static void ParsingXML(String result) {
              DocumentBuilderFactory dbFactory =  DocumentBuilderFactory.newInstance();
              DocumentBuilder dBuilder;
              try {
                     dBuilder = dbFactory.newDocumentBuilder();
                     Document doc = (Document) dBuilder.parse(result);
                     doc.getDocumentElement().normalize();
                     System.out.println("Root element :  "+doc.getDocumentElement().getNodeName());
                     
                    // item 태그로 묶여진 데이터들을 전부 가져온다
                     NodeList nList = doc.getElementsByTagName("item");
                     System.out.println("개수:"+nList.getLength());
                     for(int temp = 0; temp < nList.getLength(); ++temp) {
                           Node nNode = nList.item(temp);
                           if(nNode.getNodeType() == Node.ELEMENT_NODE){
                                  Element eElement = (Element) nNode;
                                  System.out.println(temp+"번째");
                                  System.out.println("건축년도:"+getValue("건축년도",eElement));
                                  System.out.println("계약면적:"+getValue("계약면적",eElement));
                                  System.out.println("년:"+getValue("년",eElement));
                                  System.out.println("법정동:"+getValue("법정동",eElement));
                                  System.out.println("보증금액:"+getValue("보증금액",eElement));
                                  System.out.println("월:"+getValue("월",eElement));
                                  System.out.println("월세금액:"+getValue("월세금액",eElement));
                                  System.out.println("일:"+getValue("일",eElement));
                                  System.out.println("지역코드:"+getValue("지역코드",eElement));
                           }
                     }
              } catch (Exception e) {
                     // TODO Auto-generated catch block
                     e.printStackTrace();
              }
              
              
       }
       
       public static void main(String[] args) {
              
              BufferedReader br = null;
              try {
                     String LAWD_CD = "11110";
                     String DEAL_YMD = "201512";
                     String myKey =  "vH4iE0jHiRxyh0nHKQbGEDAnidosddWarT8ipF8KWpJMrP5%2FGURFpDIzy7xdXsfXYK8KX4zhqvm1EzYK7X%2FSvg%3D%3D";
                     String urlstr =  "http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcSHRent?LAWD_CD="+LAWD_CD+"&DEAL_YMD="+DEAL_YMD+
                                         "&serviceKey="+myKey;
                           
                     URL url = new URL(urlstr);
                     HttpURLConnection urlconnection = (HttpURLConnection)  url.openConnection();
                     urlconnection.setRequestMethod("GET");
                     br = new BufferedReader(new  InputStreamReader(urlconnection.getInputStream(), "UTF-8"));
                     String result = "";
                     String line;
                     while((line = br.readLine()) != null) {
                           result = result + line + "\n";
                     }
                     
                     //System.out.println(result);
                     ParsingXML(urlstr);  
                     
              }catch(Exception e) {
                     System.out.println(e.getMessage());
              }
       }
}

facebook login api

2018-12-22 00:00:00 +0000

페이스북 로그인

인증과정과 Access token

  • 사용자의 id, pass를 가지고 있는 것이 부담스럽다(보안적인 측면에서)
  • 그래서 나온것이 Federated Identity(oAuth)
  • 페이스북 로그인 문서 참고( https://developers.facebook.com/docs/facebook-login/web/ )

페이스북 앱 등록

  • https://developers.facebook.com/
  • 로그인 후 내앱에서 ‘새 앱 추가’ 클릭 ( fex라고 작성 )
  • Display Name 작성 후 Create App
  • 새창으로 이동하게 되면 메인 페이지에서 제품추가-‘Facebook 로그인’의 설정 클릭(새창 이동을 안한다면 product 클릭)
  • Web 선택
  • site URL 작성( 연습이므로 http://localhost:8080 ) 그리고 save
  • 사이트 맨 위에 발급받은 앱 ID를 확인할 수 있다

페이스북 로그인 구현 계획

  • developers.facebook 메인 화면에서 상단의 문서를 클릭
  • facebook 로그인을 클릭한다
  • 웹사이트 또는 모바일 웹사이트 클릭
  • 필요한 기능 : sdk 로딩, sdk 초기화, login, logout, isLogined,api

테스트앱 만들기

  • 도메인이 없으므로 테스트 앱을 만든다(본계정보다 가져오는 정보가 제한적임)
  • 메인화면에서 내 앱 클릭
  • 해당앱의 아래쪽 화살표를 누르고 ‘테스트앱을 만드세요’ 클릭
  • 웹사이트 URL 작성(http://localhost:8080)

빠른시작

  • 해당 앱의 설정의 기본설정 페이지 안에 ‘빠른시작’ 을 누르면 자신의 앱의 정보를 초기화해주는 코드를 얻을 수 있다

facebook API 사용

  • 유저의 정보를 가져오는 api를 확인한다
  • https://developers.facebook.com/docs/graph-api/reference/v3.2/profile

SourceCode

<!doctype html>
<html>
<head>
  <title>WEB Welcome</title>
  <meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // 로그인이 되어있다면 connected 상태가 된다
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
        console.log('logined');
      testAPI();
    
    } else {
        console.log('not logined');
      // The person is not logged into your app or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }
  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  // 로그인이 되었는지 아닌지 상태를 체크한다
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }
  
  // 앱 초기화 init
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '338796300298727',
      xfbml      : true,
      version    : 'v3.2'
    });
   // FB.AppEvents.logPageView();
    
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
  };
  // sdk를 다운받아서 페이지로 가져옴
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
  
  function testAPI() {
           console.log('Welcome!  Fetching your information.... ');
           // 이름을 가져오기 위해 api 사용. /me는 로그인한 유저를 가르킨다
           FB.api('/me', function(response) {
           //console.log(response);
             console.log('Successful login for: ' + response.name);
             document.getElementById('status').innerHTML =
               'Thanks for logging in, ' + response.name + '!';
           });
         }
</script>
</head>
<body>
  <div
  class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true">
  <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src =  'https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2&appId=2085645551760952&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="large"  data-button-type="continue_with" data-show-faces="false"  data-auto-logout-link="true" data-use-continue-as="false"></div>
</div>
</body>
</html>

sourcetree 사용법

2018-12-17 00:00:00 +0000

sourcetree 사용법

사용 저장소 및 프로그램

github

  • 인터넷상에 소스코드를 올릴 수 있는 웹 저장소 제공(free면 공개프로젝트만 가능)
  • 회원가입 필요
  • https://github.com/

sourcetree

  • git 관리 프로그램(git 이력, 소스 올리기, 내려받기 등.. 을 할 수 있는 gui 프로그램)
  • sourcetree 다운로드
  • https://www.sourcetreeapp.com/
  • 중간에 Bitbucket 에 가입해야함
  • 설치가 완료되었으면 메뉴 Tools-Options를 누르고 FullName, Email address를 적는다

저장소

Local git 저장소 생성

  • Local git이란 웹이 아닌 자신의 컴퓨터에 git저장소를 만드는 것을 의미한다
  • 내 컴퓨터에 git저장소를 생성한다
  • 맨 위에 탭 +선택
  • Create 선택
  • Browse 버튼을 클릭해서 생성할 폴더 위치를 넣어준다
  • 해당 폴더에 들어가면 .git 이라는 폴더가 생성된 것을 알 수있다
  • .git 폴더가 생기면 git을 사용하고 있는 폴더라는 뜻

Local git 저장소 추가

  • 생성과 달리 이미 만들어진 Local git 저장소를 sourcetree에 불러오는 것
  • 맨 위에 탭 +선택
  • Add 선택
  • Browse 버튼을 클릭해서 가져올 폴더 위치를 넣어준다
  • sourcetree로 버전관리가 가능해진다

Remote git 저장소 가져오기

  • Remote git 저장소란 원격저장소로 웹에 있는 저장소를 뜻한다
  • 웹에 있는 git내용을 내 local로 가져오고 싶을 때 사용
  • 맨 위에 탭 +선택
  • Clone 선택
  • Source Path/URL에는 git 주소를 적는다(git주소는 git 저장소 메인페이지에서 Clone or download 버튼을 누르면 나온다)
  • 두번째 텍스트 창에는 git 폴더를 지정한다
  • Clone 버튼을 누른다
  • Settings 를 누르고 git주소를 추가한다

Commit

Commit 설명

  • git 프로젝트의 내용을 수정한 것을 Local에 저장하는 것
  • Unstaged Files : 수정된 파일이 등록된다
  • Staged Files : 수정된 파일을 ‘Stage Selected’버튼을 클릭하면 ‘Staged Files’창으로 이동한다
  • Commit : Commit 버튼을 누르면 Local 저장소에 저장된다. 그리고 Push에 1이 추가된다
  • Push : Push를 하면 원격 저장소에 내가 수정한 퍄일이 올라간다
  • Pull : Push와 반대로 원격 저장소의 최신 소스를 받을 때 사용한다

Branch

Branch 설명

  • branch는 나뭇가지 처럼 분기된 저장소(비슷한)를 만드는 것을 말한다
  • master는 우리가 이때 까지 사용하던 기본 저장소(브런치)를 말한다
  • 현재 버전에서 기능이 많이 변화된다면 브런치를 만들어야 한다.왜냐하면 A기능을 추가한다고 할 때 A기능을 계속 master 저장소에 커밋하게 되면 라이브 되고 있는 소스와 개발소스가 뒤엉켜서 장애가 날 확률이 높아진다. 그래서 A기능이 완성된 후 한번에 master 저장소에 넣어야 안전하다
  • Branch는 ‘Branch’버튼을 눌러서 생성할 수 있다. 생성되었다면 옆에 BRANCHES 메뉴에 branch 메뉴가 생긴것을 확인할 수 있다
  • a.txt 파일의 내용이 branch마다 다를 때 branch를 이동할 때마다 a.txt 내용이 바뀐다

Merge

  • branch 끼리 소스코드 내용을 병합하는 것
  • 내 소스를 원격 저장소에 올릴 때 사용
  • master와 branch 병합 방법
    1. branch에서 commit 전 반드시 pull한다
    2. pull하고 충돌이 나면 수정하고 수정사항을 올린다
    3. master로 이동하고 branch 오른쪽 마우스클릭하여 ‘Merge work into current branch’ 메뉴를 누른다(가져올 branch로 이동하고 가져올 소스코드가 있는 branch를 선택해 ‘Merge work..’ 버튼을 누르면 된다
    4. master에서 충돌나면 수정하고 아니라면 수정사항을 push해서 원격 저장소에 올린다

충돌해결

  • Merge를 하면 master, branch의 소스코드가 다른부분에서 충돌이 날 수 있다
  • 소스코드 수정 후 수정파일을 오른쪽 클릭 Resolve conflicts-Mark Resolved 클릭

Discard,Remove,Reset, Revert

  • Discard : Unstaged files에 있을 때 파일을 원래대로 되돌릴 수 있다
  • Remove : Unstaged files에 있을 때 파일자체를 삭제하는 것
  • Reset : 커밋이력에 내용을 아예 지워버리면서 특정 버전으로 되돌리는 것.원격 저장소에 올리기전에만 사용할 수 있다
  • Revert : 커밋이력에 내용을 남기면서 특정 버전으로 되돌리는 것

프로젝트 eclipse로 가져오기

  • 이클립스 프로젝트 창에서 오른쪽 클릭 후 ‘Import’ 선택
  • General - Projects from Folder or Archive 선택
  • clone 한 프로젝트 선택
  • 가져오기 완료(이후 수정사항이 있으면 sourcetree에 자동으로 등록된다)

JavaScript event3

2018-12-15 00:00:00 +0000

이벤트 추가

  • on
  • 이벤트를 연결
  • 아래 이벤트는 해당 태그를 클릭 시 내용에 플러스 문자가 붙는다
    $('h1').on('click', function(){
      $(this).html(function(index, html){
        return html + '+';
      });
    });
  • hover
  • mouseenter는 태그 위에 마우스가 놓여져있을 때 발생
  • mouseleave는 태그 위에 마우스가 놓였다가 다른곳으로 가면 발생
  • mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.reverse{
  background: black;
  color:white;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">

  $(function(){
    $('h1').hover(function(){
      $(this).addClass('reverse');

    }, function(){
      $(this).removeClass('reverse');
    });
  });

</script>
</head>
<body>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
</body>
</html>

이벤트 연결 제거

  • off
  • 이벤트 제거
  • one()
  • 이벤트를 한번만 실행
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.reverse{
  background: black;
  color:white;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">

  $(function(){


    $('h1').click(function(){
      $(this).html('CLICK');
      alert('이벤트가 발생');

      //이벤트 제거
      $(this).off();
    });
    $('h1').off();
  });

</script>
</head>
<body>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
</body>
</html>

매개변수 context

  • 매개변수로 selector 외에 context도 사용할 수 있음
  • 해당 선택한 태그의 자식을 선택하고 싶을 때 사용
  • (자식태그명, 선택엘레먼트)로 사용
      var header = $('h1', this).text();
      var paragraph = $('p', this).text();

이벤트 강제 발생

  • trigger()
  • 이벤트를 강제로 발생시킵니다
  • 아래 예제는 h1 태그의 첫번째 엘레먼트의 click이벤트가 발생하면 1초마다 골뱅이가 붙는 예제

  $(function(){
    $('h1').click(function(){
      $(this).html(function(index, html){
        return '@'+html;
      });

      // 1초마다 함수실행
      setInterval(function(){
        $('h1').first().trigger('click');
      }, 1000);
    });
  });
  • preventDefault
  • 기본 이벤트를 제거한다
  • stopPropagation
  • 이벤트 전달 막기
  • < h1 >안에 < a > 태그가 있어서 a 태그 실행 시 이벤트 버블링이 일어난다
  • 이벤트 버블링을 끄려면 함수가 끝나기 전에 stopPropagation()을 호출하면 된다
  • stopPropagation() 함수 호출 대신 return false를 해도 이벤트 전달이 일어나지 않는다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
  *{
    margin: 5px;
    padding: 5px;
    border: 3px solid black;
  }
</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">

  $(function(){
    $('a').click(function(){
      $(this).css('background-color','blue');
      event.preventDefault();
      event.stopPropagation();
    });

    $('h1').click(function(){
      $(this).css('background-color', 'red');
    });
  });

</script>
</head>
<body>
  <h1>
    <a href = "html://hanbit.co.kr">Hanbit</a>
  </h1>
</body>
</html>

이벤트 연결 범위 한정

  • on() 메서드는 이벤트 범위를 한정할 수 있다(delegate)
  • 아래 예제를 실행하면 Header를 누를 때마다 h1 태그가 늘어난다
  • 하지만 새로생긴 h1 태그는 클릭해도 이벤트가 작동하지 않는다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">

  $(function(){
    $('h1').on('click', function(){
      var length = $('h1').length;
      var targetHTML = $(this).html();
      $('#wrap').append('<h1>'+length+'-'+targetHTML+'</h1>');
    });
  });

</script>
</head>
<body>
  <div id='wrap'>
    <h1>Header</h1>
  </div>
</body>
</html>
  • 상위태그에 이벤트를 연결하고, h1 태그를 연결했을 때를 찾아야 한다
  • 함수안에서 this는 h1을 의미(wrap x)
  • 수정후 
    $(function(){
  $('#wrap').on('click','h1', function(){
    var length = $('h1').length;
    var targetHTML = $(this).html();
    $('#wrap').append('<h1>'+length+'-'+targetHTML+'</h1>');
  });
});

마우스 이벤트

  • mouseover
  • 마우스가 해당 태그 안에 있고 움직일 때 마다 발생
  • mouseenter
  • 마우스가 해당 태그 밖에서 안으로 들어올 때만 발생
method 설명
click 마우스를 클릭할 때 발생
dbclick 더블클릭 할 때 발생
mousedown 마우스 버튼을 누를 때 발생
mouseup 마우스 버튼을 땔 때 발생
mouseenter 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
mouseleave 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
mousemove 마우스를 움직일 때 발생
mouseout 마우스가 요소를 벗어날 때 발생
mouseover 마우스를 요소 안에 들어올 때 발생

윈도우 이벤트

  • 무한 스크롤 예제
  • scrollTop : 스크롤의 위치
  • (window).height() : 현재 웹브라우저의 보이는 길이 위치
  • (document).height : 현재 웹프라우저의 문서길이(스크롤해야 보이는 위치까지 계산)
  • 스크롤위치와 현재 웹브라우저가 보이는 위치길이를 더해서 문서길이와 같다면 Infinity Scoll 단어를 계속 body에 추가한다(화면을 끝까지 내리면서 무한스크롤이 된다)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">

  $(window).scroll(function(){
    var scrollHeight = $(window).scrollTop() + $(window).height();
    var documentHeight = $(document).height();
    if(scrollHeight == documentHeight){
      for(var i = 0; i < 10; ++i){
        $('<h1>Infinity Scroll</h>').appendTo('body');
      }
    }

  });

  $(function(){
      for(var i = 0; i <20 ;++i)
      $('<h1>Infinity Scroll</h1>').appendTo('body');
  });

</script>
</head>
<body>
</body>
</html>

Posts

subscribe via RSS