on
비 프런트엔드 개발자를 위한 빠르고 간단한 데이터 프레젠테이션
비 프런트엔드 개발자를 위한 빠르고 간단한 데이터 프레젠테이션
백엔드 개발자, 데이터 엔지니어, 과학자 또는 분석가로 일할 때는 일반적으로 멋진 프런트엔드 트리오 html, css 및 js를 사용할 필요가 없습니다. 그러나 데이터를 표시하기 위해 간단한 웹 페이지를 설정해야 하는 경우도 있습니다.
필요한 것은 데이터를 가져와 일부 디브에 표시하는 것입니다. 쉬울 것 같은데요. 하지만 여러분이 그것을 하고 있을 때, 여러분은 이것이 여러분의 일상 업무가 아니라면 그렇게 간단하지 않다는 것을 종종 깨닫습니다. 두려워하지 마라, 도움은 가까이 있다. 이 작은 지침은 모든 사람을 위한 것으로, 모든 사람이 아무런 고통 없이 .html 파일 내에 데이터를 표시할 수 있고 우리의 검색 프런트엔드 질문을 할 수 있습니다.
파일 만들기
더 나은 구조를 위해 마크업, 스타일 및 자바스크립트를 별도의 파일에 저장하는 것이 좋습니다. 만약 당신이 코드가 매우 적다면, 당신은 그것을 하나의 .html에 보관할 수 있다.
하나의 폴더에 main.html, main.js 및 main.css를 만듭니다.
스타일시트에 대한 링크는 [제목] 내에 배치됩니다. js는 본문 끝에 있는 <스크립트> 안에 위치한다. 이 작업은 DOM이 이미 로드되었을 때 html을 더 빠르게 로드하고 가능한 javascript 조작을 실행하기 위해 수행됩니다.
Your title, displayed in the tab CATS
웹 API를 사용하여 데이터 가져오기
우리는 웹을 위한 애플리케이션 프로그래밍 인터페이스로 Fetch API를 사용할 수 있다.
아직 작성하지 않은 경우, main.js 파일을 만들어 여기에 js를 배치합니다.
이 예에서는 멋진 https://thecatapi.com/의 모의 데이터를 사용할 것입니다. 위의 요청은 우리 모두에게 품종을 반환한다. 현재로서는 수신된 데이터만 로깅하고 있습니다. 데이터가 올바른지 확인하기 위해 첫 번째 항목을 볼 수 있습니다.
const url = "https://api.thecatapi.com/v1/breeds/"; fetch(url, { method: "GET", withCredentials: true, headers: { "X-API-KEY": "your-api-key", "Accept": "application/json", "Content-Type": "application/json" } }) .then(resp => resp.json()) .then(function(data) { console.log('received data:', data); }) .catch(function(error) { console.log(error); });
이렇게 하려면 크롬 브라우저의 개발자 도구에서 네트워크 탭을 엽니다(Mac에서는 ⌘I). 이제 요청을 두 번 클릭하여 브라우저 탭의 데이터를 볼 수 있습니다. 따라서 가독성을 높이기 위해 이와 같은 JSON 포맷터를 사용하는 것을 추천합니다. 데이터를 기록하면 콘솔 탭에서도 데이터를 볼 수 있습니다.
자바스크립트를 통해 마크업 및 데이터 생성
일단 그 데이터가 올바르게 로드되면, 우리는 고양이 품종에 대한 통찰력을 얻기 위해 몇 가지 기능을 추가할 수 있습니다.
먼저 우리는 고양이에 대한 몇 가지 사실을 알고 싶다. 총 몇 개의 품종이 있고 몇 개의 나라에서 왔나요? 일단 숫자를 계산한 후에는 템플릿 리터럴의 도움을 받아 렌더링하려고 합니다.
const facts = document.getElementById('.facts'); function createMainStats(breeds) { const numberOfBreeds = breeds.length; const numberOfUniqueCountries = [...new Set(breeds.map(breed => breed?.country_code))] this.facts.innerHTML = `There are ${numberOfBreeds} breeds from ${numberOfUniqueCountries.length} countries.`; }
우리는 모든 종류의 데이터를 div에 넣고 그것을 mainContainer에 렌더링하기를 원한다. 따라서 createBreedCard()를 만듭니다. 지도 기능의 도움으로, 우리는 품종 배열을 반복하고 모든 품종의 컨텐츠와 함께 디브를 반환할 수 있습니다. 데이터를 출력하기 위해 템플릿 리터럴을 사용합니다. 데이터를 ${value}에 넣으면 브라우저가 식을 실제 값으로 자동으로 대체한다.
누락된 특성으로 인한 통증을 예방할 수 있습니까? 체인 오퍼레이터(옵션)를 사용합니다. 속성이 없는 경우 오류 대신 정의되지 않은 상태로 반환됩니다.
const mainContainer = document.getElementById('.mainContainer'); function createBreedCards(data) { const breedCards = data.map(breed => { return ` ${breed?.name} more information `; }).join(''); this.mainContainer.innerHTML = breedCards; }
이제 모든 카드가 렌더링되었습니다. 여전히 어딘가 고장난 것처럼 보이지만, 데이터는 거기에 있습니다.
이제 우리는 카드에 스타일을 추가할 수 있다. 그리고 css 플렉스 센터링 덕분에 더 이상 문제가 되지 않습니다.
.breed-card { border: 1px solid white; background-color: white; border-radius: 4px; box-shadow: 0 0 1px 1px #f4f4f4; padding: 4px; width: 150px; height: 200px; display: flex; flex-direction: column; align-items: center; } .breed-card:hover { transform: scale(1.3); cursor: pointer; box-shadow: 0 0 2px 2px #f4f4f4; }
모든 카드는 다른 카드보다 아래에 렌더링됩니다. 이것은 많은 공간을 사용합니다. 그리드로 렌더링하기 위해 css 그리드를 사용합니다.
#mainContainer { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1rem; }
이렇게 하면 5개의 카드 요소가 한 줄로 배치되고 지정된 응답 공백이 발생합니다.
완료됨
이제 데이터가 카드 레이아웃으로 렌더링됩니다. 단순한 데이터 표시에 필요한 라이브러리나 빌드 도구가 없습니다. 데모 파일은 여기에서 찾을 수 있습니다.
from http://gong-tech.tistory.com/58 by ccl(A) rewrite - 2021-09-25 03:27:37