728x90
반응형
계획
- JSON 데이터를 가져온다.
- JSON 데이터를 JavaScript 객체로 변환한다.
- HTML 요소를 사용하여 데이터를 화면에 표시한다.
React 없이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display JSON Data</title>
</head>
<body>
<div id="data-container"></div>
<script>
// 1. JSON 데이터를 가져옵니다.
const jsonData = '{"name": "John Doe", "age": 30, "city": "New York"}';
// 2. JSON 데이터를 JavaScript 객체로 변환합니다.
const data = JSON.parse(jsonData);
// 3. HTML 요소를 사용하여 데이터를 화면에 표시합니다.
const container = document.getElementById('data-container');
container.innerHTML = `
<p>Name: ${data.name}</p>
<p>Age: ${data.age}</p>
<p>City: ${data.city}</p>
`;
</script>
</body>
</html>React 사용
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
// 1. JSON 데이터를 가져옵니다.
const jsonData = '{"name": "John Doe", "age": 30, "city": "New York"}';
// 2. JSON 데이터를 JavaScript 객체로 변환합니다.
const data = JSON.parse(jsonData);
// 3. JSX를 사용하여 데이터를 화면에 표시합니다.
return (
<div>
<p>Name: {data.name}</p>
<p>Age: {data.age}</p>
<p>City: {data.city}</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));차이점
- React 없이: 순수 JavaScript와 HTML을 사용하여 DOM을 직접 조작한다.
- React 사용: React의 컴포넌트와 JSX를 사용하여 선언적으로 UI를 구성한다. React는 상태 관리와 재사용 가능한 컴포넌트를 제공하여 더 복잡한 애플리케이션을 쉽게 관리할 수 있다.
퍼블리싱
퍼블리싱은 웹사이트나 애플리케이션의 디자인을 실제로 구현하여 사용자에게 제공하는 과정을 의미한다. 퍼블리싱을 통해 디자인 시안이 실제 웹 페이지로 변환된다.
퍼블리싱 한 것과 안 한 것의 차이
- 퍼블리싱 한 것: 디자인 시안이 실제 웹 페이지로 구현되어 사용자에게 제공된다.
- 퍼블리싱 안 한 것: 디자인 시안이 실제로 구현되지 않아 사용자에게 제공되지 않는다.
- 끝 -
728x90
반응형
'⭐ SpringBoot > 개발하면서 정리' 카테고리의 다른 글
| API (Application Programming Interface) with JSON (0) | 2024.08.27 |
|---|---|
| @SpringBootApplication 의 의미 (0) | 2023.09.13 |
| <dto> dto에서 null값 제거하기 (0) | 2023.08.29 |
