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

코드 작성하기!

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

우리의 미래 App 아키텍처

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

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

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

1-1 로그인 View

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

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

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

Read More

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

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

Vue & Firebase

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

Vue.js란 무엇인가?

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

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

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

Read More

SEO(Search Engine Optimization) 검색 엔진 최적화 1편

SEO

SEO의 중요성

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

Read More

알고리즘

용어정리

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


알고리즘

알고리즘

알고리즘이란?

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

Read More

java 유효범위(scope)

JAVA

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


유효범위(scope)

Scope

이론

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

1
2
int left;
public void left() {}

Read More

객체지향 언어 자바 이론

JAVA

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


객체지향

OOP

이론

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

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

Read More

Java Data Type

JAVA

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


데이터 타입

data
프로그래밍에서 데이터는 데이터형식, 메모리의 소비크기, 표현가능범위에 따라 알맞게 사용해야합니다.
그 내용은 데이터의 형식을 알아보면서 알아보겠습니다.

Read More

Java 숫자와 문자

JAVA

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


자바(JAVA) 숫자와 문자

text

System.out

숫자와 문자를 접하기전에 우리는 결과물을 확인 할 방법을 먼저 알아보겠습니다.
자바는 웹브라우저가 아닌 JVM을 이용해 실행합니다. CMD나 터미널등을 통해서도 코드작성이 가능하지만, **IDE(Integrated development environment)**를 통해 편하게 개발을 할 수 있습니다.
IDE에는 여러가지가 있겠지만, 저는 jetbrain사의 intellij를 사용하고 있습니다.
개발시 각자 본인에 맞는 IDE를 찾아보시길 권장합니다.
IDE에서는 Run기능을 통해 실행하여 작성한 코드의 컴파일 결과를 확인 할 수 있습니다.

Read More

Java 시작

JAVA

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


자바(JAVA) 시작하기

JAVA

자바를 시작하게된 계기

프론트 엔드 개발자로써 예전부터 패러다임이었던 OOP(Object-Oriented Programming) 즉 객체지향프로그래밍은 모든 개발자에게 접할 수 밖에 없는 숙제 일것이다.
개발을 시작한지 얼마 되지 않은 필자는 지금까지 해왔던 절차지향프로그래밍을 떠나 객체지향프로그래밍을 접하기 위해, 공부를 하던 중 객체지향프로그래밍의 본좌인 JAVA를 공부하고 싶은 호기심이 생겼다.
최근 개발 패러다임이라면 함수형 프로그래밍도 있겠지만, 좀 더 아직까진 대중적인 패러다임인 객체지향 프로그래밍을 시작하기로 했다.

Read More