이번 포스팅에서는 명언 api를 사용해 명언을 나타내보겠습니다.
html, API
먼저 index.html에 class와 id가 quote인 요소를 main-wrapper div의 아래에 추가해주겠습니다.
그리고 js폴더안에 quote.js 파일을 만들고 html에서 스크립트해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>newtab</title>
<meta charset="UTF-8"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="main-container">
<div class="main-wrapper">
<div class="today-info">
<div class="date" id="date">
<!-- 날짜&요일 -->
</div>
<div class="time" id="time">
<!-- 현재 시간 -->
</div>
</div>
<div class="search">
<input id="search-input" placeholder="검색어를 입력하세요" autocomplete="off">
</div>
</div>
<div class="quote" id="quote">
<!-- 명언 -->
</div>
</div>
<script src="./js/clock.js"></script>
<script src="./js/search.js"></script>
<script src="./js/quote.js"></script>
</body>
</html>
quote.js에는 api를 통해 받아온 명언을 나타내주어야 합니다.
api주소를 상수에 할당해주고, 방금만든 div요소를 element에 할당해주겠습니다.
const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/";
const quoteElement = document.getElementById("quote");
getQuote
다음으로 getQuote라는 함수를 생성하고, 이 함수에서 api를 호출해 명언 데이터를 받아보겠습니다.
data라는 변수에 fetch라는 내장함수를 통해 api를 호출해보면, 먼저 fetch안에는 우리가 사용할 api주소인 API_URL을 넣어주고, then메서드로 결과값을 json메서드를 사용해 자바스크립트 객체의 형태로 반환해주겠습니다.
fetch는 비동기함수이기때문에 await키워드를 작성해주고 async키워드도 작성해줍니다.
const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/";
const quoteElement = document.getElementById("quote");
const getQuote = async () => {
const data = await fetch(API_URL).then((res) => res.json());
console.log(data)
};
getQuote();
결과를보면 배열의 0번째 index에는 result값이, 1번째 인덱스에는 respond값이 담깁니다.
1번째 인덱스에 있는 respond 값을 사용해야하므로, result변수에 data의 첫 번째 인덱스의 respond값을 담고,
result변수를 출력해보겠습니다.
const getQuote = async () => {
const data = await fetch(API_URL).then((res) => res.json());
console.log(data)
const result = data[1].respond;
console.log(result)
};
이제 api를 호출하는 코드를 try catch를 사용해 에러처리를 해주겠습니다.
try안에는 작성한코드, catch안에는 전달받은 error 객체를 출력합니다.
const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/";
const quoteElement = document.getElementById("quote");
const getQuote = async () => {
try {
const data = await fetch(API_URL).then((res) => res.json());
console.log(data)
const result = data[1].respond;
console.log(result)
} catch (err) {
console.log(`err : ${err}`);
setQuote("만약 하루를 성공하고 싶다면, 반드시 첫 한 시간을 성공해야 한다.");
}
};
getQuote();
setQuote
이렇게 getQuote함수에서 api를 통해 명언을 가져왔으니, 이제 setQuote함수의 내부에 우리가 가져온 명언을 quoteElement에 text로 설정해주겠습니다.
함수의 매개변수로 result를 받아 textContent로 result를 할당해주겠습니다.
추가로 만약 에러가 발생할 상황을 대비해서, catch블록안에는 명언을 하나 적어전달해주었습니다.
이렇게 작성해주면,
에러가 발생해 명언 데이터를 가져오지 못하더라도 화면에는 명언이 나타나 깔끔한 에러처리가능
const setQuote = (result) => {
quoteElement.textContent = `"${result}"`;
};
const getQuote = async () => {
try {
const data = await fetch(API_URL).then((res) => res.json());
const result = data[1].respond;
setQuote(result);
} catch (err) {
console.log(`err : ${err}`);
setQuote("만약 하루를 성공하고 싶다면, 반드시 첫 한 시간을 성공해야 한다.");
}
};
이렇게하면 새로고침할때마다 명언이 변경됩니다.
우리는 하루에 한 개의 명언만 볼 수 있고, 날짜가 변경될 때마다 다른 명언을 볼 수 있게하기 위해
명언을 로컬스토리지에 저장해 동일한 날짜라면, 명언 api를 호출하지 않고 로컬스토리지에 저장되어 있는 명언을
가져오는 코드를 작성해보겠습니다.
먼저 Date객체를 생성해 month와 Date를 구해주겠습니다.
로컬스토리지에 저장할 객체의 프로퍼티로는 생성날짜인 createDate와 명언인 quoteDate를 설정해주고,
이 객체를 setQuote함수의 내부에 quote라는 변수에 넣어주겠습니다.
const nowDate = new Date();
const month = nowDate.getMonth()+1;
const date = nowDate.getDate();
const setQuote(result)=>{
let quote = {createDate: `${month}-${date}`, quoteData : result};
quoteElement.textContent=`"${result}"`;
};그리고 로컬스토리지에 setItem을 사용해 quote라는 키값으로 객체인 quote변수를 JSON.stringify로 문자열로 변환한 다음 저장해주겠습니다.
localStorage.setItem("quote", JSON.stringify(quote));
마지막으로 페이지에 접속했을때 로컬스토리지에 quote라는 키값의 데이터가 있고, 데이터의 createDate값이 오늘의 날짜와 동일하다면, getQuote함수를 호출하지 않고, 그렇지 않을 경우에만 getQuote함수를 호출하는 코드를 작성해주겠습니다.
quoteItem이라는 변수를 생성해주고, 이 변수에 getItem 메서르를 사용해 key값이 quote인 데이터를 찾아 할당해준 다음,
조건문을 사용해 quoteItem이 있을 때와 없을 때를 구분해주고,
quoteItem이 있다면 JSON.parse로 JSON문자열인 quoteItem을 객체로 변환하고,
그 값을 구조분해 할당을 사용해 createDate와 quoteDate 값을 가져와서
만약 createDate가 오늘의 날짜와 동일하다면, creatDate = 오늘의 날짜
quoteElement에 textContent로 로컬스토리지에 저장되어있는 명언데이터인 quoteDate를 설정해주고
그게 아니라면 getQuote함수를 호출해 새로운 명언을 할당해줍니다.
const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/";
const quoteElement = document.getElementById("quote");
const quoteItem = localStorage.getItem("quote");
//현재시간
const nowDate = new Date();
const month = nowDate.getMonth() + 1;
const date = nowDate.getDate();
const setQuote = (result) => {
let quote = { createDate: `${month}-${date}`, quoteData: result };
localStorage.setItem("quote", JSON.stringify(quote));
quoteElement.textContent = `"${result}"`;
};
const getQuote = async () => {
try {
const data = await fetch(API_URL).then((res) => res.json());
const result = data[1].respond;
setQuote(result);
} catch (err) {
console.log(`err : ${err}`);
setQuote("만약 하루를 성공하고 싶다면, 반드시 첫 한 시간을 성공해야 한다.");
}
};
if (quoteItem) {
//localstorage에 quote가 있다면
let { createDate, quoteData } = JSON.parse(quoteItem);
if (createDate === `${month}-${date}`) {
quoteElement.textContent = `"${quoteData}"`;
} else {
getQuote();
}
} else {
//localstorage에 quote가 없다면
getQuote();
}콘솔로 확인해보면 quote라는 키값에 우리가 설정한 데이터가 알맞게 저장되어 있고
새로고침을 눌러봐도 명언이 변경되지 않습니다.
css
마지막으로 css를 적용해주겠습니다.
명언에 대한 css코드입니다.
/* 명언 */
.quote {
font-size: var(--small);
position: fixed;
bottom: 0;
max-width: 800px;
padding: 0 10px;
margin-bottom: 20px;
font-weight: 300;
text-align: center;
}
결과화면
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript - 북마크 아이템 추가하기 (0) | 2023.06.14 |
|---|---|
| 자바스크립트 - 5. 북마크 바 만들기 (0) | 2023.06.11 |
| javascript - 3.검색 바 만들기 (0) | 2023.06.10 |
| javascript - 2. 시계만들기 (0) | 2023.06.10 |
| javascript - 1.크롬시작화면만들기 (0) | 2023.06.10 |
