웹 개발 종합_3주차

웹 개발 3주 차에 배운 내용

Jquery + fetch

2주 차에 JQuery를 맛보기 했었는데 3주 차에는 배운 JQuery를 프로젝트에 적용해 봤다!
fetch라는 새로운 개념도 등장하였고, 마지막 숙제로 배운 내용을 바탕으로 페이지 예시 사진을 보며 직접 페이지를 작성하는 것도 경험했다😎

추억앨범 - JQuery 적용하기!

전에 만들었던 추억앨범의 PostBox를 버튼을 통해 열고 닫는 기능을 추가했다!!

function openClose() {
    $('#postingbox').toggle();  //display 값이 none으로 바뀌면서 안보이게 되는 원리이다. 
}

<div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>
    <button onclick="openClose()">추억 저장하기</button>
</div>
<div class="mypostingbox" id="postingbox">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="image" placeholder="앨범 이미지">
        <label for="floatingInput">앨범 이미지</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="title" placeholder="앨범 제목">
        <label for="floatingInput">앨범 제목</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="content" placeholder="앨범 내용">
        <label for="floatingInput">앨범 내용</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="date" placeholder="앨범 날짜">
        <label for="floatingInput">앨범 날짜</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark" onclick="makeCard()">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

먼저 HTML의 head 태그 안에 script 태그를 생성하고 function 함수 openClose를 작성했다.
추억 저장하기 버튼 태그에 onclick="openClose()" 를 추가했고  id="postingbox" 를 가져와서 toggle 메서드를 통해 PostBox를 열고 닫고 할 수 있었다!!
사라지고 다시 나타나는 걸 눈으로 직접 보니까 더 신기했던 것 같다 😮

왼쪽이 추억 저장하기 버튼을 이용해서 PostBox를 닫기 전, 오른쪽이 PostBox를 닫은 후 모습이다 😊

다음으로는 데이터를 입력하고 카드를 생성하는 기능을 추가했다!!

function makeCard() {
    let image = $('#image').val();  //안에 있는 image value 값을 가져올 수 있다.
    let title = $('#title').val();  //안에 있는 title value 값을 가져올 수 있다.
    let content = $('#content').val();  //안에 있는 content value 값을 가져올 수 있다.
    let date = $('#date').val();  //안에 있는 date value 값을 가져올 수 있다.

    let temp_html = `
    <div class="col">
        <div class="card h-100">
            <img src="${image}"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
                <small class="text-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;

    $('#card').append(temp_html);  //card 하나 추가하기!
}

<div class="mybtn">
    <button type="button" class="btn btn-dark" onclick="makeCard()">기록하기</button>
    <button type="button" class="btn btn-outline-dark">닫기</button>
</div>

<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
    <div class="col">
        <div class="card h-100">
            <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">앨범 제목</h5>
                <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
                <small class="text-body-secondary">앨범 날짜</small>
            </div>
        </div>
    </div>
</div>

script 태그 안에 function 함수 makeCard를 작성했다.
기록하기 버튼에서 onclick="makeCard()" 를 추가했고 id="card" 를 가져와서 append 메서드를 통해 새로운 카드를 원하는 위치에 추가할 수 있었다!!
내가 원하는 내용을 입력하고 버튼을 눌렀을 때 입력했던 내용들이 카드로 만들어지는 과정을 보니까 강의를 더 흥미롭게 들을 수 있었다 😎

왼쪽이 내용만 입력했을 때, 오른쪽이 기록하기 버튼을 누른 후 카드가 생성된 모습이다 😊
하지만 데이터를 저장해서 보여주는 것이 아니라서 새로고침을 하면 그 전에 추가했던 내용들이 모두 사라졌다.......

 

스파르타플릭스 - JQuery 적용하기!

다음으로 스파르타플릭스의  페이지에서 추억앨범에 사용했던 기능들을 다시 한번 해보는 시간을 가졌다!

function openClose() {
    $('#postingbox').toggle();
}

<div class="main">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">킹덤</h1>
                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
                    세자뿐이다.</p>
                <button onclick="openClose()" type="button" class="btn btn-outline-light">영화 기록하기</button>
                <button type="button" class="btn btn-outline-light">상세정보</button>
            </div>
        </div>
    </div>
<div class="mypostingbox" id="postingbox">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
        <label for="floatingInput">영화 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="title" placeholder="영화 제목">
        <label for="floatingInput">영화 제목</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="star">
            <option selected>별점선택</option>
            <option value="⭐">⭐</option>
            <option value="⭐⭐">⭐⭐</option>
            <option value="⭐⭐⭐">⭐⭐⭐</option>
            <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
            <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="comment" placeholder="추천 이유">
        <label for="floatingInput">추천 이유</label>
    </div>
    <button type="button" class="btn btn-danger" onclick="makeCard()">기록하기</button>
</div>

먼저 HTML의 head 태그 안에 script 태그를 생성하고 function 함수 openClose를 작성했다.
영화 기록하기 버튼 태그에 onclick="openClose()" 를 추가했고  id="postingbox" 를 가져와서 toggle 메서드를 통해 PostBox를 열고 닫고 할 수 있었다!!
다시 한 번 복습하는 거였지만 여전히 신기했다 😮

왼쪽이 영화 기록하기 버튼을 이용해서 PostBox를 닫기 전, 오른쪽이 PostBox를 닫은 후 모습이다 😊

다음으로 동일하게 데이터를 입력하고 카드를 생성하는 기능을 추가했다!!

function makeCard() {
    let image = $('#image').val();
    let title = $('#title').val();
    let comment = $('#comment').val();

    let star = $('#star').val();  //select로 이루어진 부분에서는 value에 있는 값을 출력한다. 따라서 출력하고 싶은 값으로 value 값을 변경하면 된다!

    //console.log(image, title, comment);  //console 창에 값 띄우기!
    //console.log(star);  //console 창에 값 띄우기!

    let temp_html = `            
    <div class="col">
        <div class="card h-100">
            <img src="${image}"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${star}</p>
                <p class="card-text">${comment}</p>
            </div>
        </div>
    </div>`;

    $('#card').append(temp_html);  //카드 추가하기!
}

<div class="mypostingbox" id="postingbox">
    <button type="button" class="btn btn-danger" onclick="makeCard()">기록하기</button>
</div>

<div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목</h5>
                    <p class="card-text">⭐⭐⭐</p>
                    <p class="card-text">영화 코멘트</p>
                </div>
            </div>
        </div>
    </div>
</div>

script 태그 안에 function 함수 makeCard를 작성했다.
기록하기 버튼에서 onclick="makeCard()" 를 추가했고 id="card" 를 가져와서 append 메서드를 통해 새로운 카드를 원하는 위치에 추가했다!!
다시 반복해서 해보는 거였지만 전에 한 번 했던 걸 생각하면서 직접 해보니까 더 흥미롭게 다가왔다 😎

왼쪽이 내용만 입력했을 때, 오른쪽이 기록하기 버튼을 누른 후 카드가 생성된 모습이다 😊

클라이언트 & 서버 개념 이해하기

fetch라는 새로운 개념을 사용하기 위해서 우선 클라이언트와 서버의 개념을 이해하는 시간을 가졌다.

서버 → 클라이언트 : 데이터를 줄 때는 JSON 형식으로 전달되었다.
JSON 형식은 Key-Value로 이루어져 있어서 딕셔너리 구조와 아주 유사하다!

크롬 익스텐션 JSONview를 설치하고 서울시 미세먼지 OpenAPI 를 살펴보았다.
설치하고 나니 눈에 보기 쉽게 데이터들이 바뀌어 있었다.

클라이언트 → 서버 : GET 방식으로 데이터가 전달되었다.

⭐API는 은행 창구와 같은 것!⭐

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때
                예) 영화 목록 조회

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
예) 회원 가입, 회원 탈퇴, 비밀번호 수정

https://movie.daum.net/moviedb/main?movieId=68593

위 주소는 크게 두 부분으로 쪼개진다.
바로 "?"가 쪼개지는 지점인데 "?" 기준으로 앞 부분이 <서버 주소> 뒷부분이 [영화 번호]이다.

• 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593
• 영화 정보: movieId=68593

✔️참고 - GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

 

Fetch

fetch 연습을 위해 우선 HTML 파일을 하나 생성한다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            alert('연결완료');
        }
    </script>
</head>

<body>
    <button onclick="hey()">fetch 연습!</button>
</body>

</html>

미세먼지 OpenApi URL을 통해 데이터를 가져온다.
Fetch의 기본 골격은 다음과 같다.

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) 
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다.
	.then(data => { 
		console.log(data)
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다.

• fetch("여기에 URL을 입력") : URL로 웹 통신 요청을 보낼 거야!
• 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
• .then() : 통신 요청을 받은 다음 이렇게 할 거다!
• res ⇒ res.json()
  • 통신 요청을 받은 데이터는 res라는 이름을 붙인다.(변경 가능)
  • res는 JSON 형태로 바꿔서 조작할 수 있게 한다!
• .then(data ⇒ {}) : JSON 형태로 바뀐 데이터를 data라는 이름으로 붙인다.

이렇게 fetch와 OpenApi를 활용해서 데이터를 불러오고 출력까지 가능하다.

function hey() {
    let url = 'http://spartacodingclub.shop/sparta_api/seoulair';  //open api URL
    fetch(url).then(res => res.json()).then(data => {  //open api에 있던 데이터를 가져와서 data라는 변수에 저장~!
        let rows = data['RealtimeCityAir']['row'];

        rows.forEach(a => {
            let gu_name = a['MSRSTE_NM'];  //구 이름
            let gu_mise = a['IDEX_NM'];  //구 미세먼지

            console.log(gu_name, gu_mise);
        });

        //console.log(data['RealtimeCityAir']['row'][0]);  //data - RealtimeCityAir - row - 0번째 데이터 가져오기!

    })
}

fetch를 이용해서 미세먼지 수치가 40 이상이라면 빨간색 글씨로 표시하게끔 할 수도 있다 😮

.bad {
    color: red;
}

function q1() {
    let url = 'http://spartacodingclub.shop/sparta_api/seoulair';  //open api URL

    $('#names-q1').empty();

    fetch(url).then(res => res.json()).then(data => {  //open api에 있던 데이터를 가져와서 data라는 변수에 저장~!
        let rows = data['RealtimeCityAir']['row'];

        rows.forEach(a => {
            let gu_name = a['MSRSTE_NM'];  //구 이름
            let gu_mise = a['IDEX_MVL'];  //구 미세먼지 농도

            //console.log(gu_name, gu_mise);

            let temp_html = ``;
            if (gu_mise > 40) {
                temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
            } else {
                temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
            }
            $('#names-q1').append(temp_html);
        });
        //console.log(data['RealtimeCityAir']['row'][0]);  //data - RealtimeCityAir - row - 0번째 데이터 가져오기!
    })
}

 

추억앨범 - Fetch 적용하기!

fetch 함수를 이용해서 미세먼지의 정도를 나타낼 수 있다!!

$(document).ready(function () {  //페이지 준비가 다 되었을 때 실행되는 코드이다!
    let url = "http://spartacodingclub.shop/sparta_api/seoulair";

    fetch(url).then(res => res.json()).then(data => {
        let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
        //console.log(mise);  //mise 출력하기! - 좋음만 출력된다.

        $('#msg').text(mise);  //span 태그 안의 '나쁨'이라는 단어를 mise 값으로 변경해준다. 필요한 곳에 텍스트를 갈아끼웠다.
    })
})

script 태그 안에 $(document).ready(function () { ... }) 함수를 작성한다.
fetch 함수를 이용하여 주어진 URL에서 데이터를 가져오고 fetch(url).then(res => res.json()) 을 통해 반환된 응답 내용을 JSON 형식으로 만든다.
.then(data => { ... }) 으로 JSON 데이터를 가져온 후 mise 변수에 값을 담는다.
$('#msg').text(mise); 를 통해 텍스트를 mise 변수 값으로 변경한다.
span 태그를 이용해서 바꾸고 싶은 부분만 따로 묶고 그 부분만 바꿀 수 있다!

나만의 추억앨범 밑에 현재 서울의 미세먼지 : 좋음이 생긴 것을 확인할 수 있다 😮😮

 

스파르타플릭스 - Fetch 적용하기!

fetch 함수를 이용해서 현재기온을 나타낼 수 있다!!

$(document).ready(function () {  //페이지 준비가 다 되었을 때 실행되는 코드이다!
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

    fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];

        $('#msg').text(temp);
    })
})

추억앨범에서 사용한 방법을 똑같이 사용하여 현재 기온으로 텍스트를 바꿀 수 있다.

내가 찜한 콘텐츠 옆에 현재기온이 생긴 것을 확인할 수 있다 😮😮
여기서 하나 헤맸던 부분이 현재 기온을 적용해서 텍스트를 고치는 과정에서 기온이 바뀌지 않아서 코드 오류인 줄 알았는데...
알고 보니 작성한 기온과 현재기온이 동일해서 안 바뀌는 것이었다....... 🥲🥲🥲
코드 오류가 아니었던 것이 다행이었다 휴...

숙제

마지막으로 지금까지 배운 내용들을 복습한다는 개념으로 3주 차에는 숙제가 있었다.
예시 사진을 보면서 같은 페이지를 만드는 숙제였다. 숙제를 막상 시작하고는 어떻게 해야 하나 막막했는데, 숙제를 푸는 순서가 나와있었고 차근차근 하나씩 해결하다 보니 배웠던 내용들이 기억이 났고 난관을 하나씩 해결할 수 있었다.
글과 PostBox의 위치 맞추는 방법을 margin과 padding 값을 통해 해결할 수 있었고, 글씨를 진하게 하는 방법은 b 태그를 통해 해결할 수 있었다.
카드 추가하는 방법과 내가 원하는 내용 넣는 방법 등등 지금까지 배운 내용들이 모두 모여있는 숙제처럼 느껴졌다.
하나씩 해결해 나가다 보니 시간은 꽤 오래 걸렸지만 숙제를 전부 해결해서 예시 사진과 같은 페이지를 만들 수 있었다 😎😎

숙제를 통해 내가 만든 스파르타 푸드파이터 페이지 🤨

 

+ 오늘 실행한 계획

• SQL, 자바 알고리즘 문제 각각 2문제씩 풀기!
  • SQL 문제는 어렵지 않게 해결했는데 자바 문제에서 배열 개념을 적용하는 문제가 있었다. 아직 배열에 대한 확실한 개념이 없었던 상황이어서 구글링을 통해 배열에 대한 개념을 확인하였고 문제를 무사히 해결할 수 있었다.
• Java 입문 강의_스코프, 형변환 파트를 들으려고 했지만 숙제에 상당한 시간이 걸려서 내일 수강할 계획이다!

오늘도 알찬 하루를 보냈다😎😎