지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
3편에선 vue-router를 사용해 컴포넌트간 이동을 진행해보았습니다.
4편에서는 firebase를 연결하고 회원가입&로그인을 진행해 보겠습니다.

마지막으로 firebase에 가입된 데이터에 인증을 통해 페이지 접속이 가능하도록 해보겠습니다.

스텝4 인증 후 앱 접속

4.1 router에 meta 추가

이제 인증을 받았습니다! 하지만 아무 일도 일어나지 않습니다. 사용자를 인증 한 경우에만 응용 프로그램으로 접근 가능하도록 사용자를 리다이렉션시켜야합니다. 우리는 앱에서 인증 후 이동 될 컴포넌트가 Hello 컴포넌트라고 정의 하였습니다.

Vue 애플리케이션에서 이를 구현하기 위해 vue-router의 메타 필드를 사용할 수 있습니다. 메타 필드는 경로에 설정할 수있는 추가 정보입니다.

메타에 대한 자세한 내용을 보려면 여기에서 vue-router 설명서를 확인하십시오.
https://router.vuejs.org/en/advanced/meta.html

이 예제에서 사용할 Hello 뷰에 메타 필드를 추가해 보겠습니다.
이 메타는 requiresAuth라고하며 Hello 컴포넌트에 인증이 필요함을 알립니다.

모든 컴포넌트에 경로가 존재하며, 기본 디폴트 페이지의 앱 기본경로를 재정의해야합니다.

자세히 보기

지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
3편에선 vue-router를 사용해 컴포넌트간 이동을 진행해보았습니다.

이번편에서는 firebase를 연결하고 회원가입&로그인을 진행해 보겠습니다.

스텝3 firebase 사용

우리의 프론트 엔드 애플리케이션을 준비가 되었습니다. 인증 시스템을 사용할 수 있도록 Firebase를 구현합시다!

3.1 Firebase에서 새로운 프로젝트 만들기

Firebase를 사용하려면, 먼저 firebase 콘솔에 새로운 프로젝트를 생성해야합니다.
가입된 계정이 없으면 계정을 만든 다음으로 이동하십시오.
<console.firebase.google.com>

Add project - 프로젝트추가 를 클릭하세요. 새 프로젝트를 만드는 팝업이 활성화됩니다.
그리고 원하는 이름을 정하세요. 나는 vue-firebase-tutorial 라고 정했습니다.

자세히 보기

지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
이제 vue-router를 사용해 컴포넌트간 이동을 진행해보도록 하겠습니다.

스텝2 컴포넌트에서 컴포넌트의 이동

우리가 정의한 앱 구조를 살펴보면 Login 컴포넌트에서 SignUp컴포넌트로 이동하고 두 컴포넌트에서 Hello 컴포넌트로 이동할 수 있습니다.
어떻게 해야할까요?

우리는 router-link라는 vue-router 구성 요소를 사용할 것입니다.

1
2
3
4
5
6
7
8
9
10

<router-link>는 라우터를 사용하는 앱에서 사용자가 이동하기 위한 구성 요소입니다. 목표 위치는 to라는 prop으로 지정됩니다.
기본적으로 올바른 href로 <a> 태그로 렌더링되지만 tag의 prop으로 구성할 수 있습니다.

<router-link tag="li" to="/foo">
   <a>/foo</a>
</router-link>

또한 대상 경로가 활성화되어 있으면 링크가 자동으로 활성화된 CSS 클래스를 가져옵니다.

vue-router 설명서<https://router.vuejs.org/en/api/router-link.html>

자세히 보기

코드 작성하기!

지난 포스팅에서 우리는 vue에 대해 알아보고 실습을 위한 이론 및 프로젝트를 생성해 보았습니다.
이번시간에는 코드를 작성하면서 vue-router 실습을 진행해 보겠습니다.

우리의 미래 App 아키텍처

우리의 APP은 인증없이 접근 할 수 있는 2개의 View(로그인보기 및 가입보기)와 인증을 통해서만 접근 할 수 있는 1개의 뷰 View (Hello보기)로 총 3개의 View로 구성됩니다.

로그인이 성공적으로 완료되거나 새 계정을 만든 후에는 앱의 인증 된 부분 Hello의 View로 리다이렉션됩니다.

스텝1. 로그인과 회원가입

1-1 로그인 View

Login 컴포넌트를 만들어봅시다. src / components 아래에 Login이라는 새로운 Vue 구성 요소를 만듭니다.

일단 컴포넌트는 단순히 제목, 두 개의 input 필드, 버튼 그리고 간단한 문장으로 구성됩니다.

이제 컴포넌트가 생성되었습니다! 하지만이 새로운 컴포넌트를 우리 앱에 어떻게 보여 줄 수 있을까요?
음… 우리는 vue-router를 사용할것입니다. 기억하시나요? 우리는 Vue-cli로 앱을 초기 구성할때 이미 vue-router를 설치했습니다.

자세히 보기

Vue 2 + Firebase: Firebase 인증 시스템을 사용하여 15분 안에 Vue 앱을 만드는 방법 2편

이 튜토리얼에서는 Vue 2, vue-router 사용 그리고 Firebase의 인증 시스템을 사용하여,
웹 어플리케이션을 신속하게 구축하는 방법을 알아봅니다.

Vue.js란 무엇인가?

다음은 놀랍고 가벼운 Javascript 프레임워크인 Vue.js의 개요입니다.

1
2
3
4

Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. Vue는 타 다른 프레임 워크와 다르게 점진적으로 채택 가능하도록 설계되었습니다. 핵심 라이브러리는 'View' 단에만 초점을 맞추고 있으며, 다른 라이브러리 또는 기존 프로젝트와 통합하기가 매우 쉽습니다.

vuejs 공식 문서: <https://vuejs.org/v2/guide>

자세히 보기

SEO의 중요성

비지니스 측면에 있어서 검색순위 상위권에 노출되는 것은 매우 중요한 부분입니다.
검색시 페이지 이동을 해야 검색이 된다면, 그만큼 유저들이 이전페이지들에서 원하는 결과를 얻어 해당 웹사이트에 접속할 확률이 낮습니다.
물론 입소문이 타서 자연스럽게 해당 검색어를 정확하게 입력한다면 유저의 유입확률이 높을 것이지만, 그렇지 못한 경우가 많습니다.
노출의 효과는 광고를 보면 알 수 있습니다. 자주 보는 광고를 통해 유저에게 특정 비지니스 상품을 홍보하고 그로인해 수익이 됩니다.
검색 엔진 최적화도 마찬가지의 효과입니다.
그러므로 비지니스 측면에서 검색 엔진 최적화는 매우 중요합니다.
스타트업 또는 신제품의 경우 더더욱 중요합니다.

자세히 보기

용어정리

이 카테고리는 비전공자로서 개발자로써 공부하며, 평소 이해하지 못한 단어를 제방식대로 정리하는 카테고리입니다.
제방식대로 풀어 쓴것이므로 오류가 있을 수 있습니다.
오류가 있을시 댓글로 남겨주시면 참고하도록 하겠습니다.

정렬

지난시간에 알고리즘에 대해 알아보았습니다.
알고리즘을 요약하자면, 어떠한 명령어들을 처리하는 과정이라고 하였습니다.

이러한 과정을 함에 있어서 효율적이고 좋은 성능을 통해 개발을 하는 것이 좋은 알고리즘이라고 했었습니다.

자세히 보기

용어정리

이 카테고리는 비전공자로서 개발자로써 공부하며, 평소 이해하지 못한 단어를 제방식대로 정리하는 카테고리입니다.
제방식대로 풀어 쓴것이므로 오류가 있을 수 있습니다.
오류가 있을시 댓글로 남겨주시면 참고하도록 하겠습니다.

알고리즘

알고리즘이란?

명령어들의 순서상 처리과정을 말합니다.
예를들어 우리가 학교에 등교할때도 잠에서 깨고, 아침을 먹고, 양치를 하고, 씻고, 교복을 입고, 학교에 도착하기까지의 순서상 처리하는 과정이 있습니다.
이들을 순서상 나열해놓은 것을 알고리즘이라고 합니다.

자세히 보기

JAVA

이 카테고리는 자바를 공부 하며, 익힌 내용을 기록합니다.
책을 보며, 또는 독학을 하므로 잘못된 내용이 있으면 댓글 또는 메일주시면 신속히 오류처리하겠습니다.

유효범위(scope)

이론

우리는 보통 여러명의 개발자들과 협업을 하며 개발을 진행합니다.
그렇기에 어떠한 것을 명명할때, 같은 이름으로 충돌이 발생 할 수 있습니다.
예를들어,

1
2

int left;
public void left() {}

자세히 보기

JAVA

이 카테고리는 자바를 공부 하며, 익힌 내용을 기록합니다.
책을 보며, 또는 독학을 하므로 잘못된 내용이 있으면 댓글 또는 메일주시면 신속히 오류처리하겠습니다.

객체지향

이론

하나의 결과물을 만들때, 필요한부분을 각각 개발하여, 하나로 사용하고, 또 필요한부분을 가져가 쓰는 방법이 객체지향프로그래밍입니다.

예를 들어보겠습니다.
초창기 컴퓨터는 하나의 기계였습니다..
그림으로 살펴보겠습니다..

자세히 보기