랑쓰노트

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 ◆ 뷰 라우터 - 페이지를 이동할 때 사용하는 공식 라이브러리이자 기능 - 뷰에서 싱글 페이지 어플리케이션, 페이지 간 이동하는 ..

Frontend/Vue 2021. 9. 20. 22:14

◆ 동일 레벨 컴포넌트 통신방식 - 두 개의 컴포넌트가 같은 레벨에 있을 때 통신하는 방법 - 직접 전달은 없고, 부모-자식 간의 전달을 통해 통신이 가능하다!! 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..

Frontend/Vue 2021. 9. 19. 22:34

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

Frontend/Vue 2021. 9. 17. 17:22

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

Frontend/Vue 2021. 9. 16. 23:38

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

DevOps/Git 2021. 9. 16. 00:35

◆ 원격저장소 Github - 깃허브(Github)는 분산 버전 관리 툴인 깃(Git)를 사용하는 프로젝트를 지원하는 웹호스팅 서비스 - "버전관리"와 "협업"을 위한 코드 웹 호스팅 플랫폼으로 언제, 어디서나 프로젝트를 진행할 수 있도록 돕는 역할 ※ 원격저장소란? - 지역저장소가 아닌 컴퓨터나 서버에 만든 저장소 - 지역저장소와 연결되어 '백업', '협업'에서 중요한 역할 ◆ Github 이용하기 Step 1. Create a new repository - 깃허브에 원격저장소 만들기 Step 2. 지역저장소를 원격저장소에 연결하기 - 도스창에 명령어 입력(원격저장소 하나당 한번만 해주면 됨) $ git remote add origin 복사한 주소 붙여넣기 (깃허브 저장 주소를 origin으로 줄여서 ..

DevOps/Git 2021. 9. 16. 00:10

◆ Vue의 특징 - 컴포넌트를 이용한 개발 - 하나의 템플릿을 컴포넌트 형식으로 만들어 여러 곳에서 사용가능 Vue는 화면(view) 라이브러리로 다음과 같은 역할을 가진다. 1. Dom Listeners : DOM을 이용한 조작 2. Data B‭indings : 데이터 바인딩 뷰의 모든 시작은 뷰 인스턴스를 만드는 것부터 시작된다. 지금부터 Vue 인스턴스에 대해 알아보자!! ◆ Vue 인스턴스 - 인스턴스는 뷰를 개발할 때 필수로 생성해야 하는 코드이다. - 인스턴스 안에는 뷰에서 제공하는 API(기능)과 속성이 들어있다. - 인스턴스를 생성하기 위해서는 new Vue() 생성자를 호출해야한다. 예제에서는 생성자의 속성으로 el, data와 같이 2개만 사용되었으나, template, method..

Frontend/Vue 2021. 9. 15. 23:55

Vue-cli가 생성한 기본 프로젝트의 구조에 대해 알아보자 ◆ Vue 프로젝트 구조 - Vue project 환경을 의미 - 기본 vue 개발환경을 설정해주는 도구로 기본적인 프로젝트를 세팅 ▷ node_modules : 앱 개발과 배포에 필요한 npm 패키지 저장 ▷ public : 배포 버전을 빌드할 때 필요한 파일(컴파일되지 않는 요소) ▷ src : 컴포넌트들을 구성하는 영역으로 Vue가 컴파일하는 대상 - assets : img와 같은 자원들을 저장하는 곳으로 컴포넌트에서 사용한 파일들은 자동배포 - components : component를 만드는 곳 ▷package.json : 프로젝트에 대한 전반적인 설정 ◆ package.json 파일 - 프로젝트의 설정을 담는 파일로 spring ap..

Frontend/Vue 2021. 9. 13. 23:28