[AI 웹개발TIL]6일차 개발일지

오늘 개발일지 부터는 일기형식이 아닌 
깨달은 것들이나 배운 것들을 위주로!
작성해보겠습니다 ㅎㅎ

현재 웹 종합 개발반 2주차 강의들을
듣고 있습니다!

그 중에
1. 자바스크립트 기초 문법, 제이쿼리 연습
 

function checkResult() {

체크했을 때 결과값이 나오는 함수이고

  $('#q1').empty()

 
$과 #, ' 가 아닌 `를 써야한다는 것도 어색하지만 익숙해지자

let people = [

            { 'name': '서영', 'age': 24 },

 

사람에 대한 정보를 저장할 때 
이름은 ' ' 사이에, 숫자는 그냥 적어도 된다

people.forEach((a)=>{

            let name = a['name']

            let age = a['age']

            // 각 사람들에 대한 각각의 정보를 저장하고

            let temp_html = `<p>${name}는 ${age}살입니다. </p>`

            $('#q2').append(temp_html)

            // temp_html을 통해서 이름과 나이에 맞게 결과를 확인시켜 주는것

forEach 중간에 대문자
이름과 나이를 저장하고 
temp_html을 활용해서, 이름에 따라 나이를 연결 시켜준 다음에 
append를 통해 결과를 확인시켜주면 끝이다. 

생각보다 어렵지 않았고 
앞으로 많이 쓰이는 기초적인 함수이기에 
자주 눈에 익혀두자

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

서버 클라이언트를 사전식으로 배열하는 프로그램은
Jsonvue이다. 서버 클라이언트를 이해 해보았다.
(https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko)
예를 들어
http://movie.naver.com/movie/bi/mi/basic_naver?code=184516에서 
1. movie.naver.com는 은행의 위치
2. /movie/bi/mi/basic_naver?는 창구의 종류
3. code=18451는 그 창구에서 코드이다.
* code : 프로그래머 들의 약속(저장값) 이다.

3. fetch 이해하기

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

자바 스크립트에 대한 정보를 불러오는 것이다. 
누군가가 만들어 놓은 스크립트 및 라이브러리를 head에 입력해야
나도 쓸 수 있다는 걸 인지하자
그리고 fetch 순서는
1. 가져오기
2.json형태로 읽어오기
3. 데이터를 제이쿼리나 함수로 나타내기
이다. 

 

fetch("http://spartacodingclub.shop/sparta_api/seoulair")

            // fetch를 통해서 url을 가져오고

            .then(res => res.json())

            // 그걸 json을 통해 사전식으로 만들어서

            .then(data => {

                let rows = data['RealtimeCityAir']['row']

                // rows는 ['RealtimeCityAir']['row'] 데이터이고

                rows.forEach((a) => {

                    // rows 안에 있는 각각의 값들을

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

                    // console.log로 나타내라, console.log(a)라고하면 a전체를 표시하고

                    // console.log(a['MSRSTE_NM'])라고하면 a안에 있는 MSRSTE_NM만을 표시한다

                    // console.log(a['MSRSTE_NM'],a['IDEX_NM'])라고하면 이 두개를 표시한다

                })

                console.log(data['RealtimeCityAir']['row'][0])

                // fetch 정보를 console로 나타내라

            })

서버에 있는 데이터들을 
가져오고 fetch
사진식으로 바꿔주고 Json
데이터들을 jQuery로 불러주면 끝! 
이해하기 쉽지 않았는데 간략하게 정리해보았고
예제를 통해서 연습해보았다