목록전체 글 (238)
내가 하고싶은 건 다 하는 공간
서울시 미세먼지 Open API로 Fetch 연습하기
최종 화면 목표A. 업데이트 버튼을 클릭하였을 때 첫번째 자치구의 전체 정보를 출력한다.B. 업데이트 버튼을 클릭하였을 때 모든 자치구의 1) 자치구명 2) 미세먼지 값 정보를 출력한다.C. 미세먼지 값이 40 이상인 경우 글자의 색을 빨간색으로 나타낸다. 목표 A: 버튼을 클릭하였을 때 첫번째 자치구의 정보를 출력한다. 1. 일단 업데이트 버튼을 클릭하였을 때 특정 동작이 수행하도록 태그에 함수 onclick="hey()"를 넣어준다.업데이트2. hey() 함수에 fetch() 메소드를 넣어서 정보를 불러오는 동작을 수행하도록 한다.function hey() { let url = 'http://spartacodingclub.shop/sparta_api/seoulair'; fetch(url)..
Fetch란? fetch() 메소드 기본 구성 알아보기
Fetch란?자바스크립트에서 네트워크 요청을 보내고 서버로부터 응답을 받아오는 최신 APIFetch API가 제공하는 fetch() 메서드로 OPEN API에서 제공하는 정보를 쉽게 가져올 수 있다. fetch() 메소드 기본 구성형태를 기억하자!먼저 fetch() 메소드 안에 매개변수로 url이 들어간다.그런다음에 .then() 메소드가 두 개 나오는데, 첫 번째는 받은 데이터의 이름을 res로 정하고, JSON으로 형태변환한다.두 번째는 JSON 형태의 데이터를 data로 칭하고, 아래의 코드를 수행한다.지금은 간단하게 console.log(data) 코드를 통해 data를 콘솔창에 출력하는 단순 작업을 수행하지만,여기에 다양한 함수를 적용할 수 있다.
클라이언트 - 서버 개념 이해하기(JSON, API, REST API, HTTP Method)
JSONJSON은 서버와 클라이언트가 서로 소통할 때 사용하는 텍스트 양식이다.즉, 데이터를 주고 받는 양식이다."키-값"으로 구성되어 있다는 점에서 중첩된 딕셔너리 형태와 유사하다.APIAPI는 컴퓨터와 컴퓨터(보통 클라이언트와 서버)를 연결해주는 경로라고 생각하면 된다.API는 허락된 곳의 접근만 허용하기 때문에, OPEN API를 활용하기 위해서는 api key를 발급받아서 사용해야 한다.url을 보면 api를 확인할 수 있는데, 영화 페이지 url을 예시로 보면 다음과 같다. REST API오늘날 웹에서 볼 수 있는 가장 많이 사용되고 유연한 API이다.REST API(Representational State Transfer Application Programming Interface)는 HTTP..
제이쿼리 이용해서 새로운 카드를 생성하는 코드 짜기
목표중앙에 있는 카드에 정보를 입력하면 아래와 같이 새로운 정보 카드가 추가되는 기능 구현카드를 추가하는 함수 makecard() function makecard() { let image = $("#url").val(); let title = $("#title").val(); let star = $("#star").val(); let comment = $("#comment").val(); let temp_html = ` ${title} ${star} ${comment} `; $("#card").append(temp_html); }1. 네 개의 변수 설정: 영화 포스터 url, ..
${} (템플릿 리터럴)- 백틱(``)으로 감싸여 있다.문자열 내에서 변수나 표현식을 포함할 수 있다.여러 줄의 문자열을 작성할 때 유용하다. $() (제이쿼리)jQuery 라이브러리에서 제공하는 함수주로 HTML 요소를 선택하거나 조작할 때 사용 예시 function makecard() { let image = $("#image").val(); let title = $("#title").val(); let date = $("#date").val(); let content = $("#content").val(); let temp_html = ` ..
제이쿼리란? 누군가가 만들어둔 JS 코드를 그냥 가져다가 쓰는 것그렇기 때문에 import가 필요하다(마치 파이썬에서 import matplotlib.pyplot as plt 하는 것처럼) 제이쿼리를 적용하는 방법 사이에 아래 태그를 넣으면 끝!코드를 적다보면 사이에 많은 태그들이 있는데,위치는 상관없다. 강의에서는 안에서 과 사이에 넣었다. 제이쿼리로 하고자 하는 것제이쿼리를 통해 버튼을 클릭하여 PostBox 열고 닫는 기능을 구현하고자 한다.일단 버튼에 onclick="openclose()"라는 함수를 적용하여 클릭시 openclose() 함수가 실행되도록 한다. My Album Keep Good Memories openclose() 함수를 제대로 적기 전에 버..