[개인개발] Laravel+Vue.js로 바둑판 게임 카페를 리뷰할 수 있는 스파 사이트를 만들었습니다!

개요

도쿄도 내 바둑판 게임 카페에서 검색하고 댓글로 달아주는 사이트!
테스트 사용자는 아래에서 가입할 수 있습니다!
[email protected]
password
GitHub에서도 실제 소스 코드를 볼 수 있습니다!
https://github.com/K-taiga/boardgame-reviews

서비스 정보

이번에 이 댓글 사이트를 개발하고자 하는 것은 주로 자신의 프로그래밍 기능을 향상시키는 것이다!
실제 개발 전과 종료 후 눈에 띄게 성장했습니다!
평소에는 주로 서버 쪽이기 때문에
나는 인프라 시설에서 앞부분까지 한 일이 지식의 범위를 상당히 넓혔다고 생각한다.
또 최근 바둑판 게임이 점점 인기를 끌고 자기도 좋아해서 이런 열풍을 일으켰다
이 사이트가 도움이 됐으면 좋겠어요. !
일관이 끝나고 바둑판 게임 카페도 가고 싶어요!
그럼 다음은 구체적인 내용을 설명해 드리겠습니다.
(엔지니어가 겪은 첫해이니 무슨 일이 있으면 지도하고 채찍질하세요.

애플리케이션 개요

서버 측에서 Laravel에 API 설치
프런트엔드에서 Vue를 사용하여 단일 페이지 응용 프로그램으로 설정합니다.

기능 목록

바둑판 게임 카페의 일람표

바둑판 게임 카페 검색 요약

일람에 표시된 모든 바둑판 게임 카페의 정보에서
이름만 다른 배열로 요약을 검색할 수 있습니다.

도쿄 23구마다 바둑판 게임 카페의 일람

루트 매개 변수에서 23개 구역의 id를 수신하여 원래의 범위로 축소

조건에 따라 바둑판 게임 카페를 분류하고 축소

속성 계산을 통해 정렬과 조건을 감시하는option
변경 사항이 있으면 Laravel의 API를 호출하여 SQL을 발행하고 검색

보드게임 커피를 즐겨찾기로 등록(로그인 후에만 해당)

즐겨찾기 단추를 누르면 likes 표에 shop_id 및 user_id 조합으로 저장
그 수를 표시하다.
또 좋아하는 카페는 프로필에서 한눈에 볼 수 있다

바둑판 게임 카페 보기(로그인 후에만 해당)

심사는 반드시 로그인해야만 완성할 수 있다
또한 vue 요소에서 스크롤할 때마다 심사 목록을 읽습니다.

회원 등록

회원 정보 편집(로그인 후에만 해당)

개인 정보 이미지 및 인증 정보 편집 허용
S3의 아이콘 이미지용 디렉터리에 사용자 _id로 저장하고 변경이 있으면 업데이트합니다

탈퇴

인증 정보의 비밀번호를 입력하면 탈퇴할 수 있습니다(가능하면 탈퇴하기 싫습니다

로그인

로그아웃(로그인 후에만 해당)

인프라 구성

인프라 시설은 AWS Elastic Beanstalk를 이용하여 GitHub의 deploy 지점에push 코드를 사용하면 CircleCI가 자동으로 배치됩니다.
또한 사용자의 이미지와 바둑판 게임 카페의 이미지는 S3의 디렉터리를 분리하여 읽는다.

백엔드

기술적 요소

Laravel 6.10.1

Apache

MySQL

개요

백엔드는 Laravel에서 Ajax를 통해 전송되는 데이터만 처리하는 웹 API로 이루어집니다.
또한 모형의 접근기로 가공한 물건을 $appends 속성에 넣고 JSON 데이터로 프론트에 되돌려줍니다.

ER 그림

데이터베이스 개요

사용자 테이블은 아이콘 이미지(S3의 객체 URL)를 저장하는 열을 Laravel 기본값에 추가합니다.
즐겨찾기 테이블과 검토 테이블의 경우 사용자가 만든 관계는 1: N입니다.
보드 게임 카페의 이미지는 당초 여러 개가 가능했는데, 정면에서 카셀로 표시하고 싶어서 다른 테이블로 바꿨다
그림을 줍는 게 힘들어서 1:1이 됐어요.
또 도쿄 23구의 정보는 주인의 참조로 등록된 것일 뿐이다.

프런트 엔드

기술적 요소

Vue.js

Vuex

Vue Router

Vue element

Bulma

개요

상태 관리에서 Vuex를 포획하고 루트에서 Vue router를 포획하며axios에서 비동기 처리 서버의 async/await를 동기화하여 SPA를 실현한다.
기능 일람표에서 로그인 후 사용할 수 있는 기능은 vue 루트의 내비게이션 보호입니다
그냥 URL을 쳐도 안 날아요.
또한 SPA이기 때문에 첫 번째 불러올 때 느려지는 것을 방지하기 위해 웹팩에서 보기마다 분할하여 불러오는 것을 지연합니다.

디자인

디자인에 관해서는 CDN에서 CSS의 프레임워크인 Bulma를 사용하는 것이 아니라 npm에 설치하는 것이다. 신경 쓰이는 부분은 개인이 수정한 것이다.
또한 동작이 있는 부분(로그인/로그아웃 시 토스트 등)은 vue element로 이루어집니다.

반성점

정말 많지만 인프라 주변의 지식이 없는 상황에서 Terraform으로 CI/CD 환경을 구축하는 데 너무 구애되어 한 달 가까이 낭비했다(결과는 하지 못했다.,, 다음에는!)
설계를 제대로 고려하지 않고 만들어져서 착오가 끊이지 않는다
잘못으로 막히면 그것에 집착하는 게 아니에요.
앞으로 갈 수 있는 곳이면 좋겠어요.
만약 다시 정식 문서를 숙독하는 것을 막는다면!이상!

마지막

만든 사람은 혼자였지만, 예전 회사의 동기와 자주 열리는 엔지니어 친구들의 평어와 건의를 얻었기 때문에 완성할 수 있었다(또 실시하고 싶은 기능 추가,,)!
정말 감사합니다 !!
만약 이 기사를 읽고 개인 개발을 시도하고 싶은 사람이 늘었다면 나는 매우 기쁠 것이다!
일관 때문에 외출 못하는 부분 프로그래밍 하세요~!!!!!