JavaScript로 구현하는 간단한 웹 애플리케이션: Todo List 만들기

deviantce master

•

JavaScript 개요

JavaScript는 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어로, 요즘에는 서버 측 스크립팅, 게임 개발 등 다양한 분야에서 활용되고 있습니다.

변수 선언 및 할당

JavaScript에서는 let 키워드로 변수를 선언하고, = 를 통해 변수에 값을 할당할 수 있습니다.


let greeting = 'Hello, world!';

조건문

JavaScript에서는 조건에 따라 다른 코드를 실행하도록 하는 조건문을 사용할 수 있습니다.


let temperature = 20;

if (temperature > 30) {
  console.log('It\'s hot out there!');
} else {
  console.log('It\'s pretty nice out.');
}

반복문

JavaScript에서는 코드를 여러 번 반복하여 실행하는 반복문을 사용할 수 있습니다.


for (let i = 0; i < 5; i++) {
  console.log(i + 1);
}

웹 애플리케이션의 구조

2.1 클라이언트-서버 아키텍처

클라이언트-서버 아키텍처는 네트워크에서 정보를 교환하는 모델로, 클라이언트는 서비스에 대한 요청을 보내고, 서버는 그 요청에 응답을 합니다. 웹 애플리케이션에서는 브라우저가 클라이언트, 웹 서버가 서버 역할을 합니다.

2.2 MVC 패턴

MVC(Model-View-Controller) 패턴은 애플리케이션을 세 가지 역할로 구분하는 방법으로, 도메인 로직을 모델, 사용자 인터페이스를 뷰, 입력 처리를 컨트롤러가 담당합니다.


// Model
class Todo {
  constructor(name) {
    this.name = name;
    this.isDone = false;
  }

  toggleDone() {
    this.isDone = !this.isDone;
  }
}

// View
class View {
  constructor() {
    this.todoList = document.getElementById('todoList');
  }

  update(todo) {
    // Update the DOM.
  }
}

// Controller
class Controller {
  constructor() {
    this.view = new View();
    this.todos = [];
  }

  addTodo(name) {
    const todo = new Todo(name);
    this.todos.push(todo);
    this.view.update(todo);
  }
}

TODO List 웹 애플리케이션 제작 목표

TODO List는 사용자가 할 일을 기록하고 관리할 수 있는 웹 애플리케이션을 제작하는 것을 목표로 합니다. 사용자는 새로운 할 일을 추가하고, 완료된 할 일을 체크하거나 삭제할 수 있어야 합니다.

기본 기능

TODO List 애플리케이션은 다음과 같은 기능을 가지고 있어야 합니다:

  • 할 일을 추가하는 기능
  • 할 일을 완료로 체크하는 기능
  • 할 일을 삭제하는 기능

이러한 기능들을 JavaScript를 이용하여 구현하면 다음과 같은 코드가 될 수 있습니다.


// 할 일 목록을 관리하는 클래스
class TodoList {
    constructor() {
        this.todos = [];
    }

    // 할 일 추가
    addTodo(text) {
        this.todos.push({
            text: text,
            completed: false
        });
    }

    // 할 일 완료
    completeTodo(index) {
        this.todos[index].completed = true;
    }

    // 할 일 삭제
    deleteTodo(index) {
        this.todos.splice(index, 1);
    }
}

개발환경 설정

4.1 IDE 선택

프로젝트를 개발을 위한 통합 개발 환경(IDE)을 선택하는 것이 중요합니다. WebStorm, Visual Studio Code(VSCode), Atom 등 다양한 IDE가 있습니다. 여기서는 가볍고 확장성이 좋은 VSCode를 사용하겠습니다.

4.2 필요한 패키지 설치

프로젝트를 진행하는데 필요한 패키지를 설치해야 합니다. 여기서는 npm(Node Package Manager)을 사용하여 패키지를 관리하겠습니다. npm은 node.js 설치시 함께 설치됩니다.

먼저, 프로젝트 폴더를 생성하고, 해당 폴더로 이동한 다음 npm 초기화를 진행합니다.


mkdir myTodoList
cd myTodoList
npm init -y

프로젝트에 필요한 패키지를 설치합니다. 예를 들어, 여기서는 express와 nodemon을 설치하겠습니다.


npm install express
npm install nodemon --save-dev

위와 같이 설치하면, 'package.json' 파일에 설치한 패키지가 기록됩니다. nodemon은 개발환경에서만 사용되므로 '--save-dev' 옵션을 주어 개발 의존성 항목으로 추가합니다.

5. 프로젝트 구조 및 디렉토리 설정

프로젝트의 구조를 설계하는 것은 개발 효율성과 유지 보수성에 크게 기여합니다. 복잡한 프로젝트일수록 체계적인 디렉토리 구조가 필요합니다.

구조화된 프로젝트를 위해 다음과 같이 디렉토리를 생성하여 필요한 파일들을 모아두겠습니다.

프로젝트 구조


myTodoList/
│
├── node_modules/         
├── public/                   
│   ├── images/
│   ├── javascripts/
│   │   └── todo.js
│   └── stylesheets/            
│       └── style.css          
├── views/                    
│   ├── error.ejs        
│   ├── index.ejs      
│   └── todo.ejs
├── app.js                  (메인 어플리케이션 파일)
├── package.json          
└── package-lock.json

디렉토리 설명

  • node_modules/: npm을 통해 설치한 패키지가 위치하는 디렉토리
  • public/: 클라이언트에 공개할 파일들(이미지, JS, CSS 등)을 모아둔 디렉토리
  • views/: 템플릿 파일들을 모아둔 디렉토리
  • app.js: 메인 어플리케이션 파일
  • package.json: 프로젝트에 대한 정보와 사용하는 패키지에 대한 정보를 담고 있는 파일

6. HTML과 CSS를 이용한 사용자 인터페이스 구성

웹 애플리케이션에서 사용자 인터페이스는 주로 HTML과 CSS로 구성됩니다. HTML은 웹페이지의 구조를 정의하고, CSS는 웹페이지의 디자인을 적용합니다.

HTML 예시

To-do 리스트를 출력하는 HTML은 다음과 같습니다.


<!DOCTYPE html>
<html>
    <head>
        <title>Todo List</title>
        <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    </head>
    <body>
        <header>
            <h1>Todo List</h1>
        </header>
        <ul id="todolist">
            <!-- foreach loop in js will create li items here -->
        </ul>
        <footer>Todo List 2022 </footer>
    </body>
</html>

CSS 예시

위 HTML에 디자인을 추가하는 CSS 예시입니다.


body {
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    background: #f1f1f1;
}

header {
    background: #555;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 15px;
    text-align: center;
}

#todolist {
    list-style: none;
    padding: 0;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #555;
    color: white;
    text-align: center;
    padding: 10px 0;
}

HTML과 CSS 을 이용해 사용자 인터페이스를 만들었습니다. 사용자는 웹페이지를 통해 Todo List를 확인하고, 새로운 항목을 추가할 수 있습니다.

7. JavaScript로 기본적인 TODO List 기능 구현

JavaScript를 활용하여 기본적인 TODO List의 기능을 구현해봅시다. 기본적인 기능으로는 항목의 추가, 삭제, 완료 표시기능을 포함하고 있습니다.

7.1 항목 추가 기능

항목을 추가하는 기능은 사용자로부터 입력받은 텍스트를 새로운 'li' 태그로 만들어 'ul' 태그 안에 추가하는 방식으로 구현가능합니다.


function addItem() {
    var input = document.getElementById('input').value;
    var newItem = document.createElement('li');
    newItem.innerText = input;
    document.getElementById('todolist').appendChild(newItem);
}

7.2 항목 삭제 기능

항목 삭제는 선택된 'li' 태그를 'ul' 태그에서 제거하는 방식으로 구현할 수 있습니다.


function removeItem(item) {
    var itemToRemove = document.getElementById(item);
    document.getElementById('todolist').removeChild(itemToRemove);
}

7.3 항목 완료 기능

항목 완료 기능은 'li' 태그의 텍스트에 줄을 그어 완료 표시를 하는 방식으로 구현할 수 있습니다.


function completeItem(item) {
    var itemToComplete = document.getElementById(item);
    itemToComplete.style.textDecoration = "line-through";
}

이러한 방법으로 JavaScript를 사용하여 TODO List의 기본적인 기능을 구현할 수 있습니다. 브라우저에서 실제로 동작시키기 위해서는 이벤트 리스너와 같은 추가적인 기능이 필요할 수 있습니다.

8. 웹 스토리지를 활용한 데이터 유지

웹 애플리케이션의 경우, 영구적인 데이터 저장을 위해 쿠키라는 방법을 사용할 수 있습니다. 그러나 쿠키는 용량이 제한적이고, 모든 HTTP 요청에 포함되어 통신 부하를 일으키는 문제가 있습니다. 이런 문제를 해결하기 위해 HTML5부터는 웹 스토리지를 제공합니다.

웹 스토리지란?

웹 스토리지는 브라우저 내에 키와 값 형태로 데이터를 저장할 수 있는 공간을 말합니다. 웹 스토리지에는 'localStorage'와 'sessionStorage' 두 가지 형식이 있습니다. 'localStorage'는 웹 페이지를 닫거나 브라우저를 종료해도 데이터가 유지되는 반면, 'sessionStorage'는 페이지 세션이 끝나면 데이터가 삭제됩니다.

웹 스토리지 활용 예시

아래는 웹 스토리지(localStorage)를 사용하여 사용자의 TODO List를 저장하는 예시입니다.


// 항목 추가
function addItem() {
    var input = document.getElementById('input').value;
    var newItem = document.createElement('li');
    newItem.innerText = input;
    document.getElementById('todolist').appendChild(newItem);
    localStorage.setItem('todos', JSON.stringify(document.getElementById('todolist').innerHTML));
}

// 페이지 로드시 localStorage에서 TODO List 항목 불러오기
function loadItems() {
    var storedTodos = JSON.parse(localStorage.getItem('todos'));
    if (storedTodos) {
        document.getElementById('todolist').innerHTML = storedTodos;
    }
}
window.onload = loadItems;

위 코드는 사용자가 추가한 TODO List 항목을 웹 스토리지에 저장하고, 페이지가 로드될 때 저장된 항목을 불러옵니다. 이렇게 웹 스토리지를 활용하면 사용자의 데이터를 안전하고 효율적으로 관리할 수 있습니다.

9. 코드 최적화 및 리팩토링

리팩토링은 코드의 가독성을 높이고 유지보수를 용이하게 하기 위해, 기능의 변경 없이 코드의 구조를 개선하거나 정리하는 프로세스를 말합니다. 코드 최적화는 코드의 실행 성능을 향상시키기 위해 수행되며, 시간 복잡도나 공간 복잡도에 주로 초점을 맞춥니다. 둘 다 소프트웨어 개발 과정에서 주기적으로 수행되어야 하는 중요한 작업입니다.

리팩토링 예시

아래는 리팩토링을 적용해 볼 수 있는 예시입니다. 코드의 기능은 동일하지만, 리팩토링 후에는 가독성이 향상되고 코드의 길이도 짧아집니다.


// 리팩토링 전
var result = [];
for (var i = 0; i < array.length; i++) {
    if (array[i] > 0) {
        result.push(array[i]);
    }
}

// 리팩토링 후
var result = array.filter(item => item > 0);

최적화 예시

아래는 코드 최적화의 한 예시로, 배열에서 중복 항목을 제거하는 코드입니다. 처음에 주어진 코드는 이중 for문을 사용해 O(n^2)의 시간 복잡도를 가지지만, 최적화 후의 코드는 Set 객체를 사용해 O(n)의 시간 복잡도로 동일한 기능을 수행하게 됩니다.


// 최적화 전
var uniqueArray = [];
for(var i = 0; i < array.length; i++) {
    if(uniqueArray.indexOf(array[i]) === -1) {
        uniqueArray.push(array[i]);
    }
}

// 최적화 후
var uniqueArray = [...new Set(array)];

이러한 방법으로 코드의 가독성을 높이고 성능을 향상시키는 과정을 통해 원활한 유지보수와 효율적인 프로그램 실행이 가능해집니다.

10. 마무리 및 소고

웹 개발에 관한 우리의 소개는 여기서 마칩니다. 앞서 소개드린 웹 애플리케이션의 동작 원리부터 서버와 클라이언트의 관계, fetch API를 이용한 데이터 요청과 반환, 웹 스토리지를 활용한 데이터 유지, 코드 최적화 및 리팩토링 등 많은 주제를 다루었습니다.

각 주제는 본질적으로 웹 개발의 핵심 요소이며, 복잡하고 규모가 큰 웹 애플리케이션을 개발하기 위한 필수적인 기반 지식입니다. 이 지식들을 활용하여 보다 효과적이고 효율적인 웹 서비스를 제작할 수 있으리라 기대합니다.

아래는 JavaScript를 이용하여 간단한 웹 애플리케이션을 만드는 예시입니다. 이 예제에서는 앞서 배운 fetch API와 웹 스토리지를 활용하였습니다.


fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
    console.log(json);
    localStorage.setItem('todo', JSON.stringify(json));
  })

위 코드는 'jsonplaceholder' 웹사이트에서 제공하는 RESTful API를 통해 데이터를 받아와서, 웹 스토리지에 저장하는 간단한 구문입니다. 이를 변형하고 확장하여 본인만의 웹 애플리케이션을 만드는 데 활용해 보시기 바랍니다.

웹 개발은 매우 광범위한 주제로, 여기서 다룬 내용들은 그저 일부에 불과합니다. HTML, CSS, JavaScript, 그리고 다양한 프레임워크와 라이브러리 등을 배우는 과정에서 계속해서 새로운 것들을 배우고 경험해나갈 것입니다. 계속해서 도전하고, 막히는 부분에 대해 꼭 해결해 나가는 과정 속에서 기술력은 점차 향상될 것입니다.

항상 새로운 도전을 두려워하지 말고, 기술적인 문제를 해결하는 재미와 성취감을 느껴보시기 바랍니다. 험난한 여정일지라도, 그 과정에서 얻는 지식과 경험이 여러분을 더 뛰어난 개발자로 만들어 줄 것입니다. 우리 모두 좋은 개발자를 향해 계속해서 성장해 나가는 기회를 잡아보도록 합시다.

Leave a Comment