반응형
7. 프런트엔드 프레임워크와 통합하기
프로젝트 개요
이번 프로젝트에서는 JavaScript 프런트엔드 프레임워크인 React를 사용하여 간단한 애플리케이션을 만들어보겠습니다. React는 컴포넌트 기반의 UI 라이브러리로, 복잡한 사용자 인터페이스를 구축하는 데 유용합니다.
준비물
- Node.js와 npm
- React
- HTML, CSS, JavaScript
단계 1: 프로젝트 초기화
먼저, 새로운 React 프로젝트를 초기화합니다. 터미널에서 다음 명령을 실행합니다.
npx create-react-app my-react-app
cd my-react-app
단계 2: 기본 컴포넌트 만들기
React 앱의 기본 구조를 설정하고, 간단한 컴포넌트를 만들어봅니다.
App.js
import React, { useState } from 'react';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (task.trim()) {
setTasks([...tasks, { text: task, completed: false }]);
setTask('');
}
};
const toggleComplete = (index) => {
const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
};
const deleteTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
};
return (
<div className="App">
<header className="App-header">
<h1>Todo List</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Enter a new task"
/>
<button type="submit">Add Task</button>
</form>
<ul>
{tasks.map((task, index) => (
<li key={index} className={task.completed ? 'completed' : ''}>
<span onClick={() => toggleComplete(index)}>{task.text}</span>
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
))}
</ul>
</header>
</div>
);
}
export default App;
App.css
.App {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.App-header {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
margin-bottom: 20px;
}
input {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
li.completed span {
text-decoration: line-through;
color: #888;
}
li button {
background-color: #dc3545;
}
li button:hover {
background-color: #c82333;
}
단계 3: 앱 실행하기
프로젝트를 설정하고 코드를 작성한 후, 애플리케이션을 실행하여 확인합니다.
npm start
이 명령어를 실행하면 React 개발 서버가 시작되고, 기본 브라우저에서 애플리케이션이 열립니다.
단계 4: 기능 구현
위 코드에서 기본적인 To-Do 리스트 기능을 구현했습니다. 사용자는 할 일을 추가하고, 완료 표시를 하고, 목록에서 삭제할 수 있습니다.
기능 설명
- 추가: 사용자가 입력한 할 일을 추가합니다.
- 완료 표시: 할 일을 클릭하면 완료 상태로 표시됩니다.
- 삭제: 삭제 버튼을 클릭하여 할 일을 삭제합니다.
결론
이로써 React를 사용하여 간단한 To-Do 리스트 애플리케이션을 완성했습니다. 이 프로젝트를 통해 React의 기본 개념과 컴포넌트 기반 개발 방식을 이해할 수 있습니다.
JavaScript 프로젝트 시리즈를 통해 다양한 JavaScript 기능과 프레임워크를 활용하여 실제 애플리케이션을 만드는 방법을 배웠습니다. 추가적인 도움이 필요하면 언제든지 말씀해 주세요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
[JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
---|---|
[JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 (0) | 2024.08.05 |
[JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 (0) | 2024.08.04 |
[JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기 (0) | 2024.08.03 |
[JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 (0) | 2024.08.02 |