JavaScript

# of Posts

1 more property

Gallery

JavaScript 맛보기~jQuery 기초
•배운점:
•어려운 점:
서버-클라이언트 통신 이해~Fetch이해하기
•배운점:fetch(”URL").then(res => res.json()).then(data => {
•// 데이터 전체가 찍히는지 확인 })
•어려운 점:

[JavaScript]10 JavaScript, jQuery, Fetch 배운점, 어려웠던점

2주차에는
JavaScript가 주요 주제였고
기본적으로 Dictionary를 가지고 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인하는 과정을 배웠다.
OpenAPI 데이터는 처음 데이터를 받아보면 가시성이 떨어지는 데이터를 받게되는데
JSONVue를 통해 해당 데이터가 Dictionary 구조로 되어있음을 확인할 수 있다.
이것을 JSON 형식이라 할 수 있다.

[JavaScript]11 JavaScript 스터디(WIL)

[JavaScript]08 Fetch, 타사 데이터 OpenAPI 활용 실습 - 4

JSON 사용하는 실습이 반복되다보니
문득 for와 foreach의 정확한 차이를 모르겠다.
for 반복문은 과거 강의에서 지겹게 사용하긴 했다.
for (i = 0; i < rows.length; i++) {
    console.log(rows[i]);
}
forEach 반복문은 살짝 언급만되었고 실제로 자주 사용하지 않았는데
이번 강좌에서는 계속해서 사용된다.
rows.forEach((a) => {
	console.log(a)
})
검색을 통해서 이것저것 쓰는 이유를 찾아보고 싶었다.

[JavaScript]09 for와 forEach의 의문점에서 시작해서 동기와 비동기 기본 개념까지

이전 "서울시 실시간 미세먼지 상태" 와 비슷한 예제이다
따라서 이전 코드를 재활용해서 어느 부분을 고쳐나가는지 실습해봤다.
1. "서울시 따릉이" 위치를 확인할 수 있는 간단한 HTML 페이지를 생성
기초 HTML 뼈대는 다음과 같다.
이전 예제와 특별히 다른 부분은 없지만
button 태그에서 onclick event로 q1이라는 함수를 불러오고 fetch가 작동하는 방식이 똑같다.
하지만 리스트 태그를 이용한것과 달리
table태그로 좀 더 보기좋게? 항목을 보여주는 방식이 변경되었다.

[JavaScript]06 Fetch, 공공 데이터 OpenAPI 활용 실습 - 2

[JavaScript]07 Fetch, 공공 데이터 OpenAPI 활용 실습 - 3

1. 데이터 준비
아래 링크는 "서울의 미세먼지" 실시간 데이터이다.
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
해당 링크를 열어보면 구분하기 어려운 형태의 데이터를 얻게 된다.
2. JSONVue를 설치하고 데이터 확인
JSONVue

[JavaScript]03 서버와 클라이언트 통신이해와 "JSON 이란?"

이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다.
이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다.
1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성
기초 HTML 뼈대는 다음과 같다.
특별한것은 없지만
button 태그에서 onclick event로 q1이라는 함수를 불러오는데
이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다.
<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

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

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

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

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr/>

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

</html>

[JavaScript]05 Fetch, 공공 데이터 OpenAPI 활용 실습 - 1

1. Fetch란?
Fetch는? URL을 넣으면 그 데이터를 가져오는 친구다.
해당 HTTP로 요청하고 데이터를 반환 받는다.
이 한 문장의 개념으로 간단하게 이해하자.
2. Fetch를 사용하는 기본 골격
Fetch의 기본 형태는 다음과 같다.
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
	console.log(data)
})
URL을 입력해서 데이터를 가져오는지 확인해볼 차례

[JavaScript]04 Fetch 이용해보기

HTML로 간단한 버튼을 생성하고
버튼에 onclick 이벤트 속성을 넣은 뒤 간단한 Javascript 함수를 할당해서 아래 테스트 작동 여부를 확인했다.
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
버튼 클릭 시 '안녕하세요'라는 알림 팝업
function checkResult() {
// ** 클릭 시 onclick ** 해당 함수 실행!!
alert('안녕하세요')
}
전에 배운 Dictionary부분이다. 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인
//id가 q1인 div에 a로 선언된 값을 텍스트로 입력
// let a = '사과'
// $('#q1').text(a)

//id가 q1인 div에 해당 배열의 값을 텍스트로 입력
let a = ['사과', '배', '감', '귤']
$('#q1').text(a[3])
//id가 q1인 div에 텍스트 스타일 색상을 빨간색으로 변경
$('#q1').css('color', 'red')
//id가 q1인 div에 텍스트 스타일 폰트 사이즈를 40px으로 변경
$('#q1').css('font-size', '40px')
배열 형태로 선언된 값들도 정상적으로 출력 되는지 테스트했다.

[JavaScript]02 사용 기초