목록TODO (2)

ksundev 님의 블로그

[TODO App] 동적 앱 만들기 (TodoInput.vue)

(TodoHeader.vue는 기능이 딱히 없으므로 css 적용까지만 했습니다.)Vue.js 동적 앱 만들기 - TodoInput 컴포넌트 구현지금까지는 정적 HTML만 완성했기 때문에 앱이 동작하지 않을 것입니다.이제 data와 methods를 추가하여 동적인 앱으로 만들어봅시다!이번 포스트에서는 TodoInput.vue 컴포넌트에 대해서만 다루겠습니다.1. data()에 입력값을 받을 변수 지정하기Vue.js에서 사용자 입력을 처리하기 위해서는 먼저 data() 함수에 입력값을 저장할 변수를 정의해야 합니다.export default { data() { return { newTodo: "", // 사용자 입력값을 저장할 변수 }; }, // ... 나머지 코드};왜 data(..
[개발] Vue.js/중급 2025. 7. 6. 15:23
[TODO App] 프로젝트 생성 및 앱 구조 설계

위의 사진이 저희가 만들어볼 TODO List 앱 입니다.TODO List 같은 경우엔 되게 흔한 예시지만 알짜배기 개념들이 많이 녹아있어 좋은 것 같습니다. 먼저 크게 구조를 나눠보자면header : 앱 제목 배치input: TODO 입력란 배치list: 세로리스트 형태로 목록 배치footer: 전체초기화 버튼 배치정도로 하면 될 것 같습니다. 이전 게시글을 참고하여 취향껏 프로젝트를 생성하시고 App.vue 파일에 가봅시다.2025.07.02 - [[개발] Vue.js/중급] - Vue 프로젝트 설정 방법 비교: 수동 Webpack vs Vue CLI기본으로 채워져 있는 내용들을 지우고 위에서 언급했던 4개의 컴포넌트를 만들어서 배치해봅시다.각 컴포넌트의 내용은 일단 기본적인 내용들로만 채웠습니다.예..
[개발] Vue.js/중급 2025. 7. 2. 17:51
이전 Prev 1 Next 다음