아빠 농담 API 프로젝트 | 18일

아빠 농담 반응 앱

사람들이 싸구려 농담을 보고 투표할 수 있는 앱입니다. 농담을 생성하기 위해 ICanHazDadJoke API를 사용했습니다.



페이지가 로드되면 10개의 농담을 가져옵니다.

응용 프로그램은 "투표"버튼, "투표 반대"버튼 및 각 농담의 순 점수와 함께 농담을 나열합니다. 사용자가 투표할 수 있으며 순 점수가 업데이트됩니다.

농담이 로드되면 농담이 로드되고 있음을 사용자에게 알리는 로딩 스피너가 표시됩니다. 또한 농담이 로드되면 숨겨집니다.
정렬 된 농담이 오지 않았다는 것을 알게 될 것입니다.

순 점수별로 정렬된 농담을 표시하고 점수가 변경되면 이를 업데이트합니다.
또한 로컬 저장소에 투표와 함께 농담 목록을 저장합니다. 사용자가 앱을 방문하면 새 농담을 가져오는 대신 저장된 농담을 표시합니다. 그러나 사용자는 여전히 버튼을 통해 새 농담을 생성할 수 있어야 하며 이러한 새 농담은 로컬 저장소의 농담을 대체해야 합니다.

내 배움

1) 로컬 저장소 사용
로컬 스토리지는 브라우저에 데이터를 저장하는 데 사용되며 브라우저를 닫아도 데이터가 저장된 상태로 유지됩니다.
로컬 저장소는 브라우저 창을 닫은 후에도 사용자가 사용할 수 있는 만료 날짜가 없는 데이터를 보유합니다. 장바구니 데이터를 기억하거나 어떤 웹사이트에서 사용자 로그인을 하는 등 다양한 방법으로 유용합니다.
**How to store the Data in the LocalStorage**

window.localStorage.setItem(<key>,<pair>)
// It can only able to store the data of string type only, to store any other type of data u have to parse it.

We can fetch the data by using this

window.localStorage.getItem(<key>)
//We can fetch the data using the key.

이것을 사용하여 로컬 저장소를 지울 수 있습니다 👇


또한 키를 사용하여 특정 항목을 제거할 수 있습니다.



2.) Array.sort() 사용 방법
sort()는 배열의 요소를 정렬합니다.
sort()는 원래 배열을 덮어씁니다.
*기본적으로 오름차순으로 정렬되며 내림차순으로 정렬하려면 reverse()를 사용해야 합니다. *

Sort()는 숫자를 정렬하려는 경우 다른 결과를 제공하는 문자열에서 가장 잘 작동합니다.
예를 들어, 👇

당신이 분명히 알 수 있듯이 대답은 [40,100]이어야하지만 첫 번째 문자, 즉 4> 1 만 계산하기 때문에 잘못 나왔습니다.

따라서 이러한 유형의 문제를 피하기 위해 비교할 수 있습니다.

Array.sort((a,b)=>{
  return (a-b); 
  // Or 
  // return(b-a) -> To sort in descending order
})

sort()는 두 값을 비교할 때 값을 compare 함수로 보내고 반환된 값(음수, 0, 양수)에 따라 값을 정렬합니다.



a는 다음 값이고 b는 현재 값입니다.


*그러나 이것이 어떻게 작동하는지 *

오름차순으로 정렬하는 첫 번째 경우를 예로 들어 보겠습니다.

첫 번째 경우 a=100 b= 40

a-b = 60(양수, a>b를 의미하므로 스와핑 없음)

두 번째 경우 a=89 b=100

a-b = -11(-ve , 의미 a
도착[] = [40,89,100]
If they are not yet sorted the we again repeat the loop값이 0이면 교환하지 않은 것입니다.

행복한 코딩 😃