[스코클] 비개발자를 위한 웹개발 종합반-2주차

take-away

1. 난이도가 갑자기 급상승

2. Ajax 활용하여 외부데이터 불러오기 연습 (온도, 미세먼지, 이미지 등)

3. 언어의 문법이 익숙치 않아 그런지, 코드가 자꾸 헷갈림. 특히 각종 괄호, 쉼표, 따옴표 등

4. 그래도 재미는 있음

5. 나만의 라이브러리를 만들어야 하나 생각중

 

0. 이번주차 배울 것

- 자바스크립트 버튼 

- 서울시 홈페이지 정보 긁어오기

 

1. Javascript 복습

1.1. 홀짝 판별기

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

* 따로 온클릭 지정 해줘야 함 (e.g., <button onclick ="hey()"> </button>

 

2. JQuery

- HTML의 요소를 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리!

- jQuery와 Javascript (jQuery가 더 단순, 직관적)

- jQuery library 연결

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

- jQuery 자주쓰는 기능

1) input 박스의 값 가져오기

- 값을 가져오려면 그 값을 지칭할 수 있어야 함 (= 'id), CSS 에서는 'class'

$('#url').val('뭐라도 넣어보자') input

$('#url').val() output

'뭐라도 넣어보자'

2) div 보이기/숨기기

- postbox 숨기기/보이기

$('#post-box').hide()
$('#post-box').show()
*일단 id 지정을 해야 함
S.fn.init [div#post-box.mypost]

3) 태그 내 html 입력하기

- 버튼 추가하기

let temp_html = `<button>나는 버튼이다</button>` (html과 비슷한 문자열을 정의 - 임시로 나는 버튼이다라는 버튼을 html 비스무레하게 정의)
$('#cards-box').append(temp_html) (위의 문자열을 html화 시키는 jQuery 기능 - cards-box에다가 위에 정의한 버튼을 붙이겠다)

 

- 영화 박스 붙이기

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>`

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

 

- 특정 버튼을 클릭하면 포스트 박스가 나타나거나 사라지게 하기

<script>
  function open_box(){
    $('#post-box').show()
  }
  function close_box(){
    $('#post-box').hide()
  }
</script>

해당 버튼에 onclick = "open_box()" / onclick = "close_box()" 를 넣어야 함. 

 

연습문제

1) 빈칸체크 함수 만들기

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

- let 으로 새로운 입력값을 받아야 뒤에서 해당 내용을 다시 쓸수 있음. 

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

function q2() {
    let txt = $('#input-q2').val()
    if (txt.includes('@') == true) {
        alert(txt.split('@')[1].split('.')[0])
    } else {
        alert ('이메일이 아닙니다.')
}
    // console.log(txt.includes('@'))
    //구글링: 자바스크립트 문자열 확인
    // text 가 문자열 '@'를 포함한다? console 위에 다한 값이 로그로 찍힘 (true or false)
    // 1. input-q2 값을 가져온다.
    // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
    // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
    // 4. alert(도메인 값);으로 띄우기
    // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}

정리

- 구글링도 어려움.

- console.log 명령은 웹의 콘솔에만 log를 남기도록 하는 명령

- 여기도 let으로 새로운 입력값을 설정해주는 작업을 맨 처음 해야 함

- if절을 통해 이메일인지 아닌지 여부 확인 (.includes('') 활용. 값은 true/false로 나옴. 이 코드를 통해 입력값이 이메일이라는 것이 확인되면, 해당 입력내용을 가지고 email domain 만 잘라서 출력 (.split) 활용

- 중괄호, 소괄호 등을 잘 확인할 것. 

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

function q3() {
    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()를 이용하면 굿!)
}

정리

 1) 처음 let 쓰는 것부터 생각이 안남. 왜let을 써야 하는가? 새로운 값을 받아야 하기 때문에 txt라는 변수를 새로 만들어서 입력값을 받아온다. 그 다음 temp_html이라는 임시 구문을 생성 (임시구문에도 입력값이 들어갈 수 있도록 하고, 인풋이 들어오면 jquery append 명령을 써서 새로운 입력값을 생성하도록 함. '어디에' 생성하는지도 중요한데, #names-q3라는 id위치에 입력값을 추가하는 개념. 그래서 그 위치를 지정해 놓는 것이 중요.

 

삭제할 때도 마찬가지로 어느 위치의 값을 삭제할 지 jquery값을 써서 지정. 삭제function 을 특정 버튼에 연동시켜서 클릭시 명령을 수행하도록 설정. (위에 입력도 마찬가지)

 

3. 서버 - 클라이언트: "JSON"을 이해하기

3.1. API는 은행 창구와 같은것

- get type: 통상적으로 데이터 조회 요청 (e.g., 영화목록 조회)

- post type: 통상적으로, 데이터 생성 (create), 변경 (update), 삭제(delete) 요청할 때 (e.g., 회원가입, 탈퇴, 비번수정 등)

3.1.1. get 방식

3.1.1.1. 데이터 전달 방식

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

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

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

   - q=아이폰 (검색어)

   - sourceid=chrome (브라우저 정보)

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

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

- ? 기준으로 앞부분이 <서버주소>, 뒷부분이 영화번호

 

3.2. Ajax: 자바스크립트에서 어떻게 서버를 요청하는가?

- jason 형식: 딕셔너리+리스트 느낌(?)

3.3. 실습 

3.3.1. 서울시 미세먼지

- 미세먼지openAPI: http://spartacodingclub.shop/sparta_api/seoulair

- Ajax 기본 골격

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

3.3.2. 따릉이

- quiz: http://spartacodingclub.shop/ajaxquiz/02_2

3.3.3. 랜덤르탄이

- 르탄이 API: http://spartacodingclub.shop/sparta_api/rtan

- Ajax quiz2: 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <style type="text/css">
      div.question-box {
        margin: 10px 0 20px 0;
      }
      div.question-box > div {
        margin-top: 30px;
      }
      
    </style>

    <script>
      function q1() {
        // 여기에 코드를 입력하세요
      }
    </script>

  </head>
  <body>
    <h1>JQuery+Ajax의 조합을 연습하자!</h1>

    <hr/>

    <div class="question-box">
      <h2>3. 르탄이 API를 이용하기!</h2>
      <p>아래를 르탄이 사진으로 바꿔주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <button onclick="q1()">르탄이 나와</button>
      <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
      </div>
    </div>
  </body>
</html>

- 힌트

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

3.3.4. 숙제

- 날씨 API: http://spartacodingclub.shop/sparta_api/weather/seoul

- 로딩 후 호출:

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