Nuxt.js, Rails API를 분리하여 완벽한 SPA 포트폴리오를 만들었습니다.
소개
이번에는 Vue.js의 프레임 워크인 Nuxt.js를 배우고 Rails API와 결합하여 웹 앱을 만들려고했습니다.
이 기사에서는 포트폴리오의 내용에 더해 기능을 구현하는데 있어서 고안한 일이나 고생한 것, 개발을 통해서 느낀 것 등에 대해서도 전할 수 있으면 좋겠습니다.
앱 개요
간편하게 학습 기록이나 되돌아 볼 수 있는 학습 관리 앱입니다.
"매일 어딘지 모르게 가득.."
"하루의 되돌아가는 것이 귀찮아서 망설임."
"학습 동기 부여를 유지할 수 없습니다 .."
같은 문제에 대해,
“유저가 보다 쾌적하게 사용할 수 있다”, “어쨌든 간편하고 심플”
라는 개념을 바탕으로 설계함으로써 학습 기록을 붙이는 장애물을 낮추어 습관화를 촉진하고 과제를 해결할 수 있도록 만들었습니다.
또, 나 자신 무언가의 시험에 임할 때에는 학습 관리 어플을 활용해 왔습니다만,
게다가 「심플하고 사용하기 쉽다」그리고 「더 많은 이런 기능이 있으면 좋겠다」라고 느끼고 있던 것을 집약해, 이번 포트폴리오에 담았습니다.
덧붙여 "공부"라는 단단한 이미지보다 "육성 게임 감각"으로 매일의 학습에 임해 주었으면 한다는 생각으로부터
본 앱에서는 “학습 항목”이 아니라 “스킬”이라는 명칭을 사용하고 있습니다.
사용 기술
프런트 엔드
Vue.js(Nuxt.js) 2.14.7
자바스크립트
HTML/CSS/Vuetify
백엔드
Ruby 2.6.6
Rails API 6.0.3.4
프런트 엔드와 백엔드의 연결
Axios
Auth Module
기능 목록
사용자 등록 관련 (devise_token_auth / auth module / axios/ vuetify)
신규 등록 기능
로그인, 로그아웃 기능
이메일 주소 변경 기능
평가판 기능 (게스트 사용자 등록 기능)
스킬 설정 관련 (axios / vuex / vuetify)
사용자에게 묶는 스킬의 일괄 등록 기능
학습 기록 관련 (axios / vuex / vuetify)
사용자의 스킬에 묶는 학습 시간의 일괄 등록 기능
학습 시간 표시 기능
스킬 편집 관련 (axios / vuex / vuetify)
스킬 추가, 삭제 기능
작업 관리 관련 (axios / vuex / vuetify)
작업 쓰기, 일괄 등록 기능, 일괄 삭제 기능
작업 편집 기능
캘린더 관련 (axios / vuex / vuetify)
캘린더 표시 기능
학습 시간에 따른 각 날짜의 배경색 표시 기능
각 날짜의 학습 시간 표시 기능
차트 관련 (vue-chartjs / axios / vuex / vuetify)
막대 그래프 표시 기능
월별 학습 시간 표시
원형 차트 표시 기능
스킬별 학습시간 표시
스킬별 학습 시간의 랭킹 표시 기능
기타
플래시 메시지 기능
오류 메시지 기능
밸리데이션 기능
로그인 전후의 리디렉션 기능
이후, 주요 기능의 상세나 궁리한 점에 대해 소개해 갑니다!
학습 기록 기능
개요
각 스킬에 대해 학습 시간을 입력할 수 있습니다.
하루에 여러 번 입력할 수도 있습니다. 궁리한 점
①학습시간 입력에 이르기까지의 흐름을 간략화
로그인하자마자 각 스킬의 일람과 학습 시간의 입력 폼을 표시하는 것으로, 학습 시간 입력에 이르기까지의 흐름을 최대한 생략하고, 번거롭게 학습 기록을 붙일 수 있도록 했습니다.
Ramp Up : 로그인 → 학습 시간 입력
모 유명 서비스 : 로그인 → 학습 기록 버튼 → 학습 항목 선택 → 학습 시간 입력
②배색
앱 전체에도 말할 수 있는 것입니다만, 주로 취침전에 사용하는 것을 상정해 다크 모드 사양으로 하고 있습니다.
특히 유저가 반드시 사용하는 것을 상정한 기능이기 때문에, 블랙을 베이스로 한 모노톤의 색만을 사용했습니다.
작업 관리 기능
개요
작업을 관리하는 메모입니다.
학습에 착수할 때의 「어라?오늘 이 후에 무엇을 했었는가?」를 없애기 위해서 작성했습니다.
다음과 같은 흐름에서의 이용을 상정하고 있습니다.
하루의 끝에 다음날의 과제를 내보내기 → 학습에 착수할 때 과제를 확인하고 하나하나 임한다. 궁리한 점
①간편함
메모 대신 부담없이 사용할 수 있도록 쓴 작업을 일괄 저장, 삭제할 수 있도록 했습니다.
편집 기능도 준비해 태스크 하나 하나에 대한 변경도 할 수 있도록 하고 있습니다.
② 좋아하는 장소에 쓸 수 있다
입력한 태스크를 순서대로 표시하는 것이 아니라, 쓴 부분에 태스크가 표시되도록 하고 있습니다.
실제로 16분할한 A4용지에 쓰는 감각이나 뒤틀림의 메모를 붙이는 감각을 재현할 생각으로 실장했습니다.
캘린더 기능
개요
학습 시간을 확인하는 캘린더입니다.
확실히 보면 학습 시간을 파악할 수 있으며 각 날짜를 클릭하여 그 날의 학습 시간을 확인할 수 있습니다.
Reference
이 문제에 관하여(Nuxt.js, Rails API를 분리하여 완벽한 SPA 포트폴리오를 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Kenchiki/items/0bee2f900545ca950106
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
간편하게 학습 기록이나 되돌아 볼 수 있는 학습 관리 앱입니다.
"매일 어딘지 모르게 가득.." "하루의 되돌아가는 것이 귀찮아서 망설임." "학습 동기 부여를 유지할 수 없습니다 .." 같은 문제에 대해, “유저가 보다 쾌적하게 사용할 수 있다”, “어쨌든 간편하고 심플” 라는 개념을 바탕으로 설계함으로써 학습 기록을 붙이는 장애물을 낮추어 습관화를 촉진하고 과제를 해결할 수 있도록 만들었습니다. 또, 나 자신 무언가의 시험에 임할 때에는 학습 관리 어플을 활용해 왔습니다만, 게다가 「심플하고 사용하기 쉽다」그리고 「더 많은 이런 기능이 있으면 좋겠다」라고 느끼고 있던 것을 집약해, 이번 포트폴리오에 담았습니다. 덧붙여 "공부"라는 단단한 이미지보다 "육성 게임 감각"으로 매일의 학습에 임해 주었으면 한다는 생각으로부터 본 앱에서는 “학습 항목”이 아니라 “스킬”이라는 명칭을 사용하고 있습니다. 사용 기술 프런트 엔드 Vue.js(Nuxt.js) 2.14.7 자바스크립트 HTML/CSS/Vuetify 백엔드 Ruby 2.6.6 Rails API 6.0.3.4 프런트 엔드와 백엔드의 연결 Axios Auth Module 기능 목록 사용자 등록 관련 (devise_token_auth / auth module / axios/ vuetify) 신규 등록 기능 로그인, 로그아웃 기능 이메일 주소 변경 기능 평가판 기능 (게스트 사용자 등록 기능) 스킬 설정 관련 (axios / vuex / vuetify) 사용자에게 묶는 스킬의 일괄 등록 기능 학습 기록 관련 (axios / vuex / vuetify) 사용자의 스킬에 묶는 학습 시간의 일괄 등록 기능 학습 시간 표시 기능 스킬 편집 관련 (axios / vuex / vuetify) 스킬 추가, 삭제 기능 작업 관리 관련 (axios / vuex / vuetify) 작업 쓰기, 일괄 등록 기능, 일괄 삭제 기능 작업 편집 기능 캘린더 관련 (axios / vuex / vuetify) 캘린더 표시 기능 학습 시간에 따른 각 날짜의 배경색 표시 기능 각 날짜의 학습 시간 표시 기능 차트 관련 (vue-chartjs / axios / vuex / vuetify) 막대 그래프 표시 기능 월별 학습 시간 표시 원형 차트 표시 기능 스킬별 학습시간 표시 스킬별 학습 시간의 랭킹 표시 기능 기타 플래시 메시지 기능 오류 메시지 기능 밸리데이션 기능 로그인 전후의 리디렉션 기능 이후, 주요 기능의 상세나 궁리한 점에 대해 소개해 갑니다! 학습 기록 기능 개요 각 스킬에 대해 학습 시간을 입력할 수 있습니다. 하루에 여러 번 입력할 수도 있습니다. 궁리한 점 ①학습시간 입력에 이르기까지의 흐름을 간략화 로그인하자마자 각 스킬의 일람과 학습 시간의 입력 폼을 표시하는 것으로, 학습 시간 입력에 이르기까지의 흐름을 최대한 생략하고, 번거롭게 학습 기록을 붙일 수 있도록 했습니다. Ramp Up : 로그인 → 학습 시간 입력 모 유명 서비스 : 로그인 → 학습 기록 버튼 → 학습 항목 선택 → 학습 시간 입력 ②배색 앱 전체에도 말할 수 있는 것입니다만, 주로 취침전에 사용하는 것을 상정해 다크 모드 사양으로 하고 있습니다. 특히 유저가 반드시 사용하는 것을 상정한 기능이기 때문에, 블랙을 베이스로 한 모노톤의 색만을 사용했습니다. 작업 관리 기능 개요 작업을 관리하는 메모입니다. 학습에 착수할 때의 「어라?오늘 이 후에 무엇을 했었는가?」를 없애기 위해서 작성했습니다. 다음과 같은 흐름에서의 이용을 상정하고 있습니다. 하루의 끝에 다음날의 과제를 내보내기 → 학습에 착수할 때 과제를 확인하고 하나하나 임한다. 궁리한 점 ①간편함 메모 대신 부담없이 사용할 수 있도록 쓴 작업을 일괄 저장, 삭제할 수 있도록 했습니다. 편집 기능도 준비해 태스크 하나 하나에 대한 변경도 할 수 있도록 하고 있습니다. ② 좋아하는 장소에 쓸 수 있다 입력한 태스크를 순서대로 표시하는 것이 아니라, 쓴 부분에 태스크가 표시되도록 하고 있습니다. 실제로 16분할한 A4용지에 쓰는 감각이나 뒤틀림의 메모를 붙이는 감각을 재현할 생각으로 실장했습니다. 캘린더 기능 개요 학습 시간을 확인하는 캘린더입니다. 확실히 보면 학습 시간을 파악할 수 있으며 각 날짜를 클릭하여 그 날의 학습 시간을 확인할 수 있습니다.
Reference
이 문제에 관하여(Nuxt.js, Rails API를 분리하여 완벽한 SPA 포트폴리오를 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Kenchiki/items/0bee2f900545ca950106텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
