072DATA

나만의 추억 앨범 만들기 - 자바스크립트 적용( JQuery, Fetch ) 본문

FrontEnd/HTML, CSS, JavaScript

나만의 추억 앨범 만들기 - 자바스크립트 적용( JQuery, Fetch )

0720 2024. 7. 22. 18:40

안녕

 

 

 

이번에는 이전에 추억 앨범 페이지에

 

동적인 요소들을 추가하기 위해 javascript를 적용할 것이고

 

JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.

 

 

 

 

 

JQuery는 HTML 문서의 탐색, 이벤트 처리, 애니메이션,

 

그리고 Ajax 통신을 단순화하기 위해

 

만들어진 빠르고 간결한 JavaScript 라이브러리입니다

 

 

 

JQuery 문법

$(document).JQuery의 메소드들

 

 

제이쿼리를 사용하면 기존 자바스크립트에서는 사용되는 문법

 

document.getElementById를 $표시 하나로 표현 가능합니다.

 

해당  문법을 참고하여 페이지를 만들어 보겠습니다. 시작!!

 

 

추억 앨범 만들기 디자인편 링크

https://0723-0725.tistory.com/2

 

나만의 추억 앨범 만들기 - 페이지 디자인편(Bootstrap, HTML, CSS)

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다.    먼저 보면 좋

0723-0725.tistory.com

 

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

 

 

먼저 제이쿼리를 임포트 해주고 제이쿼리를 사용할 때 반드시 ID 값을 주어야 합니다.

 

진짜 기능을 만들어보기에 앞서 맛보기로 어떠한 div를 열었다 닫았다 할 때 로직을 짜봅시다.

 

    <script>
      function openClose(){
        $('#postingBox').toggle();  //앞서 소개한 문법인 $('#document').메서드 형식
      }
    </script>
    
	<div class="mytitle">
      <h1>나만의 추억앨범</h1>
      <button onclick="openClose()">추억 저장하기</button>
    </div>

    <div class="mypostingbox" id="postingBox">
    </div>

 

 

 

 

 

 

openClose 함수를 추억 저장하기 버튼에 onclick으로 불러오면

 

postingBox의 div는 열었다가 닫았다 하는 동작을 보일 수 있어요

 

이렇게 자바스크립트를 활용하여 웹 페이지의 동적인 부분을 담당하게 하고

 

혹은 서버와 통신하여 데이터를 주고 받는 행위를 할 수 있습니다.

 

그럼 이제 시작해봅시다

 

 

 

 

 

 

인풋 박스에 데이터를 입력해서 새로운 카드로 붙여 넣고 

fetch를 사용하여 간단한 날씨 정보를 얻어 올 거에요.(서울 기준) 

 

먼저 입력 값을 input으로 받아서 새로운 카드로 만들어 볼겁니다.

        <input
          type="email"
          class="form-control"
          id="image"
          placeholder="앨범 이미지"
        />
        
      <script>
          function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();
          }
      </script>

 

 

 

 

 

input에 id를 부여해서 해당 값을 함수 안에 있는 변수에 저장합니다.

 

이때 사용되는 * val()은 해당 아이디의 값을 가져오겠다는 메서드입니다.

 

  <script>     
     function makeCard() {
        let image = $('#image').val();
        let title = $('#title').val();
        let content = $('#content').val();
        let date = $('#date').val();

        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);
      }
</script>

 

 

 

 

 

그 뒤에 카드의 HTML 코드를 변수에 담고 image, title, content, date 변수들을

 

해당 HTML 코드에 넣어 입력한 값을 담은 카드를 생성할 수 있도록 해줍니다

 

그 후에 id가 card인 div에 append(부모 요소에 새로운 자식 요소 추가)

 

메서드를 사용하여 새로운 카드들을 붙여줍니다.

 

 

 

 

 

이렇게 제가 직접 작성한 데이터를 가진 카드가 새롭게 생성 되었습니다.

 

물론 서버(데이터베이스)에 저장된 데이터가 아니기 때문에

 

새로고침을 하거나 페이지를 닫게되면 데이터가 소실 되는데

 

이 문제에 대해 개선하는 부분을 다음 글에서 다뤄 보겠습니다.

 

다음으로 Fetch라는 것을 적용해 볼거에요.

 

 

 

 

Fetch는 JavaScript API로, 네트워크 요청을 처리하고

 

 서버와 통신하여 데이터를 주고 받을 수 있습니다.

 

이 Fetch를 이용하여 날씨에 대한 데이터를 가져오는 로직을 짜보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

이미지의 빨간색 동그라미 표시가 된 부분을 보면 미세 먼지에 대한 정보를 나타내는데

 

현재는 데이터 값을 넣지 않았기 때문에 비어 있는 것을 볼 수 있습니다. 

 

데이터를 가져와서 이 부분에 대한 값을 넣도록 해볼게요

 

이 부분은 어떠한 조건에 따라서 렌더링되기 보다는 해당 페이지가

 

열리면 자동으로 값이 입력될 수 있도록 해야합니다. 

 

때문에  JQeury의 기본 문법인 $(document).ready()를 사용할게요

 

 

<script>
  $(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'];
        $('#msg').text(mise);
      });
  });
</script>


<body>
    <div>
      <p>현재 서울의 미세 먼지:<span id="msg"></span></p>
    </div>
</body>

 

 

 

 

 

먼저 데이터를 가져올 API의 URL을 변수 url에 저장하고

 

지정된 URL로 네트워크 요청(fetch)을 보냅니다.

 

그 다음 서버로부터 받은 응답(res)을 JSON 형식으로 변환하고

 

JSON으로 변환된 데이터(data)를 처리합니다 이렇게 하면

 

JSON 데이터에서 RealtimeCityAir 객체의 첫 번째 행의

 

IDEX_NM 값을 변수 mise에 저장하게 되는 것 입니다.

 

그 뒤에 msg라는 id를 가진 공간에 해당 데이터를 출력하도록  

 

$('#msg').text(mise); 코드를 사용한 것입니다.

 

 

* then은 Promise가 성공적으로 완료되었을 때나 실패했을 때 각각 실행할 콜백 함수를 정의할 수 있습니다

 

* Promise는 JavaScript에서 비동기 작업의 결과를 처리하기 위한 객체이며 3가지 상태를 가지고 있습니다.

 

  • Pending: 작업이 아직 완료되지 않음.
  • Fulfilled: 작업이 성공적으로 완료됨.
  • Rejected: 작업이 실패함.

 

 

결과

 

이제 미세먼지의 정보가 나타나는 것을 볼 수 있어요

 

 

마무리

 

오늘은 자바스크립트와 fetch를 사용한 데이터를 교신하는 방법을 알아보았는데

 

그냥 되리란 법 없이 데이터의 형태를 변환하고 그 값을 가져오는게 얼마나 복잡한지

 

알 수 있었다 다음에는 데이터베이스를 활용해서 기록된 데이터를 가지고 

 

앨범 페이지를 더 멋지게 가꿔봐야겠다 끝

 

 

'FrontEnd > HTML, CSS, JavaScript' 카테고리의 다른 글

얕은 복사와 깊은 복사 - JavaScript  (0) 2024.07.30
개인 프로젝트 - 간단한 영화 정보 검색 사이트 만들기 (HTML, CSS, JavaScript, TMDB API)  (0) 2024.07.25
나만의 추억 앨범 만들기 - 페이지 디자인편(Bootstrap, HTML, CSS)  (0) 2024.07.19
관계형 데이터베이스와 비관계형 데이터베이스  (0) 2024.07.18
BootStrap을 활용하여 페이지 구성하기  (1) 2024.07.17
'FrontEnd/HTML, CSS, JavaScript' Related Articles more