WIL 4. 웹개발 종합반 2주차 2회독(7월 3주차)

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.

 

아래는 웹 개발 종합반 강의 2주차를 2회독하면서 정리한 내용이다.

 

 

---

 

< 2주차에 배우는 것들 >

1주차에 만들었던 정적페이지에

움직임을 추가한다. (Javascript를 배운다.)

 

Javascript: 웹 움직임

jQuery: html 뼈대 선택, 조작

Fetch: 짧은 코드로 요청 송수신 (서버로부터 데이터를 받아온다.)

 

---

 

<Javascript 맛보기>

script 태그를 head 태그 안에 작성한다.

    <script>
        function hey(){
            alert('안녕하세요!')
        }
    </script>

 

hey() 함수를 정의하고, 영화 기록하기 버튼을 클릭하면 hey()함수를 호출한다.

<button onclick="hey()"> 영화 기록하기</button>

 

---

 

<Javascript 기본 문법>

1. console.log

console.log(‘안녕하세요!’)

Console에 내용을 출력한다.(개발자 도구-콘솔)

개발자들이 구현하고 있는 기능이 올바르게 작동하는지 중간 점검을 하기 위해 많이 사용한다.

정의해둔 함수를 Console에서 써볼 수도 있다.

 

2. 변수 선언

let a = 2
let b = ‘대한민국’

변수에는 숫자, 문자를 넣을 수 있다.

 

3. 리스트, 인덱싱

let a = [‘사과’, ‘수박’, ‘딸기’, ‘감’]

a[0] = 사과
a[1] = 수박
a.length = 4

* 프로그래밍에서는 0부터 센다.

 

4. 딕셔너리

사전: 키(key), 값(vaule) 쌍으로 이루어져 있다.

let a = {‘name’: ‘영수’, ‘age’: 27}

let b = [
    { 'name': '영수', 'age': 27 },
    { 'name': '철수', 'age': 15 },
    { 'name': '영희', 'age': 20 }
]

a[‘name’] = 영수

b[1][‘age’] = 15

 

---

 

<jQuery>

Javascript 만 사용하면 복잡하게 써야하는 것을

jQuery 를 사용하면 더 쉽게 쓸 수 있다.

 

CSS태그는 class 를 통해 대상을 지칭하여 꾸며주었지만,

jQuery에서는 id를 통해 대상을 지칭한다. 이때 지칭한 대상을 셀렉터라 한다.

 

1. 지칭방법

$('#id')

 

2. .text()

셀렉터의 문자를 변경한다.

 

<div id="q1">TEST</div> 일 때,

    <script>
        function checkResult(){
            let a = 'apple'
            $('#q1').text(a)
        }
    </script>

→ id가 q1인 셀렉터의 텍스트(‘TEST’)를 변수 a에 담긴 텍스트 ‘apple’로 변경한다. (해당 함수는 클릭했을 때 수행됨.)

 

배운 문법들을 조금 응용한 코드들로, 결과 확인하기 버튼으로 함수를 실행하면 결과는 우측과 같다.

 

3. 반복문

jQuery의 반복문은 생김새가 다소 복잡하다. 오타를 내지 않도록 주의가 필요하다. (forEach)

    let fruits = ['사과', '배', '감', '귤']
    fruits.forEach((a) => {
        console.log(a)
    })

a 는 변수 이름으로 임의로 설정할 수 있다.

a 가 리스트의 갯수만큼(처음부터 끝까지) 반복하면서 콘솔에 출력된다.

 

4. 조건문

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

if 조건이 맞으면 중괄호 안의 명령어,

if 조건 불충족시 else 중괄호 안의 명령어 실행

 

5. append()

데이터를 받아와서 HTML에 붙인다.

    function checkResult() {
        let fruits = ['사과', '배', '감', '귤', '수박']
        fruits.forEach((a) => {
            let temp_html = `<p>${a}</p>`
            $('#q1').append(temp_html)
        })
    }

 

`` (백틱) 안에 붙이고 싶은 HTML 태그를 넣는다.

* 백틱 안에서 변수를 지칭할 때: ${변수명}

    → 셀렉터 지정 방법과 함께 익히도록 하자.

 

 

 

다음과 같이 변수를 선언하면 백틱 안에서 사용하기 더 용이하다. (결과는 3.붙이기)

        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]
        
        $('#q2').empty()
        people.forEach((b) => {
            let name = b['name']
            let age = b['age']
            let temp_html = `<p>${name}는 ${age}살 입니다.</p>`
            $('#q2').append(temp_html)
        })

(?) 그런데 변수명은 왜 temp_html 으로 할까?

 

6. empty()

$('#q1').empty()

위의 반복문이 돌기 전에 .empty() 를 사용하면

기존의 텍스트를 삭제하고,

새로운 텍스트만 삽입한다.

* 반복문 안에 empty()를 사용하면 반복문을 돌 때마다 empty()가 실행되므로 넣는 위치를 유의해야 한다.

 

 

 

 

<중간 정리>

기초 Javascript 문법과, 자주쓰는 jQuery 문을 배웠다.

이를 통해 특정 데이터를 받아오면 HTML 안에 붙일 수 있게 된 것이다.

데이터를 받아오는 것은 fetch 를 통해 수행한다. 

 

 

---

 

<Jsonvue>

Json 형태의 데이터를 보기 쉽게 해주는 크롬 확장프로그램이다.

Json이란 서버에서 클라이언트로 데이터를 내려줄 때 키, 값의 딕셔너리 형태로 내려주는 데이터 포멧 정도로 이해하면 될 듯 하다.

 

 

<Fetch>

서버(또는 데이터를 주는 URL)에서 데이터를 가져와 활용할 수 있는 도구

 

    <script>
        fetch(“URL 입력”).then(res => res.json()).then(data => {
            console.log(data)
        })
    </script>

URL(API 주소)로 부터 받아온 result를 json 형태로 변환, 해당 데이터를 활용(해당 코드에서는 콘솔에 출력)

 

 

---

 

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a)
            })
        })

반복문을 통해 row의 값을 하나씩 출력한다. (자주 쓰이는 구문이다.)

 

 

---

 

console.log(a['MSRSTE_NM'], a['IDEX_MVL'])

구 이름과 수치만 가져올 수도 있다.

 

---

 

<Fetch 연습>

미세먼지 API로부터 데이터를 가져와 HTML 에 붙이는 연습을 한다.

위에서 배운 것들을 활용하면 가능하다.

 

업데이트 버튼을 클릭하면 실행되는 함수 q1 을 수정한다.

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                console.log(rows)
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    let temp_html = `<li>${gu_name}: ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                })
            })
        }
    </script>

 

이 함수를 통해 스크린샷과 같이 Fetch를 통해 가져온 데이터를 html에 하나씩 붙여준다.

 

if 문을 통해 미세먼지가 40을 초과하는 경우 CSS가 적용되어 폰트 색이 빨간색으로 변한다.

    <style type="text/css">
        .bad {
            color: red;
        }
    </style>

        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                console.log(rows)
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                   
                    let temp_html = ``
                    if (gu_mise > 40) {
                        temp_html = `<li class = "bad">${gu_name}: ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name}: ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })
        }

이때 names-q1 은 id 인데, 이 id는 가져온 HTML 태그의 상위 태그에 지정되어 있다.

(이 코드에서는 <li> 태그의 상위태그)

따라서, temp_html 을 붙여줄 때 상위 태그에 id가 없다면 따로 지정해주어야 한다.

 

 

2주차 강의에서 Fetch 연습은 위의 서울시 미세먼지 API와 따릉이 API 두 가지를 가지고 진행하는데,

두 가지 연습 내용이 거의 동일하여 따릉이 API는 별도로 정리하지 않는다.