스파르타 코딩 강의 정리_API 이용하여 업데이트 웹사이트 만들기

첫번째 연습. 르탄이 API 이용하여 이미지와 문장 업데이트하기

지난 시간 jQuery를 조합하여 서울시 따릉이 현재 거치 수를 파악할 수 있는 웹사이트를 만들어보았다. 이번에는 이미지가 업데이트 되는 코딩에 대해 알아보도록 한다. 표 보다는 단순하기 때문에 훨씬 쉽게 접근할 수 있다.

 

기존에 제공된 코딩 언어에서 script 부분만 수정하면 된다. 

<script>
  function q1() {
 $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rtan",
        data: {},
        success: function(response){
        let url = response['url']
        let msg = response['msg']

          $('#img-rtan').attr('src',url)
          $('#text-rtan').text(msg)



          }
        })
  }
</script>

코딩은 거의 복붙으로 굳이 모든 언어를 외울 필요는 없지만 그것보다 중요한 것은 ''  [] {} 등의 표시를 누락없이 체크해서 입력해야한다는 점이다. 그리고 한 단어만 틀려도 인식을 못하기 때문에 let 을 통해 이름을 설정할 때도 복사 붙여넣기를 활용하는 것이 좋다. 이미지를 넣을 때도 a.jax 기본 형식에서 url 에는 제공된 르탄이 API 주소를 입력한다.

그리고 실제 API 주소 사이트에서 우리가 필요한 이미지와 메시지의 제목을 확인한다. let 을 이용해 우리가 업데이트해야할 항목인 url과 msg의 이름을 만들어준다.

<div> 로 묶여있는 곳에서 이미지의 이름인 'img-rtan'과 텍스트인 'text-rtan'을 가지고 온다. 이미지에 변화를 줄 url의 이름인 'src'도 필요하다.

 

$(#img-rtan).attr('src',url) ▶︎ 이미지를 붙여넣을 때의 코딩문

$(#ext-rtan).text(msg)▶︎ 텍스트를 붙여넣을 때의 코딩문

 

  

파이참 프로그램에서 완료 후 웹사이트를 확인한다. '르탄이나와' 라는 버튼을 누를 때 마다 이미지와 텍스트가 계속해서 바뀐다. 나중에 웹사이트를 만들 때도 이미지가 계속해서 바뀌는 재미있는 구성을 만드는데 적용할 수 있을 것 같다.

 

두번째연습. 현재기온 API 이용하기

html 마지막 연습으로 아주 간단했다. 기존에 만들어 둔 팬명록이라는 사이트에서 팬명록이라는 글자 아래에 현재기온 API를 넣는 작업이다. 웹사이트에 들어갔을 때, 새로고침을 누를 때마다 현재 기온을 나타낼 수 있다.

<div> 박스 안에 <P>, <span> 이라고 하는 언어를 추가한다. <P>에는 텍스트 '현재기온 : '을 입력하고 <span>에 실제 현재 온도(숫자)를 넣기 위해  url에 있는 temp를 'id =' 뒤에 입력한다. 형식은 00.0 이라고 표시하고 '도' 라는 글자를 넣어서 </p>로 닫아준다.

 

 

<div> 박스의 구성을 변경했다면 업데이트를 설정하기 위해 <script> 로 간다. 

url 도 마찬가지로 현재온도 API 사이트를 넣어주고 function 아래에 르탄이 메세지 변경과 같은 코딩문을 입력한다.

$('#이름'),text(response['temp']) ▶︎ let 으로 temp 의 이름을 따로 설정하지 않았기 때문에 response[]를 함께 입력한다.

 

완성된 모습. 

여전히 매일봐도 생소한 코딩언어이지만 이렇게 개발일지를 쓰다보니 조금씩 정리가 되어가는 것을 느낀다. 물론 시간은 오래걸리지만 매일 매일 연습하고 언어에 익숙해지다보면 나만의 웹사이트를 분명히 만들 수 있을 것이다.