5분

간단 투두(할일) 앱 단계별 만들기(쉬운 영어 설명)

Q: 이 할 일 앱을 만들려면 무엇이 필요한가요?

컴퓨터, 최신 브라우저, 코드 편집기만 있으면 됩니다. , , 가 들어 있는 폴더를 만든 다음 브라우저에서 HTML 파일을 여세요.

Q: 할 일에 일반 텍스트 대신 객체를 사용해야 하는 이유는 무엇인가요?

, , 값을 가진 할 일 객체를 사용하세요. 두 할 일의 텍스트가 같아도 ID가 있으면 코드에서 정확한 할 일을 수정하거나 삭제할 수 있습니다.

Q: 할 일을 완료로 표시하려면 어떻게 하나요?

각 할 일에 체크박스나 완료 버튼을 추가하세요. 누군가 클릭하면 해당 할 일의 값을 바꾸고, 취소선이나 흐린 스타일을 적용하는 CSS 클래스를 추가합니다.

Q: 새로고침 후에도 앱이 할 일을 기억하게 하려면 어떻게 하나요?

할 일 배열을 localStorage 이름 아래에 로 저장하고, 페이지가 시작될 때 로 읽으세요. 할 일을 추가, 완료, 수정, 삭제한 뒤에는 다시 저장하세요.

기능 계획, 화면 설계, 동작 추가, 데이터 저장, 테스트, 배포까지 단계별로 설명하는 간단한 투두(할일) 앱 만들기 가이드입니다.

우리가 만드는 것(그리고 배울 내용)

이 가이드에서 말하는 “앱”은 작은 웹 앱을 의미합니다: 브라우저에서 열 수 있는 단일 페이지로, 클릭과 입력에 반응합니다. 설치나 계정, 복잡한 설정은 필요 없습니다 — 로컬에서 바로 실행할 수 있는 간단한 프로젝트입니다.

목표(완성된 앱이 할 일)

완료하면 다음 기능을 가진 투두 앱을 갖게 됩니다:

입력창에서 작업 추가
완료 표시(완료된 항목을 확인할 수 있음)
더 이상 필요 없는 항목 삭제
새로고침해도 남아 있는 저장 (localStorage 사용)

완벽하거나 기업용 수준일 필요는 없습니다. 이 프로젝트는 초보자가 많은 도구 없이 기본을 배우도록 설계되었습니다.

배울 내용(쉬운 말로)

단계별로 앱을 만들며 프론트엔드 웹 앱의 핵심 요소를 배웁니다:

HTML로 페이지 구조 만들기(입력, 버튼, 리스트)
CSS로 보기 좋고 사용하기 편하게 스타일링
JavaScript로 클릭 처리, 리스트 항목 생성, 페이지 업데이트
localStorage로 작업 저장/로드하여 유지
기본적인 테스트와 디버깅(작은 실수를 찾고 고치기)

시작 전에 필요한 것

간단합니다. 필요한 것:

컴퓨터(Windows, Mac, Linux)
최신 브라우저(Chrome, Firefox, Safari, Edge)
코드 편집기(VS Code 추천, 다른 편집기 사용 가능)

폴더를 만들고 몇 개의 파일을 편집할 수 있다면 준비 완료입니다.

1단계: 앱 목표와 기능 정하기

코드를 쓰기 전에 "성공"이 무엇인지 정하세요. 이 튜토리얼은 하나의 명확한 목적을 가진 작은 앱을 만듭니다: 당신이 해낼 작업을 기록하도록 돕는 것.

앱의 한 가지 목적을 정하세요

빌드하는 동안 앞에 두고 볼 수 있는 한 문장 목표를 적으세요:

“이 앱은 작업을 목록에 추가해서 잊지 않게 도와준다.”

그게 전부입니다. 달력, 알림, 태그, 계정 같은 기능은 나중으로 미루세요.

필수 vs. 있어도 좋은 것

두 개의 짧은 목록을 만드세요:

필수(이번 프로젝트):

작업 추가(텍스트 입력 → 버튼 클릭)
리스트에서 작업 보기
작업을 완료로 표시
작업 삭제
새로고침 후에도 남아있기(localStorage 사용)

있으면 좋은 기능(오늘은 불필요): 마감일, 우선순위, 카테고리, 검색, 드래그 앤 드롭, 클라우드 동기화.

필수 기능을 작게 유지하면 실제로 끝낼 가능성이 커집니다.

화면을 평범한 말로 설명하세요

앱은 한 페이지로 구성할 수 있습니다:

하나의 텍스트 입력("작업 추가…")과 "추가" 버튼
아래에 작업 리스트
각 작업에는 "완료" 토글과 "삭제" 버튼

"완료"가 무엇을 의미하는지 정의하세요

막히지 않도록 구체적으로 정하세요:

“완료” = 작업이 취소선(또는 흐리게) 표시되고, 삭제할 때까지 리스트에 남아있음.

이제 프로젝트 파일을 설정할 준비가 되었습니다.

2단계: 프로젝트 파일 설정

코드를 쓰기 전에 앱의 "집"이 될 깔끔한 폴더를 만듭니다. 처음부터 파일을 정리하면 다음 단계가 편해집니다.

1) 프로젝트 폴더 만들기

컴퓨터에 todo-app 같은 새 폴더를 만드세요. 이 폴더가 프로젝트 전체를 담습니다.

폴더 안에 세 파일을 만드세요:

index.html(페이지 구조)
styles.css(보기와 레이아웃)
app.js(동작과 상호작용)

파일 확장자가 보이지 않는 경우(.html 등) 실제 파일로 생성되었는지 확인하세요. 초보자가 흔히 겪는 실수는 index.html.txt처럼 저장하는 것입니다.

2) 편집기와 브라우저에서 폴더 열기

todo-app 폴더를 코드 편집기(VS Code, Sublime 등)로 열고 index.html을 브라우저에서 엽니다.

지금은 페이지가 비어 있을 수 있는데 괜찮습니다. 다음 단계에서 내용을 추가합니다.

3) 변경 사항 확인 방법

파일을 편집해도(특별한 도구가 없다면) 브라우저는 자동으로 업데이트되지 않습니다.

기본 작업 흐름은:

편집기에서 파일 저장
브라우저 탭으로 이동
페이지 새로고침

문제가 생기면 먼저 새로고침을 시도하세요.

선택 사항: 간단한 로컬 서버 사용(권장 사항)

더블클릭으로 index.html을 열어도 되지만, 로컬 서버를 쓰면 나중에 파일 로드나 저장 관련 이상한 문제를 예방할 수 있습니다.

초보자에게 친근한 옵션:

VS Code에서 Live Server 확장 설치 후 "Go Live" 클릭
Python이 있다면 폴더에서 다음을 실행:

python -m http.server

그 후 터미널에 표시되는 주소(보통 http://localhost:8000)를 브라우저에서 엽니다.

3단계: 페이지 구조 만들기(HTML)

이제 앱의 깔끔한 골격을 만들겠습니다. 이 HTML은 아직 상호작용을 제공하지 않지만(그건 다음 단계), JavaScript가 읽고 쓸 명확한 위치를 제공합니다.

필요한 최소 레이아웃

다음 요소를 포함합니다:

한눈에 보이는 제목
작업 텍스트 입력창
작업을 제출하는 추가 버튼
새 작업이 나타날 리스트 영역

간단하고 알아보기 쉬운 이름을 쓰세요. 잘 정한 ID/클래스는 JavaScript에서 요소를 쉽게 찾게 해줍니다.

아래 내용을 `index.html`에 붙여넣으세요

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>To‑Do App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app" id="app">
      <h1 class="app__title" id="appTitle">My To‑Do List</h1>

      <form class="task-form" id="taskForm">
        <label class="task-form__label" for="taskInput">New task</label>
        <div class="task-form__row">
          <input
            id="taskInput"
            class="task-form__input"
            type="text"
            placeholder="e.g., Buy milk"
            autocomplete="off"
          />
          <button id="addButton" class="task-form__button" type="submit">
            Add
          </button>
        </div>
      </form>

      <ul class="task-list" id="taskList" aria-label="Task list"></ul>
    </main>

    <script src="app.js"></script>
  </body>
</html>

이것으로 구조는 끝났습니다. id="taskInput"와 id="taskList"를 주목하세요 — JavaScript에서 가장 많이 사용할 요소들입니다.

4단계: 보기 좋게 다듬기(CSS)

지금 페이지는 문서처럼 보일 겁니다. 약간의 CSS로 간격을 정리하고 읽기 쉽게 만들면 사용하기 편합니다.

단순한 가운데 박스부터 시작

가운데 정렬된 박스는 화면을 집중시키고 넓은 화면에서 내용이 늘어지는 것을 막습니다.

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

작업을 한눈에 보기 쉽게 만들기

각 작업은 편안한 간격의 "행"처럼 보이게 만드세요.

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

"완료" 상태를 명확히 표시하기

작업이 완료되면 시각적으로 달라져야 한눈에 알아볼 수 있습니다.

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

버튼 스타일을 통일하세요

버튼을 같은 크기와 스타일로 유지하면 앱의 일관성이 좋아집니다.

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

여기까지면 깔끔한 UI를 만들기 충분합니다. 다음은 JavaScript로 동작을 연결하는 단계입니다.

5단계: 작업 추가하기(JavaScript 기초)

더 실감나게

자랑할 준비가 되면 앱에 커스텀 도메인을 연결하세요.

도메인 설정

이제 입력창, 버튼, 리스트가 있으니 실제로 동작하게 만들어야 합니다. 목표는 간단합니다: 사용자가 작업을 입력하고 추가 버튼을 누르거나 Enter를 치면 새로운 항목이 리스트에 나타나도록 합니다.

버튼과 Enter 키 연결하기

JavaScript 파일에서 필요한 요소를 잡고, 버튼 클릭과 입력창에서의 Enter 키를 듣는 리스너를 추가합니다.

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

이 코드가 하는 일(쉬운 설명)

입력창에서 텍스트를 읽고 trim()으로 앞뒤 공백을 제거합니다.
텍스트가 비어 있으면 추가하지 않습니다(빈 항목 방지).
새 li를 만들어 텍스트를 넣고 리스트에 추가합니다.
입력을 비우고 포커스를 다시 입력창으로 돌려 다음 작업을 빠르게 입력할 수 있게 합니다.

아무런 동작이 없다면 HTML의 ID와 JavaScript의 선택자가 정확히 일치하는지 먼저 확인하세요(초보자에게 가장 흔한 문제입니다).

6단계: 완료 표시와 삭제 기능 추가

이제 작업을 추가할 수 있으니, 작업을 완료로 표시하고 삭제할 수 있게 만듭니다.

작업을 단순 데이터로 저장하기

문자열 대신 객체로 작업을 저장하세요. 이렇게 하면 각 작업에 고유한 정체성을 부여하고 "완료" 상태를 추적할 수 있습니다:

text: 작업 내용
done: true 또는 false
id: 특정 작업을 찾거나 삭제할 때 쓸 고유 번호

예시:

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

완료 토글과 삭제 버튼 추가하기

각 작업을 렌더링할 때 체크박스 또는 "완료" 버튼과 "삭제" 버튼을 함께 넣으세요.

이벤트 리스너는 클릭에 반응하는 방법입니다. 버튼(또는 전체 리스트)에 리스너를 달고 사용자가 클릭하면 코드가 실행됩니다.

초보자에게 친절한 패턴은 이벤트 위임(event delegation) 입니다: 리스트 컨테이너 하나에 클릭 리스너를 달고, 클릭된 요소를 확인합니다.

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

renderTasks() 함수에서는:

각 버튼에 data-id="${task.id}"를 추가하세요.
완료된 작업은 .done 클래스를 추가하여 시각적으로 표시하세요.

7단계: 작업을 저장해 유지하기(localStorage)

지금은 새로고침하면 모든 작업이 사라집니다. 이는 작업이 JavaScript 메모리에만 저장되기 때문입니다. 페이지를 새로고침하면 메모리가 초기화됩니다.

localStorage = 브라우저 안에 있는 작은 "저장 상자"

localStorage는 브라우저에 내장되어 있습니다. 키(이름) 아래에 텍스트를 저장하는 작은 상자라고 생각하세요. 서버나 계정 없이도 쓸 수 있어 초보자 프로젝트에 적합합니다.

작업 전체 리스트를 JSON 문자열로 저장하고, 페이지가 열릴 때 다시 불러옵니다.

1) 변경이 있을 때마다 저장하기

작업을 추가하거나 완료 표시를 바꾸거나 삭제할 때마다 saveTasks()를 호출하세요.

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

앱이 tasks 배열을 업데이트할 때마다 다음을 실행하세요:

saveTasks(tasks);
renderTasks(tasks);

2) 페이지 시작 시 로드하고 렌더링하기

페이지가 열릴 때 저장된 값을 읽습니다. 저장된 것이 없으면 빈 리스트로 초기화하세요.

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

이제 앱이 새로고침 후에도 작업을 기억합니다.

팁: localStorage는 문자열만 저장하므로 JSON.stringify()로 배열을 텍스트로 바꾸고, 불러올 때 JSON.parse()로 다시 배열로 만듭니다.

8단계: 테스트하고 흔한 버그 고치기

안전하게 실험하기

큰 변경 전에 작동하는 버전을 저장하고 필요하면 되돌리세요.

스냅샷 생성

테스트는 지루해 보이지만, 앱을 "내 머신에서 동작"에서 "항상 동작"으로 만드는 가장 빠른 방법입니다. 작은 변경 후에 빠르게 한 번씩 점검하세요.

빠른 테스트(60초)

주요 흐름을 다음 순서로 실행하세요:

작업 추가
완료 표시
삭제
페이지 새로고침(UI가 기대대로 동작하는지 확인)

어떤 단계가 실패하면 새로운 기능을 추가하기 전에 고치세요. 작은 앱은 문제를 쌓아두면 복잡해집니다.

초보자 앱을 망가뜨리는 엣지 케이스 시도하기

설계하지 않았던 입력을 사람들이 실제로 하게 됩니다:

매우 긴 텍스트(넘치거나 버튼을 밀어내는가?)
같은 작업 반복(올바른 항목을 삭제하는가?)
빈 입력(빈 항목을 추가하는가?)

빈 항목을 막는 일반적인 해결책:

const text = input.value.trim();
addButton.disabled = text === "";

(이 코드를 input 이벤트마다 실행하고, 추가하기 직전에도 다시 확인하면 좋습니다.)

클릭이 먹히지 않을 때 빠른 점검 목록

동작하지 않을 때 흔한 원인:

선택자 불일치(HTML과 JS의 id나 클래스 이름 불일치)
스크립트가 로드되지 않음(파일명/경로 오류 또는 app.js를 찾지 못함)
JavaScript 오류로 인해 파일의 나머지 코드 실행이 중단됨

콘솔을 사용해 실제 상황 확인하기

무작위로 보이는 문제는 로그로 확인하세요:

console.log("Adding:", text);
console.log("Current tasks:", tasks);

브라우저 콘솔에서 오류(빨간 텍스트)를 확인하세요. 문제를 고친 후에는 로그를 지워 프로젝트가 지저분해지지 않게 하세요.

9단계: 사용성 높이기(접근성 + 모바일)

투두 앱은 실제 사람이 편하게 쓸 수 있을 때 "완성"입니다 — 휴대폰, 키보드, 화면 읽기 도구에서 모두 편해야 합니다.

모바일에서 누르기 쉽게 만들기

작은 버튼은 모바일에서 짜증납니다. 클릭 가능한 요소에 충분한 공간을 주세요:

버튼에 큰 패딩(가로·세로 여유), 높이는 약 44px 목표
완료와 삭제 버튼 사이 간격을 두어 오작동 방지
입력 필드는 모바일에서 전체 너비로 유지

CSS에서 padding, font-size, gap을 키우면 큰 차이가 납니다.

레이블과 ARIA 추가(무엇이고 왜 필요한가)

화면 읽기 도구에는 명확한 이름이 필요합니다.

텍스트 입력에는 실제 label을 사용하세요(가장 좋음). 표시하고 싶지 않으면 CSS로 시각적으로 숨기되 HTML에는 남겨두세요.
아이콘만 있는 버튼(예: 휴지통)은 aria-label="Delete task"처럼 읽어줄 수 있는 문자열을 포함하세요.

이렇게 하면 추측 없이 어떤 컨트롤인지 이해할 수 있습니다.

키보드 지원: Tab + Enter

마우스 없이도 앱을 사용할 수 있게 하세요:

Tab으로 입력창과 버튼을 이동할 수 있어야 합니다.
입력창에서 Enter를 누르면 작업이 추가되도록(form을 사용하면 Enter가 자연스럽게 동작합니다).
작업 추가 후 포커스를 입력창으로 되돌리면 여러 작업을 빠르게 추가할 수 있습니다.

읽기 쉬움: 대비와 글꼴 크기

기본 글꼴 크기는 16px을 권장하고, 색상 대비는 충분히 강하게(어두운 텍스트/밝은 배경 등) 유지하세요. 색상만으로 "완료"를 표시하지 말고 취소선 같은 명확한 스타일을 함께 사용하세요.

10단계: 코드 정리와 구성

다음 프로젝트 시작

몇 분 만에 초보자용 앱을 프로토타입으로 만들고, 코드를 읽으며 배우세요.

Koderai 사용해보기

모든 기능이 동작하면 10–15분 정도 코드를 정리하세요. 이렇게 하면 나중에 수정하기 쉽고 프로젝트를 다시 볼 때 이해하기 쉽습니다.

간단한 폴더 구조

작게 그리고 예측 가능하게 유지하세요:

/index.html — 페이지 구조
/styles.css — 앱의 스타일
/app.js — 동작(추가, 완료 토글, 삭제, 저장/로드)
/README.md — 나중의 당신을 위한 간단한 메모

서브폴더를 선호하면:

/css/styles.css
/js/app.js

사용하는 경우 link와 script 경로가 정확한지 확인하세요.

JavaScript를 읽기 쉽게 만들기

몇 가지 작은 규칙으로 가독성을 높일 수 있습니다:

명확한 이름 사용: taskInput, taskList, saveTasks()
함수는 한 가지 일만 하게 작게 유지
코드가 명백하지 않은 부분에만 짧은 주석 사용

예를 들어 읽기 쉬운 함수들:

renderTasks(tasks)
addTask(text)
toggleTask(id)
deleteTask(id)

간단한 README 추가

README.md는 간단하면 됩니다:

무엇을 하는지(작업을 저장하는 투두 리스트)
실행 방법(브라우저에서 index.html 열기)
알려진 제한 사항(있다면)

프로젝트 백업

완료 마일스톤(예: "localStorage 작동")마다 폴더를 압축해 두세요. 버전 관리를 원하면 Git을 쓰는 걸 권장하지만 선택 사항입니다. 한 번의 백업도 실수로 파일을 잃는 것을 막아줍니다.

11단계: 앱 배포하고 공유하기

배포는 앱 파일(HTML, CSS, JS)을 인터넷에 공개해 다른 사람이 링크로 열어 쓸 수 있게 하는 것입니다. 이 투두 앱은 정적 사이트이므로 무료로 호스팅할 수 있는 곳이 많습니다.

옵션 1: GitHub Pages(정적 사이트에 적합)

대략적인 단계:

GitHub 계정 생성(없다면)
새 저장소 생성하고 파일을 업로드(또는 Git으로 푸시)
저장소의 Settings → Pages로 이동
배포할 브랜치(보통 main)와 폴더(보통 루트 /) 선택
저장하면 GitHub가 공개 URL을 제공합니다.

별도 파일을 쓴 경우 파일명이 링크와 정확히 일치하는지 확인하세요(예: styles.css vs style.css).

옵션 2: Netlify 또는 Vercel(간단한 드래그 앤 드롭)

가장 쉬운 업로드 방법:

Netlify나 Vercel에 계정 생성
Deploy / Add New Project 찾기
프로젝트 폴더 드래그 앤 드롭(또는 GitHub 저장소 연결)
업로드/빌드 완료 후 생성된 URL 열기

공유 전 빠른 체크리스트

새로고침: 작업이 남아 있는지 확인(localStorage 작동)
추가/완료/삭제: 버튼이 모두 문제없이 동작하는지 확인
모바일에서 열기(또는 브라우저 창을 좁혀 보기): 레이아웃이 깨지지 않는지 확인

통과하면 친구에게 링크를 보내어 테스트해 달라고 하세요 — 제3자의 사용에서 문제를 쉽게 발견할 수 있습니다.

다음 단계: 시도해볼 만한 간단한 확장 기능들

작동하는 투두 앱을 만들었습니다. 다음 단계로 넘어가지 않고도 배움을 이어갈 수 있는 업그레이드입니다. 가치도 있고 유용한 패턴을 가르쳐줍니다.

1) 작업 텍스트 편집하기

각 작업 옆에 "편집" 버튼을 추가하세요. 클릭하면 라벨을 작은 입력 필드로 바꾸고(값 미리 채우기) "저장"과 "취소"를 표시합니다.

팁: 작업 데이터를 id와 text를 가진 객체 배열로 유지하세요. 편집은 id로 작업을 찾아 text를 바꾸고 다시 렌더링한 뒤 저장하면 됩니다.

2) 필터: 전체 / 진행중 / 완료

상단에 All, Active, Done 세 개 버튼을 추가하세요.

현재 필터를 currentFilter = 'all' 같은 변수에 저장합니다. 렌더링 시:

all: 모든 작업 표시
active: 완료되지 않은 작업만 표시
done: 완료된 작업만 표시

3) 마감일 또는 간단한 카테고리

가볍게 추가하세요:

선택적 마감일(YYYY-MM-DD)을 추가해 작업 옆에 보여주기
또는 드롭다운으로 "Work / Home / School" 같은 카테고리 추가

한 개의 필드만 추가해도 데이터 모델과 UI를 함께 업데이트하는 법을 배울 수 있습니다.

4) 나중에: localStorage에서 백엔드로 옮기기

준비되면 큰 아이디어는: localStorage 대신 API(서버)에 작업을 전송하는 것입니다. 서버는 데이터베이스에 저장하므로 기기 간 동기화가 가능합니다.

그 다음 단계로 바로 건너뛰지 않고 싶다면, Koder.ai 같은 프로토타이핑 도구로 기능(엔드포인트, DB 테이블, UI 변경)을 채팅으로 설명하고 빠르게 시제품을 만들며 React/Go/PostgreSQL 같은 스택을 내보낼 수 있습니다.

5) 좋은 다음 초보자 프로젝트

검색 기능이 있는 노트 앱이나 습관 추적기(매일 체크) 같은 프로젝트를 시도해 보세요. 리스트 렌더링, 편집, 저장, UI 설계 같은 동일한 기술을 재사용합니다.

자주 묻는 질문

이 할 일 앱을 만들려면 무엇이 필요한가요?

컴퓨터, 최신 브라우저, 코드 편집기만 있으면 됩니다. index.html, styles.css, app.js가 들어 있는 폴더를 만든 다음 브라우저에서 HTML 파일을 여세요.

초보자용 할 일 앱에는 어떤 기능이 포함되어야 하나요?

먼저 네 가지 기능으로 시작하세요. 할 일 추가, 목록에서 보기, 완료 표시, 삭제입니다. 마감일, 카테고리, 계정 같은 추가 기능은 나중에 넣으세요.

프로젝트에서 각 파일은 어떤 역할을 하나요?

HTML은 입력창, 버튼, 할 일 목록을 만듭니다. CSS는 간격과 모양을 제어합니다. JavaScript는 사용자 동작을 읽고, 목록을 업데이트하며, 할 일 데이터를 저장합니다.

빈 할 일이 추가되지 않게 하려면 어떻게 하나요?

텍스트 입력창과 제출 버튼이 있는 폼을 사용하세요. JavaScript에서 입력값의 앞뒤 공백을 제거하고, 빈 값이면 거부한 뒤, 목록 항목을 만들고 입력창을 비우며 다시 포커스를 맞춰야 합니다.

할 일에 일반 텍스트 대신 객체를 사용해야 하는 이유는 무엇인가요?

id, text, done 값을 가진 할 일 객체를 사용하세요. 두 할 일의 텍스트가 같아도 ID가 있으면 코드에서 정확한 할 일을 수정하거나 삭제할 수 있습니다.

할 일을 완료로 표시하려면 어떻게 하나요?

각 할 일에 체크박스나 완료 버튼을 추가하세요. 누군가 클릭하면 해당 할 일의 done 값을 바꾸고, 취소선이나 흐린 스타일을 적용하는 CSS 클래스를 추가합니다.

새로고침 후에도 앱이 할 일을 기억하게 하려면 어떻게 하나요?

할 일 배열을 localStorage 이름 아래에 JSON.stringify()로 저장하고, 페이지가 시작될 때 JSON.parse()로 읽으세요. 할 일을 추가, 완료, 수정, 삭제한 뒤에는 다시 저장하세요.

추가 버튼을 눌러도 아무 일도 일어나지 않는 이유는 무엇인가요?

먼저 페이지를 새로고침하고 브라우저 콘솔에서 빨간색 오류 메시지를 확인하세요. 그다음 HTML ID가 JavaScript 선택자와 일치하는지, 스크립트 파일명이 index.html의 경로와 일치하는지 확인하세요.

휴대폰과 키보드에서 앱을 더 쉽게 사용하게 하려면 어떻게 하나요?

할 일 입력창에 실제 레이블을 사용하고, 컨트롤은 탭하기에 충분히 크게 만들며, Tab과 Enter로 앱을 테스트하세요. 완료된 할 일은 색상만으로 표시하지 말고, 취소선과 명확한 텍스트도 함께 사용해야 합니다.

할 일 앱을 게시하기 전에 무엇을 테스트해야 하나요?

할 일 추가, 완료 표시, 삭제, 페이지 새로고침을 테스트하세요. 앱을 공유하기 전에 빈 입력, 긴 할 일 이름, 중복된 할 일 텍스트도 시험해 보세요.