지난 주말 지방 순회라는 바쁜 일정으로 인해 2주차를 건너뛰고 2, 3주차 개발일지를 작성한다.
1주차에는 뼈대인 HTML과 꾸미기 역할인 CSS를 활용했다면, 2,3주차에는 Javascript로 움직이도록 만들어보았다.
지난번과 부트스트랩을 이용하여 웹을 꾸미는 것은 동일하였지만,
추가적으로 JQuery를 이용하여 만든 페이지에 데이터를 기입하여 추가 카드를 작성하거나
Fetch를 이용하여 OpenAPI의 정보를 웹페이지에 적용시키고 그것을 활용하는 법을 익혔다.
PostBox 열고 닫기, 데이터 입력 후 카드를 생성, 서울시 미세먼지 OpenAPI에서 정보를 가져와 추억앨범에 미세먼지 정보를 넣었고
마찬가지로 서울온도 OpenAPI에서 정보를 가져와 스파르타플릭스에 온도 표시를 했다.
3주차 숙제로는 20도를 기준으로, 온도에 따라 '추워요' 혹은 '더워요' 를 나타내도록 만들었는데,
나는 추가적으로 온도 표시와 함께 나타나도록 만들었다.
이번 강의에서는 가져온 데이터를 내가 원하는데로 활용하여 나타내는 값을 '덥다' 혹은 '춥다'라는 값으로 바꿔 출력시키는 것이 가장 흥미로웠다.
앞으로 내가 만들어갈 무언가들 또한 이런식으로 가져온 정보를 활용 하여 새로운 새롭게 표현 된다니 기대가 된다.
하지만 아직까진 새로고침 하면 카드에 입력했던 데이터가 사라진다는점이 아쉽다.
4주차에는 DB에 저장하고 불러낼 수 있다는데, 나만의 작고 소듕한 일기장이 생기는 것 같아 설레기도 하다.
마지막으로 2,3주차 수업 및 숙제의 결과물과 필기 내용을 첨부한다.
---------------------
미세먼지 표시
---------------------
기록 완료, alert 표시
---------------------
카드 추가 및 온도 추가
3주차 숙제: 20도를 기준으로 높으면 “더워요”, 낮으면 “추워요”가 나오게 해주세요! -> 나는 온도와 함께 나오도록 응용했음.
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
let asd = '더워요';
let zxc = '추워요';
if (temp>20) {
$('#feel').text(asd)
}
else {
$('#feel').text(zxc)
}
$('#temperature').text(temp)
// 2번째 방법
// let temp = data['temp'];
// let qwer = ""; //이걸 넣어줘야 if에서 빠진뒤에도 qwer이란 변수가 유지된다!!
// if (temp>20) {
// qwer = ('더워요');
// }
// else {
// qwer = ('추워요')
// }
// $('#feel').text(qwer)
// $('#temperature').text(temp)
2주차
스파르타플렉스
폼 가져올 때 적당한거에서 '검사'
--> 움직이면서 코드 어딨는지 보고 --> edit as html --> 복사(ctrl+A)
--> 가져온걸 div로 한번 더 감싸서 편집
CSS에서는 선택자로 class를 사용
class="title"
--> head에 style태그를 만들고 .title { ) 로 편집
/* body를 불러올때는 .을 안붙였다 (테그가 하나밖에 없기 때문.) */
자바스크립트는 script 태그에 쓴다
let a = 'hello';
console.log(a);
--> 콘솔에 a를 출력 --> 개발자용(확인용)
리스트 : 첫 번째 값은 [0]으로 불러온다
let a= ['사과','수박','배'];
console.log(a[0])
딕셔너리 : 키(Key)-밸류(Value) 값의 묶음
let person = {'name': 'bob', 'age': 30, 'height': 180}
console.log(person['name'])
--> bob
리스트+딕셔너리
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15
조건문
if (변수 < ?) {실행} else {실행}
반복문 : 99%는 리스트가 쓰임
forEach쓰면 자동완성: (어떤 array(리스트이름)를 forEach로 돌려서 써먹는다는 의미)
array.forEach(element => { });
array랑 element는 바꿔서 사용(element 너무 기니까 a로)
ages.forEach(a => { });
console.log(a)
--> ages의 내용을 한줄씩 출력
ages.forEach(a => { });
if ( 조건 ) { 내용 } else { 내용 }
리스트에 있는 한개씩 빼와서 if문의 조건에 따라 내용이 출력되게 만들 수 있음.
script에 function 함수이름() { 실행할 내용 } : 함수 선언
버튼 태그 속에 onclick="hey()" 추가하면 함수 hey가 실행됨 : 함수 사용
JQuery
title 밑에 복붙 한줄
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
제이쿼리로 조작하기 위해서는 바꾸고자 하는 태그 속에 id값을 붙여줘야 함.
id= "title"
--> 밑에꺼는 함수에 작성
$('#title') --> id값을 가리킨 것
$('#title').text('ㅁㄴㅇ') --> id값이 있는 태그의 글자가 ㅁㄴㅇ로 바뀜
$('#q1').empty(); --> q1의 값을 지움
이 외 필요한것들은 구글링
let fruits = ['사과','배','감','귤','수박']
fruits.forEach(a => {
let 변수 = `<p>$(a)<p>`; //주의: ' 가 아니라 ` (백틱) 이다.
$('#title').append(변수);
});
--> 사과부터 수박까지 한줄씩 출력
3주차
let image = $('#image').val();
--> image라는 id값을 불러와서 image라는 변수에 입력되는 값을 넣는다.
JSONView : 좀 더 예쁘게 JSON을 볼 수 있다
--> Key:Value로 이루어져 있다 --> 자료형 Dictionary와 유사
GET방식: 클라이언트가 서버에게 웹페이지를 보여달라고 말하는 것 중에서, URL뒤에 붙여서 보낸다
(다른방식은 POST방식이 있다 --> BODY에다가 데이터를 넣어서 보냄)
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2 ;
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
페이지 새로띄우거나 새로고침시 작동
$(document).ready(function () {
alert('안녕!'); })
span 태그: p태그 안에서 글자를 묶을 때 사용
--> span태그에 id값을 주고 --> 이 id값을 script에서 바꿔버림
Fetch 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data) })
fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 기본상태인 GET방식
.then(res => res.json())
// 통신 요청을 받은 데이터는 res(변경가능)라는 이름으로 JSON화 한다
// (JSON 형태로 바꿔서 조작할 수 있게)
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
--> 사용 전 console.log(); 로 찍어봐서 잘 나오는지 확인
