[JavaScript 문법] 50일차: 최종 프로젝트

최종 프로젝트 개요

이번 단계에서는 지금까지 배운 모든 내용을 활용하여 자신만의 웹 애플리케이션 프로젝트를 기획하고 구현해봅니다. 프로젝트를 통해 JavaScript, HTML, CSS, 그리고 선택한 프레임워크(React, Vue, Angular)를 사용하여 실제 웹 애플리케이션을 만드는 과정을 경험할 수 있습니다.

프로젝트 기획

먼저, 어떤 종류의 웹 애플리케이션을 만들지 결정합니다. 예를 들어, 다음과 같은 프로젝트를 선택할 수 있습니다:

• Todo 리스트 애플리케이션
• 날씨 정보 제공 애플리케이션
• 간단한 블로그 플랫폼
• 영화 검색 애플리케이션

예제: Todo 리스트 애플리케이션

기능 목록:

1. 할 일 추가
2. 할 일 삭제
3. 할 일 완료 표시
4. 필터링 (전체, 완료, 미완료)

프로젝트 구조 설계

프로젝트의 구조를 설계합니다. 컴포넌트와 페이지의 구성을 계획하고, 상태 관리와 라우팅을 어떻게 설정할지 결정합니다.

예제: Todo 리스트 애플리케이션 구조

• 컴포넌트:
  • TodoList: 할 일 목록을 보여주는 컴포넌트
  • TodoItem: 개별 할 일 항목 컴포넌트
  • AddTodo: 새로운 할 일을 추가하는 컴포넌트
  • Filter: 할 일 필터링 컴포넌트
• 페이지:
  • Home: 메인 페이지, TodoList 컴포넌트를 포함

프로젝트 구현

이제 실제로 프로젝트를 구현합니다. 선택한 프레임워크에 따라 컴포넌트와 페이지를 작성하고, 상태 관리와 라우팅을 설정합니다.

 

예제: React로 Todo 리스트 애플리케이션 구현

 

1. 프로젝트 설정

npx create-react-app todo-app
cd todo-app
npm start

2. 컴포넌트 작성

• TodoList.js

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos, toggleTodo, deleteTodo }) => (
  <ul>
    {todos.map(todo => (
      <TodoItem key={todo.id} {...todo} toggleTodo={() => toggleTodo(todo.id)} deleteTodo={() => deleteTodo(todo.id)} />
    ))}
  </ul>
);

export default TodoList;

• TodoItem.js

import React from 'react';

const TodoItem = ({ text, completed, toggleTodo, deleteTodo }) => (
  <li>
    <span
      style={{ textDecoration: completed ? 'line-through' : 'none' }}
      onClick={toggleTodo}
    >
      {text}
    </span>
    <button onClick={deleteTodo}>Delete</button>
  </li>
);

export default TodoItem;

• AddTodo.js

import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">Add Todo</button>
    </form>
  );
};

export default AddTodo;

• Filter.js

import React from 'react';

const Filter = ({ filter, setFilter }) => (
  <div>
    <button onClick={() => setFilter('ALL')}>All</button>
    <button onClick={() => setFilter('COMPLETED')}>Completed</button>
    <button onClick={() => setFilter('INCOMPLETE')}>Incomplete</button>
  </div>
);

export default Filter;

3. 상태 관리 설정

• App.js

import React, { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';
import Filter from './Filter';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('ALL');

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const filteredTodos = todos.filter(todo => {
    if (filter === 'ALL') return true;
    if (filter === 'COMPLETED') return todo.completed;
    if (filter === 'INCOMPLETE') return !todo.completed;
    return true;
  });

  return (
    <div>
      <h1>Todo List</h1>
      <AddTodo addTodo={addTodo} />
      <Filter filter={filter} setFilter={setFilter} />
      <TodoList todos={filteredTodos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
    </div>
  );
};

export default App;

프로젝트 리뷰 및 피드백

프로젝트 구현이 완료되면 코드를 리뷰하고, 성능, 유지보수성, 코드 스타일 등을 평가합니다. 피드백을 받아 프로젝트를 개선할 수 있습니다.

 

예제: 코드 리뷰 체크리스트

1. 코드 스타일: 일관된 코드 스타일을 유지하고 있는가?
2. 성능 최적화: 불필요한 렌더링이나 성능 저하가 있는가?
3. 유지보수성: 코드가 읽기 쉽고 유지보수하기 쉬운가?
4. 기능 구현: 요구된 모든 기능이 제대로 구현되었는가?
5. 에러 처리: 예외 상황에 대한 적절한 에러 처리가 있는가?

결론

최종 프로젝트는 지금까지 배운 내용을 종합하여 실제 웹 애플리케이션을 구현해보는 중요한 과정입니다. 이번 글에서는 Todo 리스트 애플리케이션을 예제로 프로젝트 기획, 구조 설계, 구현, 리뷰 및 피드백 과정을 다루었습니다.

여러분의 멋진 프로젝트를 기대하며, 지금까지 학습한 내용을 바탕으로 다양한 애플리케이션을 만들어보세요!

다음 프로젝트에서 만나요!