Vue.js+FireBase에서 제작한 영어 학습조합 사이트를 만들었습니다.

이 조합 사이트를 만든 배경

해외 사이트의 공식 문서를 읽고 오류 정보를 확인할 때 반드시 갖춰야 할 영어 기능.
나는 영어를 사용할 수 있는 엔지니어가 되기 위해 영어 학습 응용을 개발했다.
・사이트 제목:StudyTube
　URL : https://english-tube-c340d.web.app/
　GitHub: https://github.com/MASAKi-cell/Study-Tube
・테스트 계정
이메일 주소: [email protected]
암호:English
※ 이용자는 Firebase를 사용하는 Authentication을 관리합니다.
※ 방문객 등록 기능도 있습니다.

기술을 사용하다

・프런트엔드: Vue.js(VueRouter,Vuex,Vuetify,axios)、HTML、Sass
• 백엔드: Firebase(Hosting, Authentication)
기타 도구
・VScode、Developer Tools
・소스 코드 관리: GiitHub
· 진행 관리: Trello

주요 기능 목록

• 신규 회원 로그인 기능, 로그인/게스트 로그인, 로그아웃, 구글 계정 로그인 기능
• New York Times API를 사용하여 영어 기사를 표시하는 기능
· Youtube Video API에서 애니메이션 키워드를 읽어들여 표시

요점

・Vue.Vuex를 사용하여 js의 데이터 흐름 관리
• 단일 페이지 애플리케이션을 위한 Vue Router 사용
・Vue.js의 개발 환경을 빠르게 시작할 수 있는 Vue CLI 사용
• Firebase Authentication의 Google 계정 인증 기능 사용
· Firebase Hosting 을 사용하는 애플리케이션을 공개적으로 사용
· 유튜브 API를 통한 동영상 검색 기능
· New York Times API를 통한 기사 표시 기능

1. 첫 번째 뷰

・ 최초 방문 시 본 사이트의 설명문이 기재된 화면이 표시될 것이다.
・머리글은 vue-router를 사용하여 router-Link에서 선택한 화면을 표시합니다.

2. 신규 회원 로그인/로그인 기능

・페이지 맨 오른쪽에 회원 로그인 기능과 로그인 기능의 버튼이 설정되어 있다.
・ 로그인하면 애니메이션 검색 및 학습 레코드 표시줄이 표시됩니다.
·신규 회원 가입 시 서버와 HTTP 통신을 위해 axios를 사용했다.
새 로그인이 완료되면 로그인 버튼을 눌러 등록된 메일 주소와 비밀번호를 입력하여 로그인하십시오.
• 로그인한 사용자는 Firebase의 Authentication을 사용하여 사용자를 관리합니다.

3.google 계정 로그인 기능

· 구글 계정의 로그인 기능이 추가되었습니다.
· state 상login사용자를 저장하고 action으로 로그인하여 로그아웃 상태를 관리합니다.

4. 비디오 검색

・ Youtube API에서 가져온 비디오를 표시할 수 있습니다.
・ 검색 테이블에 키워드를 입력하여 비디오를 검색할 수 있습니다.

5. 글 표시 기능

• New API에서 가져온 기사를 표시할 수 있습니다.

6. 학습 기록 기능

・매일 학습 상황을 기록할 수 있다.

개발을 통해 배운 것

・firebase 사용법
Firebase를 사용하여 인증, 디버깅 등 백엔드를 실현할 수 있습니다.
・ Vuex의 사용법
처음에는 Vuex에 대해 잘 모른다는 인식이 있었지만, 실제로 사용해보니 다양한 기능을 할 수 있었다.
・Vue.js에서 SPA 만드는 방법
SPA의 사전 준비부터 페이지별 제작, Vou-router 조정이 가능하다.

향후 구현할 기능

• 필터링 조건의 검색 기능
• 괜찮은 기능
• 컬렉션 저장 기능

참고 교재

공식 문서

・axios의 API 사용 예
・인증된 간편한 채팅 만들기!
응용 프로그램을 만들기 위해 먼저 공식 문서를 참고했다.

Vue.js에서 SPA 만드는 방법

・Vue.js: [SPA]의 제작 방법을 간단명료하게 정리한 [초보자에게 적합]
A:SPA의웹사이트를상세히기재했습니다.

주기 연결

vue.눈으로 js의created와mounted의 차이를 보고 이해하다
⇒ vue.js의created와mounted의 차이는 모르겠지만 이 사이트를 보고 이해를 깊게 했습니다.

Vue.참고서적&영상학습

・Vue.ZET에서 js의 요점과 노하우를 아는 책.
　⇒ Vue.js에 대해 진지하게 설명했어, Vue.나는 js의 초보자들에게 딱 좋은 내용이라고 생각한다.
・전문적인 웹 프로그래밍js
● 역시 뷰.제이스 책이에요.
・초Vue.js2 전체 패키지(Vue Router, Vuex 포함)
　⇒ Vue.JS 기반부터 가상 DOM, Vue CLI 개발 방법 등 Vue를 사용합니다.나는 js의 전체 내용을 배웠다.
・Vue.js+Firebase로 제작된 단일 페이지 응용 프로그램
A:Firebase Authentication을 사용한 인증 기능을 주로 배웠습니다.
・Learn how to build app with API in Vue js tutorial
해외 동영상이지만 웹페이지 API는 Vue입니다.js를 통해 설치 방법에 대한 이해를 깊이 있게 하였다.
・파이썬은 뽀글뽀글 엄마 API 사용
A:웹 API에 대해 설명합니다.
・초보자를 위한 유튜브 API 입문~기본편~
♦ Youtube API 설치 방법
・Vue.js와 Axios라면 아주 간단하게 할 수 있어요!외부 API를 사용한 웹 응용 인스턴스
□ axios에서 New York Times API를 구현하는 방법에 대해 설명합니다.신의 소식입니다.

반성점

・axios를 이용하여 HTTP 요청과 서버에 대한 지식을 깊이 있게 할 필요가 있다고 생각합니다.
· 지금까지 GiitHub Desktop에서 GiitHub에 접근했는데 이번에는 명령 프롬프트를 사용해 코드를 관리합니다.
다만 어떻게 해야 할지 몰라 이해를 더 깊게 할 필요가 있다고 생각했다.
・ Vuex를 이용한 상태 관리를 더욱 공부한다.

최후

Vue.저는 js의 초보자입니다. 코드에 많은 오류가 있다고 생각합니다. 지적해 주시면 좋겠습니다.
끝까지 읽어주셔서 감사합니다.