홍준혁

먼저 각 컴포넌트를 만들어서 App.vue에 넣어서 만들었다. 이렇게 하면 components에서 만든 Vue 컴포넌트들을 App이라는 곳에 다 넣어줬다. 이렇게 구현을 하고 F12를 눌러 개발자 모드를 들어가 보면 성공적으로 만들어진 것을 볼 수 있다. 이제 각 기능들을 정의하고 구현할 것이다. TodoHeader : 애플리케이션 이름 표시 TodoInput : 할 일 입력 및 추가 TodoList : 할 일 표시 및 특정 할 일 삭제 TodoFooter : 할 일 모두 삭제 대충 이런식으로 구현을 할 것이다. 이제 하나하나 스타일 및 기능 구현을 해보도록 해보겠다. App.vue의 style을 조금 꾸며주도록 하자 그다음 TodoHeader를 꾸며보자 여기서 style에 scoped속성은 해당 컴포넌..

네스티드 라우터는 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 네스티드의 뜻을 보면 뭔가 중첩... 음 뜻에서 유추할 수 있듯 네스티드 라우터는 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 되어있다. 그림을 보면 대충 어느 식인지 이해가 될 텐데, 네스티드 라우터는 화면을 구성하는 컴포넌트의 양이 적을 때는 유용하지만, 한 번에 더 많은 양의 컴포넌트를 표현하는 데에는 무리가 있다. 무튼 코드로 한번 구현을 해보자. Vue배우는중 실행해보면 아무것도 보이지 않을 것이다. 하지만 주소 마지막에 user을 치면 User Component라는 것이 보일 것이다. 거기에 posts를 붙여서 엔터를 눌러보면 User Component밑에 User Profile Compo..

라우팅이라는 것은 웹 사이트이동 방법을 의미한다. 웹사이트간의 이동이 매끄러워야 사용자 경험이 향상된다. 라우팅을 사용하면 화면 깜빡임 없이 바로 화면을 넘겨줄 수 있다. 그래서 라우팅이라는 것은 굉장히..까지는 아니고 중요하다고 볼 수 있다. 싱글 페이지 애플리케이션이라고 페이지를 이동할 때 마다 서버에 요청해서 갱신하는게 아니라 미리 해당 페이지들을 받아놓고 이동시에 바로바로 이동할 수 있도록 해준다. 뷰 라우터를 사용하기 위해 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정된 URL로 이동함 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 역활이다. 위 두 태그를 읽고 가보자 뷰 라우터 예제 Main컴포넌트로 이동 login컴포넌트로 이동 처음보는 코드들이 등장했..