CodingGoGo

라우팅이란? 라우팅이란 웹 페이지 간의 이동 방법을 말합니다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA,Single Page Application)에서 주로 사용합니다. 라우팅을 이용하면 화면간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상 시킬 수 있습니다. 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있습니다. (이러한 프런트엔드 프레임워크를 사용하지 않고 일반HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.) *SPA : 페이지를 이동할때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을..

컴포넌트 간 통신과 유효범위 뷰는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없습니다. 각 컴포넌트마다 자체적으로 고유한 유효범위(scope)를 갖기 때문이죠! 즉, 다른 컴포넌트 값을 직접 참조할 수 없습니다. 예제1 더보기 예제 1 {{ cmp2Data }} 의 cmp1.data.cmp1Data 가 적용되지 않은 결과를 확인할 수 있다. 즉, local-component2에서 local-component1를 직접 참조할 수 없다. 상/하위 컴포넌트 관계 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라 데이터를 전달해야한다. 가장 기본적인 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다. 상위-하위 컴포넌트의 데이터 전달은 아래와..

컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 화면의 영역을 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리합니다. Root / | \ / | \ Header Content Footer / \ Aside List 위와 같이컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사합니다. 이러한 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있습니다. 전역 컴포넌트(Global) - 여러 인스턴스에서 공통으로 사용할 수 있습니다. 지역 컴포넌트(Local) - 특정 인스턴스에서만 유효한 범위를 갖습니다. 지역 컴포넌트와 전역 컴포넌트의 차이 {{ message }} {{ message }} 위의 결과에서 보면 두번째 ..

1. 뷰 인스턴스란? 뷰 인스턴스(Vue Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본단위이다. 1.1. 뷰 인스턴스 형식 new Vue({ ... }); 1.2. 뷰 인스턴스 생성 * vue 2.5.2문법을 따라 실습하였습니다. {{ message }} 1.2.1. 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 el, data, template, methods, created 등의 속성을 의미한다. 위의 예제에서는 아래와 같이 속성이 사용되었다. - el : #app(CSS선택자규칙과 같음.) id가 app인 태그를 찾아서 적용하여 사용함. 뷰로 만든 화면이 그려지는 시작점을 의미한다. 화면이 그려질 위치의 돔 요소를 지정해줌. - data: message라는 새로운..

vue create [프로젝트명] vue cli를 이용하여 환경설정을 해줄 것이다. 1. Homebrew 설치 맥북 사용자에게 유용한 설치툴인 Homebrew를 이용하여 설치해보자. Homebrew 설치가이드 2. node 설치 - 터미널에 아래 코드를 실행시킨다. brew install node 3. vue-cli 설치 - 같은 방식으로 터미널에 아래 코드를 실행시킨다. brew install vue-cli 4. visual studio code 설치 - visual studio code 도 homebrew로 아래와 같이 설치해준다. brew install --cask visual-studio-code * visual studio code 기본이 영어로 설정되어있어서 한국어 세팅을 해준다. - 확장 >..