개발자 되는 중/개발 공부

스파르타 코딩 웹개발 개발일지 2주차 (복습)

SeonChoco 2022. 10. 11. 14:49

html, css, javascript  중

javascript에 jquery라는 간단하게 쓰는 라이브러리

jquery중 api를 이용하는 ajax가 있다

 

1. 저번에 배운 함수 간단 복습

 

클릭 숫자가 홀짝인지 판별하는 함수 만들기

count 0에서 클릭하니까 하나 더 들어가게 할 떄 += 를 넣는다. 

%2로 나누었을 때 0이라면 할 때 == 이꼴 두개 들어간다. 

   let count = 0
      function hey() {
          count += 1
          if(count % 2 == 0) {
              alert('짝')
          } else{
              alert('홀')
          }
      }

02. JQuery 시작하기

 

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

 

2) jQuery 사용하기

이거 붙여넣기 해야지만이 복사 붙여넣기해서 제대로 사용 할 수 았다.

<head>안에 넣어준다

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

 

CSS에서 꾸며줄 것을 지칭할 때 class를 이용했던 것 처럼 JQuery는 id를 만들어서 지칭해준다.

 

03. JQuery 다뤄보기

1. input 박스의 값을 가져와보기

$('#url').val('입력')
//url 칸에 입력이 들어감
$('#url').val()
'강아지'

2. div 보이기 / 숨기기

$('#post-box').hide() //포스트 박스가 사라진다
$('#post-box').show() // 포스트 박스가 나타난다

3. 태그 내 html 입력하기

1) 버튼을 넣어보기

let temp_html = `<button> 버튼임</button>`
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

2) 버튼 말고, 카드를 넣어보기

let temp_html = `<div class="col">
                    <div class="card">
                        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">제목이 들어감</h5>
                            <p class="card-text">내용 들어감</p>
                            <p>⭐⭐⭐</p>
                            <p class="mycomment">코멘트 들어감</p>
                        </div>
                    </div>
                </div>`
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

temp_html을 정해준대로 들어간다.

let mytitle = '센과 치히로'
undefined
let temp_html = `<div class="col">
                    <div class="card">
                        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">${mytitle}</h5>
                            <p class="card-text">내용 들어감</p>
                            <p>⭐⭐⭐</p>
                            <p class="mycomment">코멘트 들어감</p>
                        </div>
                    </div>
                </div>`
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

04. JQuery 적용하기(포스팅 박스)

1) 포스팅박스 열기/닫기 기능을 붙여보기

<button onclick="hey()">영화 기록하기</button>
<button onclick="hey1()" type="button" class="btn btn-outline-dark">닫기</button>
<script>
    function hey() {
        $('#post-box').show()
    }
    function hey1(){
        $('#post-box').hide()
    }

</script>

 

처음부터 안보이게 하는 기능은 css에서 해줘야한다. style에 들어가서 원하는 것의 class를 찾아 아래 내용을 넣는다. ㅣ: 

display: none;

근데 큰 class로 묶어주고 display: none;을 했더니 Jquery로 보여주기 함수를 만들어서 적용했는데도 작동하지 않았다. 

사라지고 나타날 클래스를 정확히 묶어주고 해야한다.

 

05. Quiz_JQuery 연습하기

jQuery + Javascript의 조합을 연습하자!

강사님이 기본 뼈대랑 id랑 함수이름 맞는 위치에 다 설정해놓으셨다.  그 이름을 활용해서 만들기만 하면 된다.

1. 빈칸 체크 함수 만들기

1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기

[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기

function q1() {
if( $('#input-q1').val() == '' ) {
    alert('입력하세요!')
    }
    else {
    alert($('#input-q1').val())
    }

    // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}

2. 이메일 판별 함수 만들기

2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기

2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기

[완성본]2-3. 이메일 도메인만 얼럿 띄우기

function q2() {

    if ($('#input-q2').val().includes('@') == true) {
        alert($('#input-q2').val().split('@')[1].split('.')[0])
    } else {
        alert('이메일이 아닙니다')
    }

// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}

3. HTML 붙이기/지우기 연습

3-1. 이름을 입력하면 아래 나오게 하기

[완성본]3-2. 다지우기 버튼을 만들기

function q3() {
      if ($('#input-q3').val()=='' ) {
        alert('이름을 입력하세요')
    }else{
        let txt = $('#input-q3').val()
        let temp_html = `<li>${txt}</li>`
        $('#names-q3').append(temp_html)
    }
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
    $('#names-q3').empty()

// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}

조건에서 '같으면' 은 ==를 써준다. 

강사님은 첫번째랑 두번째 퀴즈에서도 

입력값을 txt로 정해놓고 함수에 이용했다.

 

06. 서버- 클라이언트 통신 이해하기

1) 서버→클라이언트: "JSON"을 이해하기

그냥 OpenAPI에 들어가면 자료들이 보기 힘들게 되어있다

JSONView 다운로드

JSON은 Key:Value로 이루어져있다. 자료형 Dictionary와 아주 유사하다.

 

2) 클라이언트→서버: GET 요청 이해하기

Api는 은행창구과같은것

타입이 있다

GET 타입: 보통 데이터 조회 요청할때 

POST타입: 보통 데이터 생성, 변경, 삭제 요청할 때

 

오늘은 GET방식을 많이 쓸건데

우리는 이미 GET방식을 잘 쓰고 있다. 

주소창에 검색하는게 GET방식

검색창에 넣는 것은 우리가 은행창구에 주민등록번호를 주는 것과 비슷

형식은 미리 약속을 해놓는다.

 

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

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

 

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

 

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

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

q=아이폰 (검색어)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

 

07. Ajax 시작하기

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

(Ajax가 JQuery의 한 종류라서 그런가보다)

JavaScript에서 어떻게 서버를 요청하는지- Ajax를 배워보자

 

 

 

아래의 코드를  script에 넣어준다

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

url 자리에 자료주소 넣는다

 

리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.

http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.

data: { param: 'value', param2: 'value2' },

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

 

        $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        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']
                console.log(gu_mise, gu_name)
            }
        }
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 31 '중구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 39 '종로구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 -99 '용산구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 42 '은평구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 37 '서대문구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 36 '마포구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 31 '광진구'
index.html?_ijt=smddej35hd3h439rr56083pii&_ij_reload=RELOAD_ON_SAVE:104 33 '성동구'

08. Ajax 함께 연습하기 (했던건데 진~짜 기억이 안난다.)

서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

모든 구의 미세먼지를 표기해주세요

업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.

함수 안에 ajax를 넣어준다.(가능한지 몰랐다. 근데 jquery의 한 종류가 ajax니까 생각해보니 당연함)

function q1() {
    $('#names-q1').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        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)
            }
        }
    })
}

처음 시작할 때 지우고 시작하게 empty() jquery를 냅다 넣어야함

for let 반복문을 이용할 때 괄호 아직 외워서 못한다.

rows를 설정하는 것은 한번 짧게 만들어서 쉽게 쓰기 위함이다.

 

[한걸음 더] 미세먼지 수치가 40이상인 곳은 빨갛게 보여줄까요?

스타일 안에 

.bad {
    color: red;
}

함수 안의 반복문 안에 내용들을 다 넣어줬다.

반복문 안에 조건문도 넣어줬다. 

css를 사용하여 40보다 클 때 빨간색으로 표시해주었다

function q1() {
    $('#names-q1').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        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 > 40) {
                   let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                } else {
                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                }


            }

        }
    })
}

위와 같이 해도 되지만

let temp_html = ''

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

temp_html을 빈 문자열로 만들어주고 조건에 따라 만들어주는데 이때 let은 빈 문자열 만들 때 한번만 쓴다

 

09. Quiz_Ajax 연습하기(1) -이쯤 되니까 기억이 새록새록

서울시 OpenAPI(실시간 따릉이 현황)을 이용하기

모든 위치의 따릉이 현황을 보여주세요

업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.

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

        let temp_html = `
            <tr>
            <td>${name}</td>
            <td>${rack}</td>
            <td>${park}</td>
            </tr>
            `
        $('#names-q1').append(temp_html)
      }
    }
  })
}

[한걸음 더] 따릉이 대수가 5대 미만인 곳은 빨갛게 보여주면 어떨까요?

let temp_html = ''

if (park < 5) {
  temp_html = ` <tr class = bad>
    <td>${name}</td>
    <td>${rack}</td>
    <td>${park}</td>
    </tr>`
  $('#names-q1').append(temp_html)
} else {
  temp_html = `<tr>
    <td>${name}</td>
    <td>${rack}</td>
    <td>${park}</td>
    </tr>`
  $('#names-q1').append(temp_html)
}

10. Quiz_Ajax 연습하기(2)

1) 랜덤 르탄이 API를 이용하기

api가 이미 자동으로 자료가 변하게 되어있는 형식이라서 그런지는 모르겠지만

 

for let 반복문으로 자료를 다 뽑아주려했으나 되지 않았다. 

반복은 없어도 간단하게 각각 이름을 설정했다

그리고 temp_html으로 틀을 만들어주고 append를 마지막에 쓰려고 시도를 하는 와중에 

  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

힌트에 이미 각각 기능을 하는 jquery를 쓰라고 알려주어서 이대로 했다

그랬더니 성공

 

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

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

        }
    })
}

11. 2주차 끝 & 숙제 설명

1주차에 완성한 팬명록에 날씨 정보를 넣어주세요!

로딩이 완료되면,날씨API을 이용해서 날씨를 표시해주세요.

javascript 로딩 후 실행

   $(document).ready(function(){
   alert('다 로딩됐다!')
});

 

 

script부분

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/busan",
        data: {},
        success: function (response) {
            $('#temp').append(response['temp'])
        }
    })
});

정답 코드는 append 대신에 text를 써주었다

$('#temp').text(response['temp'])

 

body 부분

<div class="mytitle">
    <h1>Doja Cat Fan Book<h1/>
        <p class="mytemp">현재기온: <span id="temp"></span>도</p>
</div>

style 부분

.mytemp{
    font-size: 20px;
}

'개발자 되는 중 > 개발 공부' 카테고리의 다른 글

스파르타 코딩 웹 개발 개발일지 4주차 (복습)  (0) 2022.10.13
스파르타 코딩 웹개발 개발일지 3주차 (복습)  (0) 2022.10.12
스파르타 코딩 웹개발 개발일지 1주차 (복습)  (0) 2022.10.04
스파르타 코딩 SQL 문법 총정리 하기  (0) 2022.10.01
스파르타 코딩 클럽 SQL 개발일지 4주차  (0) 2022.09.27

'개발자 되는 중/개발 공부'의 다른글

  • 현재글스파르타 코딩 웹개발 개발일지 2주차 (복습)

관련글

댓글

티스토리툴바