안녕하세요!
Python을 주로 사용하는 사용자로서 back-end는
Python 의 Django, Flask, Fastapi로 잘 이해가 되고
그 외에 spring, ruby등도 결국 어떻게 운영되겠다~~ 는 알겠는데!
Front-end는 html 과 css, javascript로 하면 되는데,
React, VUE, angular 등이 왜 필요하지?? 라고 궁금해 하시는 분이 많을것 같습니다!!
그래서!! 파이썬 관점에서 이해해보고자합니다!!
학생들 시험의 평균점수 계산하기!!
# 학생들의 시험 점수 데이터 (이름, [시험1, 시험2, 시험3])
students_scores = [
("Alice", [85, 90, 78]),
("Bob", [92, 88, 76]),
("Charlie", [95, 89, 83]),
("David", [91, 82, 88])
]
# 각 학생의 총점과 평균 계산
results = []
for student in students_scores:
name, scores = student
total = sum(scores)
average = total / len(scores)
results.append((name, total, average))
# 출력
for result in results:
print(f"Student: {result[0]}, Total: {result[1]}, Average: {result[2]}")
위 코드를 보면 어떤가요??
list 방식으로 점수를 계산하는것!!! 뭔가 아쉽지 않나요?
import pandas as pd
# 학생들의 시험 점수 데이터
data = {
"Name": ["Alice", "Bob", "Charlie", "David"],
"Score1": [85, 92, 95, 91],
"Score2": [90, 88, 89, 82],
"Score3": [78, 76, 83, 88]
}
# Pandas 데이터프레임으로 변환
df = pd.DataFrame(data)
# 각 학생의 총점과 평균 계산
df["Total"] = df[["Score1", "Score2", "Score3"]].sum(axis=1)
df["Average"] = df[["Score1", "Score2", "Score3"]].mean(axis=1)
df
위와 같이 여러분이 익숙한 pandas를 사용한다면, 간단하계 평균 계산이 가능해집니다!!!!
이제 다시! front-end로 돌아와서!!
여기서도 마찬가지 인데요!!
react의 공식 사이트에서는 react가 라이브러리라고 소개합니다!
즉 react는 javascript의 라이브러리인것입니다.
위와 같이 버튼을 누르면 숫자가 증가하는 사이트를 만든다고생각해봅시다!!
이때 javascript만 사용한다면, 코드가 아래와 같이 되겠는데요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Simple Counter</h1>
<p id="counter">Count: 0</p>
<button id="incrementButton">Increment</button>
<script>
// 카운트를 저장하는 변수를 초기화
let count = 0;
// HTML 요소를 변수에 저장
const counterElement = document.getElementById('counter'); // 카운트를 표시할 요소
const incrementButton = document.getElementById('incrementButton'); // 버튼 요소
// 버튼에 클릭 이벤트 리스너를 추가
incrementButton.addEventListener('click', () => {
count += 1; // 카운트 증가
counterElement.textContent = `Count: ${count}`; // 증가된 카운트를 화면에 표시
});
</script>
</body>
</html>
이부분에 react를 활용하게 된다면
import React, { useState } from 'react'; // React 라이브러리와 useState 훅을 불러옵니다.
import './App.css'; // 컴포넌트 스타일 시트 파일을 불러옵니다.
function App() { // App 컴포넌트를 정의합니다.
const [count, setCount] = useState(0); // useState 훅을 사용하여 count 상태 변수를 생성합니다. 초기값은 0입니다.
const increment = () => { // count 값을 1 증가시키는 함수를 정의합니다.
setCount(count + 1); // setCount 함수를 사용하여 count 상태를 업데이트합니다.
};
return ( // JSX 문법을 사용하여 컴포넌트의 UI를 반환합니다.
<div className="App">
<header className="App-header">
<h1>Simple Counter</h1>
<p>Count: {count}</p> {/* 현재 count 값을 표시합니다. */}
<button onClick={increment}>Increment</button> {/* 버튼 클릭 시 increment 함수를 실행합니다. */}
</header>
</div>
);
}
export default App; // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.아래와 같이, 조금 더 모듈화하여 진행이 가능합니다.
(이번에는 간단한 예시여서 두 코드 길이가 유사하지만 훨씬 많은 기능이 있을떄는 react가 편리하겠지요?)
두줄요약
- front-end는 javascript로 사용자의 페이지 경험을 향상시켜준다!!
- 이때, REACT는 javascript를 쉽개해주는 패키지다!!!
'데이터&AI > 데이터분석' 카테고리의 다른 글
| 데이터 분석가를 위한 쉬운 docker : 편리한 notebook 환경 만들기!! (1) | 2024.06.06 |
|---|---|
| 빠르고 쉽게 설치하는 AIRFLOW (우분투, 코드 4줄) (0) | 2024.05.22 |
| 빅데이터 분석기사 실기 요점정리 (python) (0) | 2023.06.24 |
댓글