들어가며
프로그래밍 언어를 배울 때 이론과 문법을 익히는 것만으로는 부족합니다. 실제로 무언가를 만들어보면서 문제를 해결하고, 아이디어를 구현할 때 배우는 것이 훨씬 많습니다. 지금까지 우리는 자바스크립트 기초, 핵심 문법 심화, 브라우저 환경 이해, 디버깅과 테스트에 이르기까지 탄탄한 기반을 쌓았습니다.
이번 글에서는 그동안 습득한 개념을 작은 프로젝트에 적용해보면서 경험을 쌓는 데 초점을 맞춥니다. Todo List 앱, 날씨 API 대시보드, 메모 앱, 타이머 & 스톱워치 같은 간단하지만 의미 있는 예제를 단계별로 구현하고 확장하는 과정을 통해 실무에 한 발 더 가까워질 수 있습니다. 이 프로젝트들을 거치며 DOM 조작, 이벤트 처리, Fetch API 활용, 로컬 스토리지 저장, 상태 관리, 디버깅, 테스트 등을 실전에 적용하는 경험을 해보세요.
1. Todo List 앱 구현 : DOM 조작과 이벤트 처리의 종합 연습
1-1. 요구사항 정리
- 사용자는 입력 필드에 할 일을 입력한 뒤 “추가” 버튼을 눌러 새로운 할 일을 목록에 추가할 수 있습니다.
- 각 할 일 옆에 완료 체크박스가 있으며, 체크 시 완료 상태로 표시됩니다.
- 삭제 버튼을 눌러 해당 할 일을 목록에서 제거할 수 있습니다.
- 페이지를 새로고침해도 데이터가 유지되도록 로컬 스토리지를 사용합니다.
1-2. 구현 포인트
- DOM 조작 : createElement, appendChild 등을 사용해 할 일 목록을 동적으로 추가
- 이벤트 처리 : 제출 버튼 클릭, 체크박스 상태 변경, 삭제 버튼 클릭 시 핸들러 등록
- 로컬 스토리지 : 할 일 목록을 배열 형태로 관리하고, 변경 시 마다 JSON으로 직렬화하여 localStorage.setItem()에 저장. 초기 로드시 localStorage.getItem()으로 복원
1-3. 예제 코드 스니펫
[html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<title>Todo List</title>
<style>
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h1>할 일 목록</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="할 일을 입력하세요" />
<button type="submit">추가</button>
</form>
<ul id="todo-list"></ul>
<script>
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
let todos = JSON.parse(localStorage.getItem('todos')) || [];
function saveTodos() {
localStorage.setItem('todos', JSON.stringify(todos));
}
function render() {
list.innerHTML = '';
todos.forEach((todo, index) => {
const li = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.done;
checkbox.addEventListener('change', () => {
todo.done = checkbox.checked;
saveTodos();
render();
});
const span = document.createElement('span');
span.textContent = todo.text;
if (todo.done) {
span.classList.add('done');
}
const btn = document.createElement('button');
btn.textContent = '삭제';
btn.addEventListener('click', () => {
todos.splice(index, 1);
saveTodos();
render();
});
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(btn);
list.appendChild(li);
});
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const text = input.value.trim();
if (text !== '') {
todos.push({ text, done: false });
saveTodos();
render();
input.value = '';
}
});
render();
</script>
</body>
</html>
이 Todo List 앱을 통해 DOM 조작, 이벤트, 로컬 스토리지 활용 능력을 종합적으로 단련할 수 있습니다.
2. 날씨 API 대시보드 : 비동기 프로그래밍과 Fetch API 활용
2-1. 요구사항 정리
- 사용자는 도시 이름을 입력하고 “조회” 버튼을 누르면 해당 도시의 현재 날씨 정보(온도, 날씨 아이콘, 상태 메시지)를 화면에 표시합니다.
- OpenWeatherMap 같은 공용 API를 사용해 실시간 데이터를 받아옵니다.
- 비동기 요청 처리, 에러 상황(잘못된 도시명) 대처를 연습합니다.
2-2. 구현 포인트
- Fetch API : fetch()로 외부 API 호출
- async / await : 비동기 코드를 동기식으로 명확히 표현
- 에러 처리 : 도시명이 잘못되었을 경우 예외 처리 및 사용자에게 안내 메시지 표시
2-3. 주요 코드 아이디어
[js]
async function getWeather(city) {
const apiKey = 'YOUR_API_KEY';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
const response = await fetch(url);
if(!response.ok) {
throw new Error('도시 정보를 가져올 수 없습니다.');
}
return await response.json();
}
이후 DOM에 데이터를 반영하고 에러 발생 시 경고 메시지를 띄워보세요. 이 과정을 통해 비동기 처리, API 연동, 예외 처리에 능숙해질 수 있습니다.
3. 메모 앱 : 데이터 지속성과 UX 개선
3-1. 요구사항 정리
- 사용자는 제목과 내용 필드를 입력하고 “저장” 버튼을 누르면 메모를 생성할 수 있습니다.
- 생성된 메모는 목록 형태로 표시되며, 클릭 시 내용 조회 가능
- 메모는 로컬 스토리지에 저장되어 페이지 새로고침 후에도 유지
- 메모 수정 및 삭제 기능 추가로 확장 가능
3-2. 구현 포인트
- CRUD 작업 연습 : Create(추가), Read(조회), Update(수정), Delete(삭제) 기능을 모두 경험
- 상태 관리 : 메모 목록을 배열로 관리하고, 변경 시 마다 로컬 스토리지에 반영
- UX 개선 : 검색 기능을 추가하거나 최근 메모를 맨 위에 표시하는 등 확장성을 고려
이 앱을 통해 데이터 유지와 상태 관리를 한 단계 더 발전시키며, 배열과 객체 조작 능력을 한층 향상시킬 수 있습니다.
4. 타이머 & 스톱워치 : 시간 기반 로직 처리 연습
4-1. 요구사항 정리
- 타이머 : 사용자가 특정 시간을 입력하면, 1초씩 줄어드는 카운트다운 표시
- 시간 종료 시 알림 표시
- 스톱워치 : 시작, 일시정지, 초기화 버튼 구현으로 증가하는 시간 표시
- DOM 업데이트로 매초 화면에 현재 남은 시간 혹은 경과 시간을 반영
4-2. 구현 포인트
- setInterval(), clearInterval() 사용 : 주기적인 이벤트 처리
- 이벤트 핸들링 : 시작 / 정지 / 리셋 버튼 동작
- 상태 변수 관리 : 현재 남은 시간, 현재 경과 시간 등을 변수로 관리
이 예제로 시간 기반 로직 구현 능력을 키우며, DOM과 이벤트를 실전적으로 연결하는 훈련을 할 수 있습니다.
마무리 : 실전 예제를 통해 개념에서 실무로
위의 실전 프로젝트들은 단순한 예제에 불과하지만, 각 프로젝트는 실제 서비스 개발에 필요한 핵심 기술들을 압축적으로 담고 있습니다.
- Todo List 앱 : CRUD 로직, DOM 조작, 로컬 스토리지
- 날씨 API 대시보드 : 비동기 프로그래밍, API 연동, 에러 처리
- 메모 앱 : CRUD 확장, 상태 관리, 검색 기능 등 UX 개선
- 타이머 & 스톱워치 : 시간 기반 로직, 이벤트 관리
이러한 프로젝트를 통해 개념을 손으로 직접 구현해봄으로써, 머릿속 지식이 실전 기술로 변환되는 경험을 하게 됩니다. 또한, 각 프로젝트에서 발생하는 소소한 에러나 로직 문제를 디버깅하며 문제 해결 능력을 더욱 강화할 수 있습니다.
추가적으로 다음과 같은 사항들을 고려해보세요.
- 테스트 코드 작성 : 핵심 함수 로직에 대한 유닛 테스트를 작성해보며, 코드 품질 관리 능력 향상
- 코드 구조화 : 프로젝트 규모가 커질 경우, 모듈 시스템과 폴더 구조 개선을 통해 유지보수성을 높일 수 있습니다.
- 디자인 개선 : CSS나 UI 라이브러리와 결합하여 좀 더 세련된 사용자 인터페이스를 구현할 수 있습니다.
이제 실전 예제를 통해 자신감을 쌓았다면, 다음 단계에서 프레임워크 기초를 익히며 자바스크립트 개발자로서 성장하는 길을 탐색해보는 것은 어떨까요?
'프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 학습 로드맵 & 참고자료 : 자바스크립트 여정을 지속적으로 발전시키기 (2) | 2024.12.08 |
|---|---|
| [Javascript] 프레임워크 & 라이브러리 기초 : 생산성과 확장성으로 가는 길 (2) | 2024.12.08 |
| [Javascript] 문제 해결 & 디버깅 : 안정적인 코드를 위한 핵심 역량 (2) | 2024.12.07 |
| [Javascript] 브라우저 환경 이해 : 웹 페이지와 상호작용하는 자바스크립트의 힘 (0) | 2024.12.07 |
| [Javascript] 자바스크립트 핵심 문법 심화 : 현대적 언어 기능으로 성장하기 (0) | 2024.12.07 |
