[TODO App] 프로젝트 생성 및 앱 구조 설계

위의 사진이 저희가 만들어볼 TODO List 앱 입니다.

TODO List 같은 경우엔 되게 흔한 예시지만 알짜배기 개념들이 많이 녹아있어 좋은 것 같습니다.

 

먼저 크게 구조를 나눠보자면
header : 앱 제목 배치
input: TODO 입력란 배치
list: 세로리스트 형태로 목록 배치
footer: 전체초기화 버튼 배치

정도로 하면 될 것 같습니다.

 

이전 게시글을 참고하여 취향껏 프로젝트를 생성하시고 App.vue 파일에 가봅시다.

2025.07.02 - [[개발] Vue.js/중급] - Vue 프로젝트 설정 방법 비교: 수동 Webpack vs Vue CLI

기본으로 채워져 있는 내용들을 지우고 위에서 언급했던 4개의 컴포넌트를 만들어서 배치해봅시다.

각 컴포넌트의 내용은 일단 기본적인 내용들로만 채웠습니다.

예를 들면 이런 식입니다. 그리고 실행 결과는

이렇게 나옵니다.

 

이후 작업들은 다음 포스트에서 이어서 만들겠습니다.