[스파르타 코딩클럽] 웹개발 종합반_2주차

Kim Eun Young·2022년 3월 1일

스파르타 개발 일지

목록 보기

2/2

3주차가 되어서야 2주차 수업을 완주했다. 말로만 듣던 API 사용법을 배워 신이 났던 한 주였다. 확실히 Javascript 는 약간 장벽 같다. 하지만 모든 웹 프로그래밍 언어의 기본이라고 하니 익숙해져야겠지. 😢 Javascript 가 아무리 어려워도 현재 나의 퇴사하고 싶은 마음보다 강적이 되지는 못할 것이다. 👻

1. Javascript 복습

클릭할 때마다 클릭한 누적 횟수에 따라 홀수 / 짝수로 나눠 알림 창을 띄우는 onclick 함수 만들기

let count = 1;

function hey() {
    if (count % 2 == 0) {
        alert('짝수입니다!');
    } else {
        alert('홀수입니다!');
    }
    count += 1;
}

count += 1 는 count = count + 1 와 같다

변수가 함수 안에서 선언 되면 함수가 실행 되면서 변수가 계속 새롭게 선언 되기 때문에, 변수에 계속 1 씩 추가 되거나 하는 조건을 만족할 수 없다
함수 바깥에서 선언 된 변수를 전역 변수 라고 한다
함수와 상관 없이 스크립트 어디서든 사용 가능하다
함수 안에서 선언한 변수는 함수 안에서만 사용 가능하며 함수 실행이 종료 되면 사라진다

2. JQuery

다양한 브라우저를 사용하던 시절, 브라우저 간 호환성 문제로 인해 길고 복잡해지는 Javascript 코드들을 모아 라이브러리로 만든 것
반드시 HTML 상단에 import 해야 JQuery 코드를 사용할 수 있다
상대적으로 Javascript 코드는 길고 복잡한 반면 JQuery 코드는 직관적이다

Javascript 로 div 숨기기

document.getElementById("element").style.display = "none";

JQuery 로 div 숨기기

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

우리가 사용한 Bootstrap 템플릿에는 이미 import 되어 있다
input box 의 값을 가져오기

1. input box 의 id 를 article-url 로 지정한다
2. input box 에 '세종대왕'을 입력한다
3. Console 탭에 $('#article-url').val(); 을 입력한다

input box 에 Jquery 로 값을 입력하기

1. input box 의 id 를 article-url 로 지정한다
2. Console 탭에 $('#article-url').val('장영실'); 을 입력한다

#post-box 를 숨기기

$('#post-box').hide()

#post-box 를 보이게 하기

$('#post-box').show()

요소의 상태에 따라 달라지는 CSS 값을 가져올 수 있다

#post-box 의 CSS 값을 가져오기

$('#post-box').css('width')
'500px'

#post-box 의 CSS 값을 변경하기

$('#post-box').css('width','700px')

#post-box 의 CSS 값을 가져오기

$('#post-box').css('display')
'block'

#post-box 를 숨기기

$('#post-box').hide()

#post-box 의 CSS 값을 가져오기

$('#post-box').css('display')
'none'

#btn-posting-box 의 text 를 변경하기

$('#btn-posting-box').text('포스팅박스 닫기')

$('#btn-posting-box').text('포스팅박스 열기')

백틱 을 사용하여 문자열로 HTML 코드를 입력하면 HTML 코드를 추가할 수 있다

let temp_html = `<button>나는 버튼이다</button>`

$('#cards-box').append(temp_html)

변수를 HTML 코드 안에 값으로 넣고 싶을 때는 ${변수} 형태로 HTML 코드 안에 입력한다

let title = '아무거나 제목!!!'

let temp_html = `<a href="https://www.naver.com/" class="card-title">${title}</a>`

코드를 작성할 때는 alert 이나 console.log 함수로 코드가 잘 실행 되는지 확인하면서 진행하면 좋다
버튼을 누르면 form 이 나타났다가 사라지는 toggle 버튼 만들기

function openclose() {
    let status = $('#post-box').css('display');
    if (status == 'block') {
        $('#post-box').hide();
        $('#btn-posting-box').text('포스팅박스 열기');
    } else {
        $('#post-box').show();
        $('#btn-posting-box').text('포스팅박스 닫기');
    }
}

Javascript 와 JQuery 를 연계해서 사용하는 것이 중요하다

QUIZ

Console 탭에서 연습하면서 잘 실행 되는지 확인하는 습관을 들이자

✔️ 코드를 정확하게 작성해놓고 괄호 } 를 안 닫아서 계속 헤맸다 😢

function q2() {
    let txt = $('#input-q2').val();

    if (txt.includes('@')) {
        let domain = txt.split('@')[1].split('.')[0]
	alert(domain)
    } else {
        alert('이메일이 아닙니다')
    }
}

✔️ 나와 다르게 깔끔하고 간결한 강사님의 코드
✔️ 괄호 쓰는 법도 익숙하지 않아 어렵고 문장 끝에 기호 ; 를 붙여야 하는지 안 붙여도 되는지가 많이 헷갈린다

3. Ajax

Javascript 로 페이지 전환 (새로고침) 없이 서버에서 값을 받아올 수 있는 방법

API 는 서버에서 클라이언트가 데이터를 요청할 수 있도록 열어둔 창구
JSON 은 서버가 클라이언트에게 데이터를 주는 포맷
JSON 형식은 어려워 보이지만 List 에 Dictionary 가 많이 들어 있는 것 뿐이다

클라이언트가 서버에게 데이터를 요청할 때도 타입에 따라 동작하는 기능이 다르다
GET 은 보통 데이터 조회 (Read) 를 요청할 때 사용
POST 는 보통 데이터 생성 (Create) / 변경 (Update) / 삭제 (Delete) 를 요청할 때 사용
데이터 요청할 때 목적에 따라 반드시 해당 타입으로 요청해야 하는 것은 아니고 통상적으로 각각의 타입을 많이 쓰는 편이다

브라우저에 URL 을 입력해서 Enter 를 치는 행위 자체가 GET 요청이다

naver.com/aaa?code=00000
서버의 주소/파일/받는 데이터

code= 뒤의 숫자를 바꾸면 코드값 오류라고 뜬다

데이터의 형식을 클라이언트와 서버가 미리 약속하고 해당 형식으로 보내고 받는 것
두 개의 형식이 어긋나면 데이터를 제대로 받을 수 없다

naver.com/aaa?code=00000&name=sparta

URL 안에서 값을 추가할 때는 기호 & 을 사용한다
name=sparta 를 추가해도 코드값 오류라고 뜨지 않는다
약속하지 않은 요청 데이터가 서버에게 추가로 전달 되었을 뿐이다

? 는 전달할 데이터 작성을 시작할 때 사용
& 는 전달할 데이터가 더 있을 때 AND 의 의미로 사용

Ajax 는 JQuery 를 import 한 페이지에서만 작동 가능하다

Ajax 의 기본 골격

$.ajax({
  type: "GET",
  url: "여기에 URL을 입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

url 에 API 주소를 입력하면 API 데이터가 response 로 들어온다
따라서 예시 코드처럼 입력하면 Console 탭에 API 데이터가 출력 된다

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response['RealtimeCityAir']['row'][0])
  }
})

필요한 데이터만 추출하여 가져올 수 있다
타입은 GET 이고 data 는 현재 가져오는 것이 없는 상태이다
data 는 POST 요청을 할 때 사용하는 것
response 는 변수라 다른 단어로 대체 가능하지만 통상적으로 response 를 사용한다

for 문을 사용하여 미세먼지 수치가 70 미만인 지역의 데이터만 가져오기

$.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']
          if (gu_mise < 70) {
              console.log(gu_name, gu_mise)
          }
      }    
  }
})

QUIZ

서울시 Open API 실시간 미세먼지 상태 데이터를 불러와서 업데이트 버튼을 누를 때마다 새로고침 되게 하기

function q1() {
    $('#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 이상인 곳은 텍스트를 red 로 표시하기

function q1() {
    $('#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)
          }
      }
    })
}

서울시 실시간 따릉이 현황을 업데이트 버튼 누를 때마다 새로 불러오기

function q1() {
    $('#names-q1').empty()
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/seoulbike",
      data: {},
      success: function(response){
        let rows = response['getStationList']['row']
          for (let i = 0; i < rows.length; i++) {
              let station_location = rows[i]['stationName']
              let station_number = rows[i]['rackTotCnt']
              let bike_number = rows[i]['parkingBikeTotCnt']

              let temp_html = `<tr>
                                    <td>${station_location}</td>
                                    <td>${station_number}</td>
                                    <td>${bike_number}</td>
                                </tr>`
              $('#names-q1').append(temp_html)
          }
      }
    })
}

위의 상태에서 따릉이가 5개 미만인 곳은 텍스트를 red 로 표시하기

function q1() {
    $('#names-q1').empty()
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/seoulbike",
      data: {},
      success: function(response){
        let rows = response['getStationList']['row']
          for (let i = 0; i < rows.length; i++) {
              let station_location = rows[i]['stationName']
              let station_number = rows[i]['rackTotCnt']
              let bike_number = rows[i]['parkingBikeTotCnt']

              let temp_html = ``
              if (bike_number > 5) {
                  temp_html = `<tr>
                                    <td>${station_location}</td>
                                    <td>${station_number}</td>
                                    <td>${bike_number}</td>
                                </tr>`
                  $('#names-q1').append(temp_html)
              } else {
                  temp_html = `<tr>
                                    <td class="red-td">${station_location}</td>
                                    <td class="red-td">${station_number}</td>
                                    <td class="red-td">${bike_number}</td>
                                </tr>`
                  $('#names-q1').append(temp_html)
              }
          }
      }
    })
}

랜덤 고양이 API 를 이용하여 버튼을 누를 때마다 새로운 고양이 사진을 불러오기

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

이미지 태그의 주소를 바꾸는 JQuery 코드

$(“#id”).attr(“src”, url)

이제 제법 예제 코드의 길이가 길어졌다. 퇴근하고 필라테스 수업도 듣고 웹 개발 수업도 들으니 하루하루가 정말 빠르게 지나간다. 해야 할 일은 많은데 24시간은 너무 짧다. 하지만 개발자로서의 새로운 인생을 시작하기 위해서 더 열심히 해야지! 💪

Kim Eun Young

이전 포스트

[스파르타 코딩클럽] 웹개발 종합반_2주차

스파르타 개발 일지

1. Javascript 복습

2. JQuery

QUIZ

3. Ajax

QUIZ

[스파르타 코딩클럽] 웹개발 종합반_1주차

0개의 댓글