공대생

스파르타코딩 2주차 본문

스터디/스파르타코딩

스파르타코딩 2주차

상수나무 2021. 7. 11. 16:37

어제 교보문고에 가서 '프로그래머로 사는 법'이란 책을 읽다가 내용이 좋아 구매하고 왔다.

소프트웨어 분야에서 거장급의 사람들은 모두 자신이 재미있어하는 일을 하고 있다는 사실을 성공의 기준으로 얘기한다. 어떤 분야에서 일을 하더라도 자신이 좋아하고 즐거워하는 일을 찾아서 하라는 조언이 많았다.

내가 이 일을 좋아하는지 알 수 있는 가장 좋은 척도는 일을 할 때 자기도 모르게 얼마나 빠르게 시간이 흘러가는지를 보는 것이라고 한다. 진짜 그 일이 재미있다면 일에 빠져들어 시간가는지도 모르게 집중하고 있다는 얘기이기 때문이다.

 

이 책을 읽기 전날 나는 스코의 1주차 수업을 다듣고 과제를 하는데 4시간 정도의 시간을 쏟았다. 매주 금요일에 하는 코딩 스파랜드는 8~11시에 있는데 나는 8시에 시작해서 12시 넘어서까지 코딩을 붙잡고 있었다. 과제를 끝내고 났을때 시간을 봤더니 12시가 넘어있던 거였다. 스파랜드 창을 보니 나만 남아있었다..

이정도로 집중해서 코딩을 한거면 아마도 내가 이 일을 즐기고 있다는 얘기가 아닐까?

 

스파르타 코딩 2주차에서는 자바스크립트 코드와 이를 더 편하게 쓸 수 있는 jquery, ajax로 서버에서 데이터를 가져와 화면에 보여주는 작업을 위주로 배웠다. 

 

[수업 목표]

  1. Javascript 문법에 익숙해진다.
  2. jQuery로 간단한 HTML을 조작할 수 있다.
  3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

1. JQuery란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다.

(그렇게 때문에, 쓰기 전에 "임포트"를 해야한다.)

예)

$('#element').hide();

임포트하기

<head> 와 </head> 사이에 아래를 넣으면 된다.

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

html코드에서 동작하기 원하는 곳에 id(여기서는 post-url)를 지정해주고 이를 스크립트 코드에서 가리킨다.

$(#'id값').명령어() 형식이다. 

예)

 

jquery 사용 예

input 박스의 값을 가져오기 $('#post-url').val();
div 보이기 / 숨기기 $('#post-box').show(); / $('#post-box').hide();
css의 값 가져와보기 (display 속성 값을 가져와봄) $('#post-box').css('display');
태그 내 텍스트 입력하기(input box의 경우) $('#post-url').val('여기에 텍스트를 입력하면!');
태그 내 텍스트 입력하기(그 외) $('#btn-posting-box').text('포스팅 박스 닫기');
태그 내 html 입력하기(동적으로 html을 넣고 싶을 때) let temp_html = '<button>버튼이다!</button>';
$('#cards-box').append(temp_html);

jquery연습

'포스팅박스 열기' 버튼을 누르면 숨겨진 창이 나타나고 버튼의 내용이 '포스팅박스 닫기'로 바뀐다. 다시 한 번 버튼을 클릭하면 원래 모습으로 돌아간다.

(1) 포스팅 박스 열기 버튼에 function을 달기

<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

(2) 클릭 해서 포스팅 박스를 여닫게 하기

-포스팅 박스에 id 값을 주기

<div class="form-post" id="post-box">
    <div>
        <div class="form-group">
            <label for="exampleFormControlInput1">아티클 URL</label>
            <input class="form-control" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary">기사저장</button>
    </div>
</div>

-포스팅 박스 제어하기

function openclose() {
    // id 값 post-box의 display 값이 block 이면(화면에 보이는 상태)
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
    } else {//화면에 안보이는 상태
        // 아니면 post-box를 펴라
        $('#post-box').show();
    }
}

(3) posting-box를 시작부터 감춰두기 (css의 display:none 속성!)

<div class="form-post" id="post-box" style="display:none">

(4) '포스팅박스 열기' 버튼의 글씨 바꿔주기

-포스팅박스 열기 버튼에 id 값 주기

<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>

-버튼 텍스트를 바꿔주기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
				// 가렸으니까 이제 열기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
				// 폈으니까 이제 닫기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}

 

2. Ajax란?

서버→클라이언트: "JSON"파일 보냄

클라이언트→서버: GET 요청

 

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴

 

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미이다.

& : 전달할 데이터가 더 있다는 뜻이다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달한다.

q=아이폰 (검색어) / sourceid=chrome (브라우저 정보) / ie=UTF-8 (인코딩 정보)

 

**Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

 

Ajax 기본뼈대

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

Ajax 활용

-서울시 모든 구의 미세먼지 값을 찍어보기

$('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html);
                    }
                }
            })

-미세먼지 수치가 70 이하인 곳은 빨간색으로 표시해주기

$('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];

                        let temp_html = ''

                        if (gu_mise > 70) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        
                        $('#names-q1').append(temp_html);
                    }
                }
            })

-랜덤 고양이사진 url받아서 버튼 클릭할때마다 이미지 바꿔주기

$.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function(response){
              let imgurl = response[0]['url'];
              $("#img-cat").attr("src", imgurl);
            }
          })

**이미지 바꿔주는 코드 : $("#img-cat").attr("src", imgurl);

 

3. 과제(실시간 환율 표시하기)

페이지를 새로고침 할때마다 실시간으로 환율을 표시해줘야함

$(document).ready(function(){
	//여기에 함수를 넣으면 새로고침할때마다 실행
});

예)

<script>
      $(document).ready(function () {
              q1();
      });

      function q1(){
        $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {

                  let rate = response['rate'];
                  temp_html = `<p>달러-원 환율: ${rate}</p>`;
                  $('#rate').append(temp_html);
                }
            })
      }

      function order() {
        alert('주문이 완료되었습니다!');
      }
    </script>

결과)

'스터디 > 스파르타코딩' 카테고리의 다른 글

스파르타코딩 3주차  (0) 2021.07.20
스파르타코딩 1주차  (0) 2021.07.09
'스터디/스파르타코딩' Related Articles more
Comments