하루에 한걸음씩 꾸준히

목차소개컴포넌트생성emitprops, computed이번 포스팅에서는 App.vue에 복잡하게 얽혀 있는 코드를 자식 컴포넌트로 분리하여 보다 간결하고 유지보수가 쉬운 구조로 개선해보겠다. 코드 분리를 통해 가독성을 높이고, 재사용성을 강화하는 방법을 함께 알아보자.컴포넌트 생성 one more step To-Do List Add This field cannot be empty Empty todoList {{ index + 1 }}, {{ item.subject }} ..

이번 포스팅에서는 강의를 보며 직접 구현한 To-do List 프로젝트를 정리해보려 한다. 강의에서 배운 개념과 실제 구현 과정을 하나씩 따라가며 기록해보겠다. one more step To-Do List Add {{ index + 1 }}, {{ item }} HTML 특성상 submit을 할경우 리프래쉬되는데, 이를 방지하고자 submit.prevent를 사용하였다. methods 코드에서 e.preventDefault를 사용할 수 도있지만 간결한 코드를 지원한다.데이터 양방향 바인딩을 위해 inputBox에 v-model을 연결 시켰다. 입력한 데이터가 하단에 추가되게끔 할 예..

이번 포스트는 컴포넌트에 관해 기록해 보도록 하겠다. 이론적인 내용들은 추후에 추가하기로 하고, 작성한 코드들이 어떻게 페이지에 랜더링 되는지 진행해보겠다.Components one more step {{ name }}Vue 컴포넌트내엔 template(html), script(javascript), style(css) 이 들어가게된다.이번에는 Option API가 아닌 Compositon API를 사용한다.export 내 setup 함수를 만들고 return 값에 변수 'name'를 적어준다.html에 바인딩하기 위해선 중괄호를 사용한다.Fragment one more step {{ name }}Vue 2버전에서는 표현하고자하는 태그에 div 로 감싸줘야했는데, 3버전에서는 이 부분은 넘어가도된..

요즘 Vue.js 학습의 필요성을 느꼈다. 이번 기회에 인프런 강의를 통해 Vue.js를 체계적으로 공부하며 배운 내용을 정리해보려 한다. 기록을 통해 학습 내용을 정리하고, 이후에 다시 참고할 수 있는 자료로 남기고자 한다. 프로젝트 설정1. 사전준비Vue.js 를 실행시키기 위해선 Node.js 프레임워크를 설치해야한다.https://nodejs.org/ko   2. Vue cli 설치명령줄 인터페이스인 Vue cli 최신 버전 글로벌로 설치한다.npm install -g @vue/cli정상적으로 설치가 됐으면 cmd에서 vue -V 로 확인한다. 3.프로젝트 생성vue create {프로젝트명}원하는 위치로 이동하여 해당 명령어를 실행하면 프로젝트 폴더가 생성된다. 이후 Vue 버전을 선택할 수 있..