[웹 개발] 2주차 : JavaScript, jQuery, Ajax, API

hyeonbin·2023년 1월 17일
APICSSJavaScriptajaxhtmljquery웹 개발프론트엔드

웹 개발

목록 보기
3/9
post-thumbnail

📢 시작 한마디

2주차도 상큼하게 시작해 보자!!👍 수업은 금방 들은 것 같은데 개발일지는 왜 갈 길이 멀어 보일까...? 이것저것 달마다 계획은 산처럼 쌓아두고 다음 날이면 막상 현실을 깨닫는다. 그래도 뭐 해야지 어쩌겠어... 내가 성인이 되고 깨달은 것 중, 가장 크게 와닿은 것이 바로 '시간은 금'이라는 것이니깨... 홀홀홀...

그러니까 시간 관리를 잘하자!! 그것이 답이다~!! 😄

✅ 2주차 진행 및 완료 사항

  • Javascript 문법에 익숙해지기
  • jQuery로 간단한 HTML 조작 가능
  • Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받기
  • 2주차 숙제 : 팬명록 날씨 정보 추가하기

✅ 발생한 문제, 고민 또는 이를 해결한 과정

📌 문제 & 고민

let temp_html에 ${} 중괄호를 넣어야 하는데 자꾸 습관적으로 $() 소괄호를 넣어서 오류가 뜬다. 나는 멍청이~ 예예~ 뜨윗뜨윗뜨윗뜨윗~

🔎 해결

한 번씩 에러가 나서 아무리 코드를 들여다봐도 답이 없을 땐, 괄호나 오타를 신경쓰자!

✅ 오늘 배운 내용

📍 Javascript 복습하기

  • 홀짝 판별 onclick 함수 만들어보기
    → 짝/홀수 판단하는 방법
    let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0
 let even = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1
    → 짝/홀수 onclick 함수
    1) 내 생애 최고의 영화들 '영화 기록하기' 이용
    2) 새로고침이 아니라 눌렀을 때마다 홀, 짝, 홀, 짝 나오게 하기
    3) 몇번 눌렀는지 알려면 그런 값을 저장하고 있는 let count를 만들어 0부터 시작
    4) 그 다음, hey()로 와서 한 번 hey()를 누르면 count를 하나 증가
    5) 만약 count가 2로 나왔을 때, 나머지가 0이면 '짝수입니다!'를 나타내고
    6) 그게 아니면, '홀수입니다!'를 나타냄

📍 JQuery 시작하기

  • jQuery란?

    1) 자바스크립트 라이브러리!
    2) HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것
    3) Javascript로도 모든 기능을 구현할 수는 있지만,
    → 1) 코드가 복잡, 2)브라우저 간 호환성 문제 고려 해야해서 jQuery라는 라이브러리가 등장
    4) 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이므로 쓰기 전에 꼭 임포트!
    → <head>태그 사이에 넣기

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

  • jQuery와 Javascript 코드 비교하기

    1) Javascript로 길고 복잡하게 써야하는 것을

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

    2) jQuery로 보다 직관적으로 쓰는 것이 가능

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

📍 JQuery 다뤄보기

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

    • 영화URL에 있는 값을 입력하기 & 가져오기
      → id 값이 url인 곳을 가리키고, val()로 값을 입력하고 가져옴


  2. div 보이기 / 숨기기

    • 영화 포스터 카드들을 여러 개 붙여주기
      → id 값이 post-box인 곳을 가리키고, hide()로 안보이게 show()로 보이게 함


  3. 태그 내 html 입력하기

    • div태그 내에, 동적으로 html을 넣고 싶으면, 카드가 붙는 div에 id 값 추가


    • 버튼을 넣어보기


    • 버튼 말고, 카드 넣어보기


📍 JQuery 적용하기

  • 포스팅 박스 버튼에 function 달기
    → id 값은 이미 가지고 있음

    function open_box() {
 alert('박스 열기')
}
function close_box() {
 alert('박스 닫기')
}
<button onclick="open_box()">영화 기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

  • 클릭해서 포스팅 박스를 여닫게 하기
    → 포스팅 박스 제어하기

  • post-box 시작부터 감춰두기
    → css의 display: none;


📍 Quiz_JQuery 연습하기

  • jQuery + Javascript 조합 연습하기

    1) 빈칸 체크 함수 만들기

    → input-q1의 입력값을 가져온다! $('#input-q1').val()
    → 만약 입력값이 빈칸이면 '입력하세요!'를 띄우고, 그게 아니면 입력값 띄우기

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

    → input-q2 값을 가져온다! $('#input-q2').val()
    → 만약 가져온 값에 @가 있으면 info@gmail.com -> gmail만 추출 .split('@')이용
    → alert(도메인 값);으로 띄우고, 만약 이메일이 아니면 '이메일이 아닙니다!'라고 띄우기

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

    → input-q3 값을 가져온다! $('#input-q3').val()
    → 가져온 값을 이용해 names-q3에 붙일 태그 만들기
    → 만들어둔 temp_html을 names-q3에 붙이기 jQuery의 $('...').append(temp_html) 이용
    → names-q3의 내부 태그 모두 비우기 jQuery의 $('....').empty() 이용

    4) 완성된 전체 코드

<!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;
        }
    </style>

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

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

        function q3() {
             let txt = $('#input-q3').val()
             let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
        }

        function q3_remove() {
            $('#names-q3').empty()
        }
    </script>
</head>

<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>

<div class="question-box">
    <h2>1. 빈칸 체크 함수 만들기</h2>
    <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
    <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
    <input id="input-q1" type="text"/>
    <button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>2. 이메일 판별 함수 만들기</h2>
    <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
    <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
    <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
    <input id="input-q2" type="text"/>
    <button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>3. HTML 붙이기/지우기 연습</h2>
    <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
    <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
    <input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
    <button onclick="q3()">이름 붙이기</button>
    <button onclick="q3_remove()">다지우기</button>
    <ul id="names-q3">
    </ul>
</div>
</body>

</html>

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

  • 서버 → 클라이언트 : JSON 이해하기

    1) 서울시 OpenAPI에 접속하기

    http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

    2) 크롬 익스텐션 JSONView 설치하기 (좀 더 예쁘게 JSON 보는 것이 가능)

     https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

    3) JSON은 Key:Value로 이루어져 있음 (자료형 딕셔녀리와 아주 유사함)

    → RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가 있고,
    → 그 안에 row라는 키 값에는 리스트형 value가 들어가 있음


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

    [ API는 은행 창구와 같은 것 ]

같은 예금 창구에서도 개인 고객이나 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼
클라이언트가 요청 할 때에도, '타입'이라는 것이 존재

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

    ※ POST - 통상적으로 데이터 생성(Create), 변경(Upadate), 삭제(Delete) 요청할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정

    1) GET

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

위 주소는 "?"기준으로 앞부분이 (서버주소), 뒷부분이 (영화번호)

＊ 서버주소 : https://movie.naver.com/movie/bi/mi/basic.naver
＊ 영화정보 : code=74977 

그럼, code라는 이름으로 영화번호를 주자!는 것은 누가 정한 걸까?
→ 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속!

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

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

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

위 주소는 google.com이라는 컴퓨터의 search창구에 다음 정보를 전달

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

📍 Ajax 시작하기

  • Ajax 기본 골격
    → Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

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

  • $ajax 코드 설명

    1) type: "GET" → GET 방식으로 요청
    2) url: 요청할 url
    3) data: 요청하면서 함께 줄 데이터 (GET 요청시에는 비워두기)

    GET 요청은 url뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value&param2=value2 

POST 요청은, data: {}에 넣어서 데이터를 가져감
data: { param: 'value', param2: 'value2' }

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

  • Ajax 통신의 결과값을 이용해보기

    1) 개발자도구 콘솔에 찍어보기

    2) 모든 구의 미세먼지 값을 찍어보기
    → 미세먼지 데이터가 어디에 있는지 찾기

    → 노란박스 : 미세먼지 데이터 꺼내기
    → 초록박스 : 반복문을 이용해 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력


📍 Ajax 함께 연습하기

  • 서울시 OpenAPI(실시간 미세먼지 상태)를 이용해 업데이트 버튼을 누를 때마다 찍히게 하기
    → 콘솔말고 페이지에 찍어주기 temp_html 이용

  • 한 걸음 더! 미세먼지 수치가 35이상인 곳은 빨갛게 보여주기
    → <li class = "bad">라는 이름표 붙여서 color: red 넣기
    → 만약, gu_mise의 값이 35이상이면 temp_html이 bad가 되고
    → 그게 아니면, temp_html의 bad가 없음


  • 완성 코드
<!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;
        }

        .bad {
            color: red;
        }
    </style>

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

                        if (gu_mise > 35) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)
                    }
                }
            })

        }
    </script>

</head>

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

<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
    </ul>
</div>
</body>

</html>

📍 Ajax 연습하기(1)

  • 서울시 OpenAPI(실시간 따릉기 현황)를 이용해 업데이트 버튼을 누를 때마다 찍히게 하기


📍 Ajax 연습하기(2)

  • 랜덤 르탄이 API를 이용해 버튼을 클릭하면 이미지 / 텍스트 바뀌게 하기
    → 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
    → 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

✅ 회고

2주차 웹 개발 종합반을 복습하다 보니, 이해되지 않고 헷갈리는 부분이 정리되는 느낌이다. 역시 처음이 어렵지 한 번 발을 내디디면 재미와 흥미를 가지게 된다. 그렇다고 수업이 쉽다는 것은 절대 아니다. 하루라도 쉬면 머리가 하얗게 리셋되는 걸 잘 아니까 ㅎㅎ 😱

이번 주에 배운 jQuery와 Javascript, Ajax 역시 무작정 외우는 것이 아니라, 반복하고 또 반복하고 자연스럽게 개념을 이해하는 것이 가장 공부에 도움이 된다.

참고로 'Ajax 연습하기'에서 '르탄이 나와' 버튼을 누를 때마다 르탄이 캐릭터가 너무 귀여워서 눈이 즐거웠다. 불닭 먹는 르탄이도 있으면 좋겠다고 살포시 의견을 추가해 본다... ㅎㅎ

무튼 항상 꾸준하게! 진득하게! 개발 공부를 해 보자!! 그리고 2주차 개발일지는 하루 만에 작성 완료했다는 사실?? 오케이 또 하나 해냈다고오~ 앞으로도 화이팅 해보자고오~✌️

그럼, 2주차 숙제와 3주차 개발일지를 쓰러 가야지!

아디오스! 뿅 🖐🏻🖐🏻🖐🏻

profile
hyeonbin
할 수 있다고 믿는 사람은 결국 그렇게 된다 😄😊
이전 포스트

[Python] 파이썬 딱! 기초 문법만 알아보자!

다음 포스트

[웹 개발] 2주차 Study : 팬명록 날씨 정보 추가하기

0개의 댓글