랑쓰노트

[Vue] Vue 라우터

https://joshua1988.github.io/vue-camp/vue/router.html#%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5 Router | Cracking Vue.js 뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM joshua1988.github.io ◆ 뷰 라우터 - 페이지를 이동할 때 사용하는 공식 라이브러리이자 기능 - 뷰에서 싱글 페이지 어플리케이션, 페이지 간 이동하는 ..

[Vue] 컴포넌트 통신방식 응용(동일레벨 컴포넌트 / 이벤트 버스)

◆ 동일 레벨 컴포넌트 통신방식 - 두 개의 컴포넌트가 같은 레벨에 있을 때 통신하는 방법 - 직접 전달은 없고, 부모-자식 간의 전달을 통해 통신이 가능하다!! Step1. 하위컴포넌트에서 $emit()으로 이벤트를 발생 Step2. 상위컴포넌트에서 v-on:으로 이벤트 수신 Step3. 하위컴포넌트들에게 props로 데이터 전달 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var appHeader ={ template: 'header', props: ['propsdata'] } var appContent ={ template: 'contentpass..

[Vue] 컴포넌트 통신방식/데이터 전달방식(props / $emit)

◆ Vue 컴포넌트 통신방식(데이터 전달방식) - 뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖는다. - 따라서, 컴포넌트 간에 데이터를 주고받기 위한 규칙이 존재한다. 데이터의 흐름(Props/Event)을 추정할 수 있다. ※ Props : 상위에서 하위로 데이터를 내려준다. / props를 전달한다. ※ Event emit : 하위에서 상위로 이벤트를 올려준다. / 이벤트가 발생한다. ◆ 상위에서 하위로 데이터 전달 Props - 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 - 상위컴포넌트에서 하위 컴포넌트로만 이동!! ▷ 상위컴포넌트의 HTML 코드 ▷ 하위컴포넌트의 props 속성 정의 Vue.component('child-component', { props: [ 'props 속..

[Vue] Vue 컴포넌트

◆ Vue 컴포넌트 - 컴포넌트(Component)란 화면을 구성할 수 있는 블록(영역)을 의미 - 화면을 영역별로 구분해서 코드를 관리하는 뷰의 기능 1. 화면을 빠르게 구조화 2. 일관적인 패턴으로 개발(속도 향상) 3. 재사용 가능 ◆ 컴포넌트 등록 - 컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local)의 두 가지 방법이 존재 1) 전역컴포넌트 - 플러그인, 라이브러리 형태로 공통으로 사용해야하는 컴포넌트에 사용 - 인스턴스를 생성하지 않아도 모든 인스턴스에 사용가능!! ※ 전역컴포넌트 등록 - Vue 변수를 이용하여 .component( )를 호출하여 등록 - 컴포넌트이름 : template 속성에서 사용할 HTML 태그를 의미 - 컴포넌트내용 : 컴포넌트 태그가 HTML 요소로 변..

[GitHub] 깃허브 토큰(Token)생성하는 방법

2021년 8월 13일부터 GitHub는 Git 작업을 인증할 때 비밀번호 대신 Token을 사용하도록 변경되었다. 위와 같은 사항이 변경된지 이틀 지난 시점에서 바뀐 줄도 모르고, 비밀번호를 수없이 입력했던 슬픈 경험이 떠올라 다시 한번 토큰 생성에 대해 정리해놓으려고 한다. Step1. GitHub 로그인 Step2. Settings 설정 메뉴 클릭 Step3. Developer Settings 설정 메뉴 - 개발자 설정 클릭 Step4. Personal access tokens 개발자 설정 메뉴 - 개인 액세스 토큰 클릭 Step5. Token 관련 세부사항 체크 및 입력 Step6. 토큰 생성 완료!! ※ 주의!! 새로 생성된 token은 보안상의 이유로 해당 페이지를 벗어나면 다시 볼 수 없으므..