홍준혁

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

뷰의 템플릿(template)은 HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 우리가 컴포넌트를 만들때 작성한 template이 그 예시이다. new Vue({ template: "Hello This is Template", }).$mount("#app"); 여기서 템플릿 속성에 대해 한가지 알아둬야 할 특징이 있는데 사용자는 볼 수 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역활을 한다.

웹에서 서버에 데이터를 요청하는 HTTP통신은 거의 필수로 구현해야 하는 기능이다. HTTP라는 것은 브라우저와 서버간의 데이터를 주고받는 방식을 의미한다. 만약 내가 카카오톡으로 친구에게 메시지를 보내는데 그 친구는 카카오톡을 안쓰고 페이스북 메신져를 사용한다면 페메를 사용하는 친구에게는 데이터가 전달되지 않을것이다. 이처럼 HTTP는 사용해서 단말기 간에 통신하기 위해 상호간에 정의한 규칙이다. 브라우저는 HTTP요청 송신을 보내면 서버는 HTTP응답 수신을 보내는 것이다. 뷰에서는 axios라는 라이브러리를 지원하는데 이는 웹에서 HTTP통신을 하기 위해 사용하는 통신 라이브러리이다. (예전에는 뷰 리소스를 사용했지만 여러 문제때문에 엑시오스를 사용한다.) 지금부터 엑시오스를 설치하는 법을 알아보도..

저번 시간에 한 번에 많은 라우터를 표현하는데 한계가 있는 네스티드 라우터를 배워봤었는데 이번엔 그 단점을 해결해줄 네임드 뷰를 배워 볼 것이다. 이런 식으로 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 표시할 것이다. 잔말 말고 바로 코드로 구현해보자. div#app에 router-view가 3번 사용이 되었는데 이렇게 작성을 하면 "같은 레벨의 컴포넌트가" 3개가 화면애 보인다. 그다음 보면 각 컴포넌트의 내용이 표시되는 것을 알 수 있다. 이때 컴포넌트를 하나 더 만들어 보자 그다음 routes에 경로를 하나 더 만들어 보자 이렇게 하고 결과를 보도록 하자. 주소에 login을 끝에 추가하면 아까 추가한 컴포넌트의 내용이 나오는 것을 알 수 있다. 그다음 이동이 편할 수 있도록 router-li..

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

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