2021-11-17(수) 2주차

Jeongyun Heo·2021년 11월 17일

w17 카카오 지도 API

오늘은 JSON 데이터를 파일로 만들어서 파일 데이터를 이용해서 처리해 볼 거

어떤 브라우저는 자바로 만들 거고
어떤 브라우저는 C++로 만들 거고

브라우저는 서버에서 보내주는 데이터를 보여주는 역할. 처리하는 프로그램.

브라우저 = 클라이언트 프로그램

그래서 나온 개념이 스크립트 언어

스크립트 : 특정한 어플리케이션에서 실행이 가능한 언어
스크립트는 특정한 프로그램을 위한 언어

자바스크립트
script 태그에 숨겨놓음
모든 브라우저가 랭귀지가 뭐로 구현되어 있든 간에 어쨌든 script를 실행할 수 있으니까

브라우저가 아니라 앱 같은 경우 문제가 됨
똑같이 데이터를 받아서 쓰긴 써야 되는데
스크립트 언어를 실행할 수 없음

데이터라는 건 구조를 가짐

언어에 종속적이지 않은 데이터
숫자와 문자밖에 없음
숫자로는 구조화된 데이터를 표현하는 데 한계가 있음
그래서 문자 데이터를 전달해주기로 함

문자 → 포맷 → JavaScript Object Notation

로컬스토리지 = 파일시스템
로컬스토리지는 브라우저 안에 있는 거
브라우저 밖에 있는 데이터를 쓰고 싶은 거
언어별로 라이브러리 제공

플랫폼
프레임워크 : 구조와 흐름만 만들어놓은 거
라이브러리 : 기능에 포커스

라이브러리는 스크립트 태그로 추가해서 사용 가능
exif 라이브러리 : 사진 데이터 분석

특정한 기능을 목적으로 제공

mp3 파일
기본적으로 압축파일. 그 안에 사진을 추출해서 사진을 보여줌.

엑셀, 워드도 압축파일.
워드 파일에 이미지 넣고 저장하면 용량 커짐.
워드 파일이 어떻게 구성되어 있는지 안다면
워드 파일을 분석할 수 있게 됨

클로버 API

남이 만들어놓은 건 갖다 쓰는

JSON 라이브러리를 다운 받아서 이용하는 방식

프레임워크 : 없어도 되는데 있으면 빨리 만들 수 있는 거
메인보드를 프레임워크라고 보면 됨
구조와 흐름만 만들어놓은 거
이미 흐름이 완성되어 있으니까
시간과 비용을 절약하는 개발 방식

플랫폼
사람들이 너무 많이 모여있어서 광장 같은 역할

자바 플랫폼
윈도우 플랫폼
얘가 없으면 시작도 못 함

로컬스토리지에 있는 건 브라우저에 저장되어 있어서 나 혼자만 쓸 수 있음

다른 사람들도 쓰려면?

한국 일본 베트남
베트남 버튼을 누르면 베트남 서버에서

Open API

이때 주고 받는 데이터가 JSON 포맷으로 되어 있다

브라우저에서 처리되는 게 아니라
자바스크립트로 데이터를 주고 받는 거
AJAX 보안이 까다로움
지금 우리 상황에서는 이게 안 됨
데이터를 허락도 없이 가져다 쓰지 못하도록 보안상으로 막음

지금부터 json 데이터를 파일로 만들 거
팀마다 다른 데이터를 만드는 거
이 데이터의 구성물은 다 똑같이 만든다
이런 데이터를 만들어서 공유폴더에 올리기
웹스톰에 그 파일을 직접 넣어서 쓸 거

음식점 데이터 필요
배열로 구성되어 있을 거
문자열 JSON 포맷으로
파일로 저장하는 게 1단계

파일 데이터를 가져와서 처리하는 게 2단계

구글 지도에서 위도, 경도

서울시에 있는 맛집 3~4개 정도

자바스크립트 코드로 만들고 지도에 보여주기

파일로 저장

카카오 지도 : 쉬운 편
T map : 경로, 고도 정보
구글지도 : 전세계를 표시해야 되는 상황이라면 지도 api

얼굴 인식
닮은꼴 연예인

모델 에이전시
누군가 프로필을 등록하면 비슷한 연예인 정보를 뽑는 거

아이디어의 참신함, 시도를 해봤다는 거에 높은 점수를 줌

네이버 클로버
챗봇도 Api로 만듦
한국어 형태 분석이 쉽지 않음
챗봇으로 메뉴 선택 같은 거
고객센터들이 거의
챗봇 서비스
프로젝트 할 때 챗봇

5555

그냥 파일로 html파일로
실행되는 서버가 있어야 쓸 수 있음

앱 키를 이용해서
JavaScript 키 이용

데스크탑
핸드폰에서도 볼 수 있게끔

소셜로그인

https://apis.map.kakao.com/web/

지도 생성하기
https://apis.map.kakao.com/web/sample/basicMap/

선생님 깃헙 다운 받아서 앱 키만 바꿔서 쓰면 됨

핸드폰으로도 들어가짐

인라인 스타일 기법 : 제일 셈
직접 주는 스타일이 가장 우선적으로 적용됨

집에서
공유기
포트포워딩
컴퓨터를 켜놔야 됨
라즈베리파이 이용해서 리눅스 설치해서 서버로 만들어 놓고
호스팅 업체에 올려서 쓰는 방법도 있고
AWS 사용해도 되고

LatLng(33.450701, 126.570667) // 위도, 경도

level: 6 // 지도의 확대 레벨

https://apis.map.kakao.com/web/sample/addMapCenterChangedEvent/

https://apis.map.kakao.com/web/sample/addMapClickEvent/

지도를 마우스로 클릭했을때 click 이벤트가 발생합니다. 이 예제에서는 지도를 클릭했을 때 지도 아래쪽에 해당 위치의 좌표를 뿌려주고 있습니다.

클릭한 지점 주변에 있는 맛집 떠야되는 거

구글어스

클릭하면 위치 나옴

마커 찍기

객체 생성 new

https://apis.map.kakao.com/web/sample/basicMarker/

파일 데이터로 바꿀 거
네트워크를 통해서 데이터를 가져와서 마커를 표시할 예정

https://apis.map.kakao.com/web/documentation/#Marker

API document

가독성 좋으려고 빼놓은 거

파라미터 인수 받을 때 한 번에 받는 게 편함

    function showMarkers(stores) {
        for (let i = 0; i < stores.length; i++) {
            const store = stores[i]
            const latLng = new kakao.maps.LatLng(store.lat, store.lng)
            const marker = new kakao.maps.Marker({
                map: map,
                position: latLng
            })
        } // end for
    }

위치를 바꾸면 마커를 지우고 새로 마커를 뿌려야 되는

현재 지도상 마커를 지우고 새로운 마커를 띄워야 됨

내가 마커를 만들었으니까 내가 제거 (직접 처리)
map 안에는 marker 라는 정보를 가지고 있는 애가 있지 않을까?

https://apis.map.kakao.com/web/documentation/#Map

어떠한 객체에 속해 있으면 메소드라고 하고

자바에서 함수는 생성자 함수
나머지는 다 메소드라고 함

마커들을 보관하지 않는다는 거

marker.setMap(null); // 지도에서 제거한다.

마커의 배열을 주고 이 마커들을 표시해줘
기존의 마커들을 알아서 그 마커들에 대해서 marker.setMap(null)
marker 만들어 놓은 정보가
marker의 배열을 가지고 있다가
다른 애로 바뀌면 지우고 새로운 애들 마커 표시

const markerArr = []

markerArr.push(marker)

어제랑 똑같은 패턴

버튼을 눌러서 카레를 누르면 카레만 나오는 거고
전체를 선택하면 전체가 나오는 거

컴포넌트
따로 쪼갬
뷰나 리액트가 그런 역할

이 컴포넌트는 지도를 보여주는 애
이 컴포넌트는 목록을 보여주는 애
컴포넌트를 조합해서 하나의 어플리케이션

버튼을 만들어보자

내일은 종합
금요일은 제이쿼리

filter()

한 번에 전체 배열을 만들어놓고
일식 클릭 하면 일식만 필터링해서 일식 던져주고
버튼을 누를 때마다 마커가 바뀜

<style>
    .menuDiv > a {
        text-decoration: none;
        background-color: darkseagreen;
        color: white;
        font-size: large;
        border-radius: 3px;
    }
</style>

justify-content: space-between;

키오스크 화면

배열 통합

이벤트 처리
1. document.addEventListener
2. 인라인

파일로 된 데이터
이 프로젝트에다가 json데이터를 파일
그 안에는 한식

addEventListener

a 태그 innerHTML을 가져

이벤트를 바깥쪽에 걸었음
실제로 이벤트가 발생하는 애한테 건 게 아니라 이벤트 바깥쪽에 걸었음
실제로 이벤트가 발생한

이벤트를 매번 걸 필요가 없는 거
a 태그가 10개든 20개든 한 번만 걸어주면 되는 거

단점
menuDiv 영역을 클릭해도 이벤트가 실행됨

a 태그일때만 이벤트를 걸고 싶음

target의 tagName이 'A'가 아니면 return 종료

        if (target.tagName !== 'A') {
            return
        }

tagName은 대문자로 나옴

델리게이션

하나의 이벤트만으로 여러 개 다 걸어버리는 거

태그 안에 여러 개의 정보가 있으면 좋음

원래는 코드값을 씀

정해진 값을 씀

코드네임

menu: "J"

https://developer.mozilla.org/ko/docs/Web/API/Element/getAttribute

Element.getAttribute() : 속성의 값을 얻어온다

target.getAttribute("href")

Element.setAttribute() : 속성을 추가한다

내가 선택한 버튼 background color 바꿔주기

css 부여할 때

setAttribute()

attribute 이용해서 작업

keyword가 '전체'가 아니라면

맛집 데이터를 json 데이터로 만들고 파일로

하나는 지도를 보여줘야 되고
하나는 데이터를 보여줘야 됨

원래대로라면 원격으로 배워야

ex2.html 생성

JSON.stringify()
JSON.parse()

    const arr = [
        {name:'지로우라멘', lat:37.5536583, lng:126.9229494, menu:'일식'},
        {name:'오복수산',   lat:37.5376784, lng:127.0018967, menu:'일식'},
        {name:'스시코테이', lat:37.5276863, lng:127.031121, menu:'일식'},
        {name:'호별관',    lat:37.5095451, lng:127.03487724, menu:'일식'},
        {name:'타지팰리스', lat:37.54450731, lng:126.9915116, menu:'카레'},
        {name:'죠티인도',   lat:37.5550446, lng:126.9379293, menu:'카레'},
        {name:'예티 인도', lat:37.5655634, lng:126.9233787, menu:'카레'}
    ]
    
    const str = JSON.stringify(arr)
    
    console.log(str)

이 데이터(json)를 파일로 저장할 거

비동기★★★

원래는 인터넷에 어딘가를 호출하면 이 데이터가 나와야 됨
근데 우리가 지금 서버가 없음

node simple json server 검색

db.json을 만들고

외부에서 호출해서 데이터를 가져가는 거

이렇게 서버를 만들어서 쓸 수도 있음

체크리스트 보고 부족한 거 채우기

내일 키오스크 만들고

지금 수업 괜찮은 사람들은 이거를 구축해서 써보는 것도 괜찮을 거 같다

인터넷에서 이미 제공하는 데이터도 있음

원래는 원격지의 url을 호출하면 이 데이터(json)가 온다고 가정한다
근데 우리는 원격지에 서버가 없으니까 이 데이터를 파일로 저장할 거임

console창에 json 데이터 그대로 copy

store.json 생성

그대로 붙여넣기

브라우저에서 http://내IP주소:5555/w17/store.json 입력했을 때 json 데이터가 잘 나오는지 확인하기

개발자 도구 - Network탭 열기
새로고침 다시 해보기
store.json 파일 보임

어디서나 가져가 쓸 수 있도록

지금부터 자바스크립트로 이 파일 데이터를 가지고 올 거임

1팀 2팀 3팀

원래대로라면 1팀 서버
1팀 pc에 있는 json파일을 가져오는 건데
지금 그렇게 안 됨

필요할 때마다 로딩

이 과정이 비동기로 이루어짐

동기/비동기

아이유 개념이랑 비슷함

동기화된 프로그램이라는 게 뭐고
비동기 프로그램이 뭘까

정상적으로 프로그램을 짜서
서버를 통해서 데이터를 가져온다고
정상적이라고 가정

동기화된 프로그램이라는 건 지금까지 우리가 짰던 프로그램이야
서버를 호출하면 데이터가 옴
결과 데이터는 json 문자열
자바스크립트의 객체로 변환을 함 (배열)
showMarkers()
시간의 흐름대로 처리되는 걸 동기화 프로그램이라고 함

a = doA() 
b = doB(a)
c = doC(b)

doA()를 하는 동안 doB()를 못함
doB()를 하는 동안 doC()를 못함

a가 다 끝날 때까지 기다렸다가

개발자들이 알아보기는 쉬움
한 눈에 알아볼 수 있음

커피를 사온다는 작업이 끝날때까지 아무것도 못 함
함수가 호출되는 순간 아무것도 못 함
한 번에 하나밖에 못 함
아무리 좋은 맥북이어도 CPU 낭비임

커피를 사서 도착하면 카톡을 해 = 콜백함수
이벤트 처리랑 똑같은 거
비동기 처리 방식이 이벤트 처리랑 똑같은 거

이런 식으로 처리하게 되는 거 ↓

doA(() => doB(() => doC(())))

doA를 실행해
너 이거 다 되면 doB 해야 된다?
이거 다 되면 doC 해야 된다?

콜백 지옥
콜백의 콜백의 콜백

이거 끝나면 저거 하고 이거 끝나면 저거 하고

노드js가 이벤트 처리
노드 js는 서버
여러 명이 서버를 호출하면 동시에 작업을 처리.

서버를 호출하면 동시에 작업 처리. 그 때 이벤트 방식을 씀
첫 번째 사용자에 대한 게 끝나면 다음 사람거 다음 사람거 이렇게 하는 게 아니라

혼자서 하는 커피숍
주문을 받고 준비하는데 그 사이 다른 손님들이 오면 줄을 섬
한 명 한 명 처리하면 줄이 길어짐
이게 동기화된 처리

나 혼자서는 안돼
3명을 고용
손님 오면 첫번째 직원한테 주고 또 손님 오면 두번째 직원한테 주고
나는 주문만 받음
좀이따 다 되면 저 친구가 줄 거예요
이게 비동기 처리
이벤트 루프가 돌면서 어떤 일이 끝나면 그 사람한테 대신 알려주는 거

파일 데이터를 가져가야 됨
서버 죽었다
비동기로 처리해서 원격에 있는 데이터를 가지고 오는 동안
가지고 오는 동안 브라우저가 아무것도 못하면 안 되니까 비동기로 처리가 된다
이 데이터가 올 때까지 놀고 있을 수 없음
대신 코딩을 '이 처리가 다 끝나면 이런 일을 해줘'

첫번째팀의 json 데이터, 두번째팀의 json 데이터, 세번째팀의 json 데이터
데이터를 다 가지고 오면 그때 콜백함수를 하나 만들어서 그 안에서 배열을 이용해서 처리(지도에 뿌려줄 거) 이거를 만들어볼 거임

다시 한 번 흐름 정리해보자

버튼을 클릭하면 json 데이터를 가지고 온다
3초의 시간이 걸린다고 가정
다 되면 콜백을 지정해준다
"다 가지고 오면 이런 걸 해줘"
콜백함수의 내용 : 이 데이터를 가지고 지도 뿌리는 거
데이터를 다 가지고 오면 콜백함수가 지도를 나타내준다

이거를 처리하는 방법이 여러 가지 방법이 있음

순수한 js도 비동기 처리 가능. 비동기 처리 호출. → Fetch API 제공이 됨
jQuery 이용
라이브러리 이용 (Axios)

원격지에 있는 json 데이터를 가지고 처리를 하는 방법

Ajax는 패턴

Ajax란 Asynchronous JavaScript and XML의 약자
asynchronous 동시에 존재(발생)하지 않는

JSON, XML ← 둘 다 순수한 데이터

주소 호출해야 데이터를 받아와서 새로 뿌려줌
깜박거린다
그 동안 내가 써놓은 게 다 지워지는 거

지도
자동완성
네이버에 검색어 입력할 때마다
네트워크 탭 보면 네트워크가 뭔가 호출되는 게 보임
글자를 입력할 때마다 서버를 호출한다는 얘기
옛날에는 페이지를 계속 새로고침을 해서 완전히 새로운 데이터를 가져와서 뿌려주는 방식
새로운 패턴인 거
화면은 그대로 있는데 서버랑 통신을 해서 데이터를 가져와서 화면에 보여주는 방법
AJAX는 새로운 기술은 아니고 새로운 패턴
이 패턴은 마이크로소프트가 만듦
마이크로소프트가 왜 이런 생각을 했을까
브라우저가 깜박거리지 않고 서버랑 통신. 자바스크립트를 이용해서 서버랑 데이터를 교환하는 방식

마이크로소프트는 운영체제와 브라우저를 가지고 있음
운영체제도 가지고 있고 브라우저도 가지고 있음
브라우저에서 운영체제랑 통신하는 거
ActiveX control
브라우저에 접근하는 코드를 집어 넣고 싶은 거
악성코드 넣는 사람들

이것은 이미 존재하던 기술이었지만 2000년도 중반 이후로 인기를 끌기 시작했다. 구글은 2004년에 G메일, 2005년에 구글 지도 등의 웹 애플리케이션을 만들기 위해 비동기식 통신을 사용했다.

onreadystatechange
on 붙은 거 보임
onclick
on이라는 데이터가 나오면 무조건 이벤트

window.onload()
브라우저 내의 모든 데이터의 처리가 다 끝난 다음에 실행하는 이벤트가 onload
DOMContentLoaded 이벤트 : DOM 데이터의 구성이 끝나면
웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
onload의 load는 loaded를 의미
윈도우의 모든 데이터 표현이 다 끝났다면 호출되는 게 window.onload()

document.onload
documents의 모든 데이터 표현이 다 끝났다면 호출되는 거

xhr.readyState : 서버와 통신하는 단계?

너무 길고 복잡해서 더 이상 이거 안 씀

나중에 Ajax 같은 거 배울 때는

댓글 더보기 버튼도 다 Ajax로 가져오는 거

예전에는 코딩을 이렇게 길게 짜야됐음

그래서 사람들이 라이브러리 만듦 (제이쿼리)

우리는 제이쿼리가 아니라 Fetch API를 써볼거임

XMLHttpRequest랑 비슷한데 좀 더 강격하고 유연한 조작이 가능하다고 되어 있음

문제는 브라우저 호환성

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

then

then : 이게 다 되면 이 function 실행해줘

얘를 이용해서 버튼을 누르면 json 데이터 가지고 와서 뿌리면 됨

Fetch API는 자바스크립트 기본 라이브러리에 포함 되어 있음

최근에는 axios

https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/axios-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC/

비동기는 콜백으로 처리

이게 요즘 트렌드

ex2.html

<script>

    document.querySelector("#btn").addEventListener("click", function () {
    
        console.log("click")
    
    }, false)

</script>

fetch("http://localhost:5555/w17/store.json") 추가

<script>

    document.querySelector("#btn").addEventListener("click", function () {
    
        console.log("click")
  
        fetch("http://localhost:5555/w17/store.json")
    
    }, false)

</script>

네크워크 탭 보면
클릭한 순간 store.json을 호출

웹스톰에서만 허락해주는 거
실제로는 보안 문제로 막음

'ajax cors 에러' 검색

행사상품

http여서 됨

서로 허락을 해줘야 됨
Access to fetch at

각 팀마다

1팀 2팀 3팀

1team.json
2team.json
3team.json

서버 하나에만 작업

ex3.html 생성

지도는 이따가 붙일 거

버튼을 클릭 url 필요

지도랑 결합하기

큰따옴표 이미 썼으니까 작은따옴표로 쓰기

    function loadData(serverInfo) {
        console.log("loadData: " + serverInfo)
        fetch(serverInfo)
    }

버튼 하나씩 클릭하면서 네트워크탭 보기
1team.json
2team.json
3team.json
파일 들어옴

공공데이터 API

then

비동기

이 데이터 다 가지고 오면
콜백함수를 하나 넣어준다
그 데이터 가지고 뭐해줘 라는 콜백함수를 넣어준다

가지고 온 데이터를 응답 데이터라고 한다 response

데이터 뭔지 한 번 확인해봐야 되니까
console.log(response)

console창 보면 Response 잘 옴

이 데이터 웹스톰이 만들어낸 거임
body가 json 데이터
이제 조금 더 부족함

response.json

    function loadData(serverInfo) {
        console.log("loadData: " + serverInfo)
        fetch(serverInfo).then(response => {
            console.log(response.json())
        })
    }

json 데이터 나올 줄 알았는데 Promise 나옴

then 써주기

    function loadData(serverInfo) {
        console.log("loadData: " + serverInfo)
        fetch(serverInfo)
            .then(response => response.json())  // 서버에서 데이터 가져옴
            .then(data => {                    // 데이터 추출
                console.log(data)
            })
    }