홍준혁

웹에서 서버에 데이터를 요청하는 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컴포넌트로 이동 처음보는 코드들이 등장했..

공식 뷰 사이트에서는 하위에서 상위로 데이터를 전달하는 것을 권장하지는 않는다. 왜냐하면 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이다. 그래도 배워보자 보면 상위에서 하위로 전달하는 데이터 전달 방식과는 조금 다른 모습을 볼 수 있다. 먼저 하위 컴포넌트에서 버튼이 클릭되면 v-on:click이라는 이벤트가 발생하는데 그 이벤트가 발생하면 showLog라는 함수를 실행하게 되어있다. 이때 showLog를 실행하면 emit이 실행이 되는데 그러면 div#app에서 이벤트가 발생한다. 그럼 emit 이벤트가 발생하였을때 실행하는 함수는 printText인데 그렇게 되면 received event가 출력되는 모습을 볼 수 있다. 처리되는 과정을 정리해보면 ... [show]버튼을 클릭하면 클릭이벤트 ..

서로 다른 컴포넌트 간의 데이터 전달하는 방법 중 상위-하위 컴포넌트 데이터 전달이 있다. 이때 상위 컴포넌트는 하위 컴포넌트에세 props라는 속성을 전달하게 되는데, 먼저 props속성을 사용할려면 Vue.component("child-component", { props: ["props"], }); 하위 컴포넌트에 이렇게 선언을 해주어야 한다. 그러면 상위(부모)에게서 전달되는 props를 전달받을 수 있다. 위의 코드를 해석하자면 먼저 상위 컴포넌트에서 v-bind:propsdata이라는 부분은 propsdata 즉 props의 속성 이름인데 이 컴포넌트에 message라는 값을 전달하겠다는 것이다. 그럼 하위 컴포넌트는 new Vue의 data의 message값을 전달받게 되었다 그럼 child-..