Named Views이란? Nested Router, Named View... 뜨든... 이건 또 무엇인가.... 헷갈리기 시작하였다. Named View는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이라고 한다. 그럼 Nested Router는 무엇이었지? Nested Router의 개념을 정리할 때, 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있는 방식. 좀 더 자세히 말하자면, 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조라고 정리했었다. 그럼 차이는 무엇일까? Named View는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시할 수 있다고 한다. 그럼 두 가지 방식에서 가장 큰 차이점은 특정 URL로 이동했을 때 상위-하위 관계로 표시되느냐, 아니..

드디어 실습인가!! 두둥!! 만약 Nested Router를 이용하여 여러개의 컴포넌트를 동시에 표현하려고 한다면 아래 그림처럼 해보자! step 1. step 2. step 3. 여기서 잠깐! children??? 그렇다. 이전 시간에는 component 속성 값만 작성했다. 하지만 오늘을 children까지 설정해보자! 첫 번째 router를 바탕으로 설명하자면 아래와 같은 의미가 되겠다. : login으로 접속했을 때, Nested Router을 이용하여 Login과 LoginFrom을 둘 다 뛰우겠다. 그럼 이제 어떻게 저 두 개 컴포넌트! 아니지~ 총 4개의 컴포넌트를 등록한다는 말인가??? 그것도 두개씩 묶어서??? 그 방법은 아래에!! step 4. Login과 LoginForm을 대표로 설..

Nested Router?? 여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터 중 하나이다. 따라서 라우터로 화면을 이동했을 경우 Nested Routers를 이용하여 여러 개의 컴포넌트를 동시에 랜더링할 수 있다! 랜더링 되는 컴포넌트의 구조는 상위의 컴포넌트가 하위의 컴포넌트를 포함하는 Parent-Child 형태와 같다! 와.. 이렇게 글만 쓰기에는 확실히 이해가 어려울 것 같다. 다음 시간에는 실습하는 걸로~

"라우팅 시 주의사항"이라고는 하나~ Vue가 가지고 있는 프레임워크적 특성이 있다. Vue의 Template에는 최상위 태그가 1개만 있어야한다는 점 이 문장이 무슨 뜻인가? 이런식으로 작성할 경우 아래와 같은 에러가 발생한다. 따라서 아래와 같이 작성해야 정상적으로 작동한다! 즉! 최상위 테그는 한 개만 작성하는 것이 바람직하다!

기본적인 라우터 실습을 위해 아래 코드를 작성했다! 이게 뭐 당가... 하겠다.. 처음 접한 나도 그러하니~ 일단, html 부분부터 보자! [HTML] 1. : 화면상에서 a 테그로 변환되는 부분이다. to="....................." 에 정의된 텍스트 값이 브라우저 URL 끝에 추가되는 형식으로 보여질 예정이다. 요렇게!! 2. : 갱신된 URL에 해당하는 화면을 보여주는 영역! [스크립트] 1. 컴포넌트 정의(설정) : 컴포넌트를 정의한다. 물론, data 속성이나 el 속성을 이용하여 컴포넌트를 정의해도 OK! 2. router 변수 설정 : 각 URL에 따라 표시될 컴포넌트를 지정한다. 3. 뷰 라우터 생성 후 routes 연결 : 뷰 라우터에 routes(2번)를 연결하는 부분 ..

라우터...? 라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야한다! 라우팅? 그건 또 뭔데?? 라우팅 : 웹 페이지 간의 이동 방법 그럼 뷰 라우터는? 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 그럼, 라우팅을 왜 굳이 필요할까????? 보통 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받고, 웹 페이지를 다시 사용자에게 돌려주게 되는데~ 이 때, 화면이 깜빡거리는 현상이 존재한다. 따라서!! 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있다는 것!!