웹개발 일지

웹개발 일지 - 2주차: Javascript, JQuery, Fetch

Hyerin P. 2023. 3. 1. 15:27
 
 

 

▷ 자바스크립트란?

  • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.
  • [잠깐 상식!]
    Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?
    A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.

 

▷ Javascript 기초 문법 배우기

  • 화면에 미리 찍어보는 console.log()
    • 우리가 코딩한 것이 맞게 출력되는건가..?를 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log 입니다!

<script>
console.log('안녕하세요')
</script>

  • 변수 & 기본연산
    • let으로 변수를 선언합니다.
      • let a = 2
        a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!

        // 변수는 값을 저장하는 박스예요.
        // 처음 변수를 저장하려면, let을 앞에 붙여주세요!
        // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
    • 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
      • let a = 2
        let b = 3

        console.log(a+b) // 5

        let c = '대한'
        let d = '민국'

        console.log(c+d) // 대한민국
  • 리스트 & 딕셔너리
    • 리스트: 순서를 지켜서 가지고 있는 형태입니다. !컴퓨터는 0부터 세요! 리스트에 들어있는 첫 번째 값은 [0]으로 불러옵니다!
      • let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

        // 또는,

        let a = ['사과','수박','딸기','감'] // 로 선언 가능

        console.log(a[1]) // 수박
        console.log(a[0]) // 사과

        //리스트 길이 구하기
        console.log(a.length) //4
    • 딕셔너리: 키(key)-밸류(value) 값의 묶음
      • let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

        // 또는,

        let a = {'name':'영수','age':27} // 로 선언 가능

        console.log(a)
        console.log(a['name']) // 영수
        console.log(b_dict['age']) // 27
    • 리스트와 딕셔너리의 조합
      • 꺾쇠와 키-밸류, 이 두가지로 이뤄진 형태의 자료를 정~말 많이 씁니다! 이게 기초가 되는 문법이에요!
      • let a = [
        {'name':'영수','age':27},
        {'name':'철수','age':15},
        {'name':'영희','age':20}
        ]
        console.log(a[0]['name']) //영수
        console.log(a[1]['age']) //15
    • 왜 필요할까요?
      • 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

        앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

        let customer_1_name = '김스파';
        let customer_1_phone = '010-1234-1234';
        let customer_2_name = '박르탄';
        let customer_2_phone = '010-4321-4321';
        ...(알아보기 힘듭니다.) 

        👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
        let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
        let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

         👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
        let customer = [
             {'name': '김스파', 'phone': '010-1234-1234'},
             {'name': '박르탄', 'phone': '010-4321-4321'}
        ] 

        ✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • 추가자료 - 기본 함수들
      • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.
        🤔 왠지 이건 있을 것 같은데?(예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
      • 예를 들면, '나눗셈의나머지'를 구하고 싶은 경우
        let a = 20
        let b = 7

        a % b = 6
      • 또, 특정 문자로 문자열을 나누고 싶은 경우
        let myemail = 'sparta@gmail.com'

        let result = myemail.split('@') // ['sparta','gmail.com']

        result[0] // sparta
        result[1] // gmail.com

        let result2 = result[1].split('.') // ['gmail','com']

        result2[0] // gmail -> 우리가 알고 싶었던 것!
        result2[1] // com

        myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

 

▷ Javascript & JQuery 연습하기(1)

  • JQuery가 뭐라고요?
    👉 jQuery를 왜 쓴다구요? 웹을 조작하려고! 왜 조작하죠? 움직이게 만드려고! 그런데 javascript만 사용하면 복잡하니까 jQuery도 쓰는 겁니다!
    • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
      Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
      1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.
    • jQuery와 Javascript - 코드 비교해보기
      jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
  • jQuery 사용하기
 

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

  • <head> 와 </head> 사이에 아래를 넣으면 끝!
  • jQuery를 사용하는 방법
    👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
         예) 특정 인풋박스의 값을 → 가져와줘!
         예) 특정 div를 → 안보이게 해줘!

         css에서는 선택자로 class를 썼지요?
         jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
         백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
  • JQuery 연습하기
    • prac.html에 뼈대를 붙여넣어 봅시다!

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        function checkResult() {

            let a = '사과'

            $('#q1').text(a)

        }
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1">테스트</div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2"></div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3"></div>
        </div>
    </body>
</html>

  • css-클래스처럼 자바스크립트에서 html을 움직이게 하기 위한 명찰, id 값이 필요합니다!
  • 테스트라는 글씨를 값을 사과로 바꿔볼겁니다! 이게 움직이기입니다!
    • $(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정해줍니다!
    • 지정했다면, 바꿔줄 명령어를 적어줍니다 text(a)를 넣어 글자 값으로 a를 넣습니다!
  • 이번엔 리스트를 써서 해봅시다!
    • 리스트 형태의 코드를 적고 변수에 저장해봅시다!
    • a의 내용을 문자열에서 리스트로 바꿔봅시다!
    • 문자열에서 리스트의 두 번째 값으로 바꿔서 넣어봅시다!
      $('#q1').text(a[1])
      ⇒ 이외에 필요한 부분들은 “구글링” 하여 찾아 보면 좋아요!
  • 이번엔 딕셔너리를 써서 해봅시다!
    • 딕셔너리 형태의 코드를 적고 변수에 저장해봅시다!
    • 딕셔너리의 키 값을 불러내서 q2라는 아이디 값이 있는 곳에 넣어봅시다!
      $('#q2').text(b['name'])
  • 이번엔 리스트-딕셔너리를 써서 해봅시다!
    • 리스트-딕셔너리 형태의 코드를 적고 변수에 저장해봅시다!
    • 리스트에서 원하는 딕셔너리를 부르고, 딕셔너리에서 키 값을 불러내서 q3에 넣어봅시다!
      $('#q3').text(c[1]['age'])

 

▷ Javascript & JQuery 연습하기(2)

  • 반복문
    리스트, 리스트-딕셔너리 형식의 자료는 하나하나 뽑아써야 하나요? 그렇지 않겠죠!
    • let fruits = ['사과','배','감', ... ,'귤']
      console.log('사과')
      console.log('배')
      console.log('감')
      ...
      console.log('귤')

      // 이렇게 100개 씩 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
    • fruits.forEach((a) => {
           console.log(a)
      }) 
      // fruits 의 요소를 하나씩 확인하는데 이름은 a라고 할 거에요!
      // a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없어요!
    • 과일의 목록이 담긴 리스트로 반복 해봅시다!
      let fruits = ['사과','배','감','귤']
      fruits.forEach((a) => {
           console.log(a)
      }) 
    • 사과, 배, 감, 귤 총 네 번이 개발자 도구에 찍혔죠? 그럼 반복문을 쓰면 몇 번 찍히는 거죠? 바로 리스트 안에 들어 있는 값의 개수만큼!
  • 조건문
    반복문과 더불어 조건에 맞춰 실행을 다르게 해주는 “조건문”도 프로그래밍에선 빼놓을 수 없답니다!
    • if (조건) {
           // 조건에 맞다면~
      } else {
           // 아니라면~
      }

      ⇒ 만약 20살보다 크면 성인입니다 작으면 청소년입니다 를 출력하려면?
      let age = 24

      if (age > 20) {
         console.log('성인입니다')
      } else {
         console.log('청소년입니다')
      }

      ⇒ 반복문+조건문 합치기!
      let ages = [12,15,20,25,17,37,24]

      ages.forEach((a)=> {
         if (age > 20)
            console.log('성인입니다')
         } else {
            console.log('청소년입니다')
         }
      })

 

▷JQuery 연습하기

  • JQuery - append (1)

    function checkResult() {
       let fruits = ['사과','배','감','귤','수박']
       $('#q1').empty()
       fruits.forEach((a)=>{
          let temp_html = `<p>${a}</p>`
          $('#q1').append(temp_html)
       })
    }
    • .append()를 활용하기
      • 어? `` 에 ${} 까지 너무 어려운데요?
      • 걱정마세요! 왜 이렇게 생겼는지 이해하려고 하지 마시고, 규칙이 있다고만 생각하고 작성하시면 얼마든지 따라 쓸 수 있어요!
        1) 원하는 html 태그를 백틱(``)으로 묶어 주세요!
        2) 태그 안에 들어갈 값은 ${} 로 표시하고, 그 안에는 자료가 있는 변수를 넣어주세요!
        3) 통째로 넣을 html 요소를 $('#아이디')로 골라주시고 appnd(변수)를 넣어주세요!
    • 문자와 변수를 같이 쓰는 백틱(``)
      • 아까 리스트를 HTML에 추가할 때 썼던 백틱(``) 기억나시나요? HTML요소를 통째로 넣을 때 묶어주는 기호였었습니다!
      • 이 백틱은 문자와 변수를 함께 써줄 수 있도록 하는 특수기호입니다! 이렇게도 쓸 수 있죠!
        let profile = `${}의 나이는 ${}살 입니다`
      • 이러면 한꺼번에 변수와 문자를 쓸 수 있게 되었습니다. ${} 자리에 변수만 넣어줘 볼까요?
      • 우리가 원하는 이름 값은 nameDict[’name’]으로 가져올 수 있었죠?
      • 우리가 원하는 나이 값은 nameDict[’age’]로 가져올 수 있었습니다!
        let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`

 

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

  1. 서버→클라이언트: "JSON"을 이해하기
    • JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
  2. 클라이언트→서버: GET 요청 이해하기
    • API는 은행 창구와 같은 것!
      같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
      * GET → 통상적으로! 데이터 조회(Read)를 요청할 때
                     예) 영화 목록 조회
      * POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
                      예) 회원가입, 회원탈퇴, 비밀번호 수정
      이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)
    • GET
      • https://movie.naver.com/movie/bi/mi/basic.nhn ?code=161967

        위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
        "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

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

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

        ? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
        & : 전달할 데이터가 더 있다는 뜻입니다.
        예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

        위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
        q=아이폰                 (검색어)
        sourceid=chrome (브라우저 정보)
        ie=UTF-8               (인코딩 정보)
      • 여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요?
        → 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.
        프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
        백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

 

▷ Fetch 시작하기

  • Fetch 통신의 결과 값을 이용해보기
    1. 미세먼지 데이터가 어디에 있는지 찾기
      • RealtimeCityAir > row 에 미세먼지 데이터가 들어있습니다. 이걸 꺼내볼까요?
      • fetch("http://spartacodingclub.shop/sparta_api/seoulair")
           .then(res => res.json())
           .then(data => {
              console.log(data['RealtimeCityAir']['row'][0]);
        })
    2. 반복문으로 구 데이터를 출력해보기
      • row의 값을 rows에 담았으니, 반복문을 이용해보겠습니다!
      • fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
           .then(res => res.json()) // 요청해서 받은 데이터를 JSON화
           .then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
              let rows = data['RealtimeCityAir']['row']
              rows.forEach((a) => {
                  // 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
                  console.log(a)
              })
           })
    3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기
      • 구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력합시다!
      • fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
           .then(res => res.json()) // 요청해서 받은 데이터를 JSON화
           .then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
              let rows = data['RealtimeCityAir']['row']
              rows.forEach((a) => {
                  // 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
                  // 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
                  console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
              })
           })
      • [완성코드] 미세먼지 데이터 찍어보기
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { 
               let rows = data['RealtimeCityAir']['row']
               rows.forEach((a) => {
                  console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
               })
           })