JavaScript

# of Posts

1 more property

Gallery

JavaScript 맛보기~jQuery 기초

•

배운점:

◦

<script></script> 태그 내 함수 선언

◦

해당 함수가 작동 될(event) 개체 지정

◦

console.log로 event 없이 테스트 할 수 있음

◦

a라는 변수에 선언된 값들을 불러오는것

◦

Dictionary는 [{key, value}, {k,v}, … ] 를 불러올 수 있다.

•

어려운 점:

◦

Dictionary는 왜배우는지?? (→ JSON의 형식이다)

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

•

배운점:fetch(”URL").then(res => res.json()).then(data => {

◦

"서울의 미세먼지" 실시간 데이터를 통한 JSON 형식 확인

◦

JSONVue를 설치한 후 확인하면 Dictionary 형태의 데이터임을 볼 수 있음

◦

서버에서 클라이언트로 데이터를 내려줄때 가지고 올 수 있는 포맷이며 이러한 데이터 규칙은 Dictionary 형식으로 되어 있다.

◦

Fetch, 공공 데이터 OpenAPI 활용 실습

◦

Fetch 기본 골격

•

// 데이터 전체가 찍히는지 확인 })

•

어려운 점:

◦

JSON 아이템을 뷰페이지로 옮겨본 프로젝트는 진행했지만

◦

이처럼 Dictionary라는 형식이라는 근본적인 이유는 모르고 사용하고 있었음

◦

=> 화살표 함수(Arrow function)에 대한 추가 스터디

◦

백틱을 사용하는 이유, 사용법 익히기

Fetch 응용 퀴즈

•

배운점:

◦

"서울시 실시간 미세먼지 상태”와 같이 OpenAPI 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습했으니 이제 웹페이지에 직접 활용

◦

JSON 넣는 공식? 항상 반복되는 사이클 : //데이터를 가져온다 => 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다

◦

"서울시 따릉이" 위치를 확인할 수 있는 간단한 서비스페이지를 통해 복

•

어려운 점:

◦

조건문으로 append 부분을 추가 할 때 ' ` ' (백틱) Backtick을 사용하는데 정확한 사용법 익힐 필요

◦

검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 활용하는것 복습

Fetch 응용 퀴즈 2

•

배운점:

◦

하단에 나열되는 "영화포스터+제목+설명+별점+한줄평" 부분이 하드코딩이 아닌 지정한 데이터로부터 추출되어 나열되게 하는 것이 목표이다. (Fetch)

◦

데이터를 입력 하는 반복문에서 아래처럼 섹션을 구분하기 위한 class 명칭을 구분하고 어떤 그룹이 append 될지 구분

◦

"영화포스터+제목+설명+별점+한줄평" 부분을 각각 아래 변수로 선언

▪

title = 제목

▪

desc = 설명

▪

comment = 한줄평

▪

star = 별점

▪

image = 영화포스터

◦

위 변수들에 데이터들이 담기고 ${ … } 형태로 값을 출력 할 수 있다.

◦

별점 추가부분에서 repeat() 함수 사용

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

2주차에는

JavaScript가 주요 주제였고

기본적으로 Dictionary를 가지고 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인하는 과정을 배웠다.

OpenAPI 데이터는 처음 데이터를 받아보면 가시성이 떨어지는 데이터를 받게되는데

JSONVue를 통해 해당 데이터가 Dictionary 구조로 되어있음을 확인할 수 있다.

이것을 JSON 형식이라 할 수 있다.

이후 Fetch라는 함수를 계속 사용한다.

Fetch는? URL을 넣으면 HTTP 통신 요청을 하는 친구다.

Fetch의 기본 골격은 자주 사용 될 것이다.

fetch로 서버에 요청하면 반환값이 then절에 의해 json 형변환되며

반환된 데이터는 헤더에 data로 담겨져서 도착하여 console에 찍히도록 되어있다.

가져온 데이터를 웹페이지에 출력하는 실습이 여러번 진행되었다.

[JavaScript]11 JavaScript 스터디(WIL)

본문 card 부분도 하드코딩이 아니라 제공된 소스를 API를 받은 것 처럼 받아와서

card 형태로 붙이는것을 해보자.

리뷰들이 담긴 API를 받아오기부터 시작.

1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정

기초 HTML 뼈대는 다음과 같다.

하단에 나열되는 "영화포스터+제목+설명+별점+한줄평" 부분이 하드코딩이 아닌

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

JSON 사용하는 실습이 반복되다보니

문득 for와 foreach의 정확한 차이를 모르겠다.

for 반복문은 과거 강의에서 지겹게 사용하긴 했다.

forEach 반복문은 살짝 언급만되었고 실제로 자주 사용하지 않았는데

이번 강좌에서는 계속해서 사용된다.

검색을 통해서 이것저것 쓰는 이유를 찾아보고 싶었다.

왜 동일한 기능을 쓸 수 있는데 이번 기회에 그 차이를 공부하게 되었다.

그런데 아직 이해가 부족하다. 좀더 쉽게 이해하는 방법을 더 찾아봐야겠다.

일단 검색으로 차이점을 찾아보니

1. 가장 중요한 차이점이 forEach는 ES6 문법으로 콜백함수를 뿌린다는 점?

for와 foreach의 차이

(1) 동기(sync), 비동기(async)의 차이

for는 동기방식이기 때문에 for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다.

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

이전 "서울시 실시간 미세먼지 상태" 와 비슷한 예제이다

따라서 이전 코드를 재활용해서 어느 부분을 고쳐나가는지 실습해봤다.

1. "서울시 따릉이" 위치를 확인할 수 있는 간단한 HTML 페이지를 생성

기초 HTML 뼈대는 다음과 같다.

이전 예제와 특별히 다른 부분은 없지만

button 태그에서 onclick event로 q1이라는 함수를 불러오고 fetch가 작동하는 방식이 똑같다.

하지만 리스트 태그를 이용한것과 달리

table태그로 좀 더 보기좋게? 항목을 보여주는 방식이 변경되었다.

하지만 주요 목표는 동일하게 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다.

현재 데이터처럼 보여지는 내용들은 아직 데이터 통신 없이 직접 텍스트가 하드코딩된 예시일 뿐이다.

2. Fetch 기본 골격 코드와 OpenAPI 코드를 통해 데이터를 받아오자.

Fetch 기본 골격을 script 태그에 붙이고 OpenAPI URL을 입력해보고 데이터가 콘솔에 찍히는지부터 확인하자.

OpenAPI URL은 공공데이터 포털(서울 열린데이터 광장)에서 받을 수 있는데 신청하여 인증키를 받아야한다.

과정을 생략하고자 코딩클럽에서 제공된 url을 사용하고자 한다.

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

이전 실습들을 활용해서 "서울시 실시간 온도" 를 기존 작업 된 웹페이지에 넣어보자.

1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정, 요소를 추가한 span 추가

기초 HTML 뼈대는 다음과 같다.

"현재 서울의 날씨 : 20도"로 하드코딩된 부분에 실시간 데이터가 적용되도록 하는 것이 목표이다.

우선 링크의 이상이 없고

서울의 온도인

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

1. 데이터 준비

아래 링크는 "서울의 미세먼지" 실시간 데이터이다.

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

해당 링크를 열어보면 구분하기 어려운 형태의 데이터를 얻게 된다.

2. JSONVue를 설치하고 데이터 확인

JSONVue

Validate and view JSON documents

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

JSONVue라는 브라우저 확장 프로그램을 설치한다.

확장 프로그램을 chrome에 설치하였다.

3. JSONVue를 통한 데이터 재확인

1번 과정에서 확인했던 "서울의 미세먼지" 실시간 데이터를 다시한번 열어본다.

아까와는 다르게 무언가 정렬된 형태로 데이터를 볼 수 있게된다.

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

이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다.

이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다.

1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성

기초 HTML 뼈대는 다음과 같다.

특별한것은 없지만

button 태그에서 onclick event로 q1이라는 함수를 불러오는데

이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다.

Fetch 전 하드코딩된 지역별 내용은 다음처럼 나타난다.

2. Fetch 기본 골격 코드와 OpenAPI 코드를 통해 데이터를 받아오자.

Fetch 기본 골격

OpenAPI URL :

URL 부분 "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경

console.log 주석들을 통해 정상적으로 데이터가 들어오는지 확인한다.

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

1. Fetch란?

Fetch는? URL을 넣으면 그 데이터를 가져오는 친구다.

해당 HTTP로 요청하고 데이터를 반환 받는다.

이 한 문장의 개념으로 간단하게 이해하자.

2. Fetch를 사용하는 기본 골격

Fetch의 기본 형태는 다음과 같다.

URL을 입력해서 데이터를 가져오는지 확인해볼 차례

3. 서울시 미세먼지 실시간 데이터 링크를 써서 확인

저번에 사용했던 서울시 미세먼지 실시간 데이터 링크를

URL에 입력해본다.

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

개발자도구의 console에 다음과 같이 데이터가 들어온 것을 확인 할 수 있다.

4. 추가적으로 다른 방식으로 데이터가 정리되는지 확인

[JavaScript]04 Fetch 이용해보기

HTML로 간단한 버튼을 생성하고

버튼에 onclick 이벤트 속성을 넣은 뒤 간단한 Javascript 함수를 할당해서 아래 테스트 작동 여부를 확인했다.

버튼 클릭 시 '안녕하세요'라는 알림 팝업

전에 배운 Dictionary부분이다. 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인

배열 형태로 선언된 값들도 정상적으로 출력 되는지 테스트했다.

다음엔 jQuery에 대해서 학습 예정 Javascript로 길게 복잡하게 써야하는 것

jQuery로 보다 직관적으로, 간편하게 작성 할 수 있다.

[JavaScript]02 사용 기초