Vue-CRUD
vue-crud
한 해를 마무리하면서 12월 달은 VueJS에 대해 공부하고 있습니다. 천천히 API에 대해 하나하나 알아보며 Vue에 적용시킬 수 있는 것인지 판별하기 위해 'BJ API'로 배너를 명칭하였고 실제 프로젝트 명은 vue-crud입니다.
다양하고 학습을 목적으로 두었기 때문에 프로젝트의 큰 목표는 없으며 꾸준한 개발을 하여 Vue가 익숙해지도록 학습하는 것이 현재 목표로 두고 있습니다.
작업환경
- front-end : vsCode, @vue/cli 4.5.8
- back-end : @egovFramework 3.9.0, JavaSDK 1.8
- PostgreSQL
화면구성
1. 소개(진행중)

- 버튼을 통한 하이퍼링크 이동(페이스북, Velog, Instagram)(완료)
- Facebook Graph API를 이용한 최신 피드 3개를 보여줄 예정
2. 로그인

- 서버와 연결하여 결과값을 true/false를 받을 수 있다.
3. 제품

- 서버와 연결된 데이터베이스를 통해 리스트를 가져온다.
- 수정, 삭제, 등록이 가능하지만 서버로직은 추가하지 않았다. (로컬만 동작)
4. 영화검색

- 패스트캠퍼스의 영화검색 프로젝트를 따와 코딩하였다.
- 영화 데이터는 공유데이터를 이용하였다.
5. 설정

- 카테고리는 화면에 따라 움직이게 된다.
- 카테고리의 매뉴를 추가할 수 있는 화면이다.
- 카테고리의 매뉴들을 수정 및 삭제가 가능하며 리스트에서 내역들을 확인 가능하다.
- 아이콘은 기본적으로 mdi-menu가 디폴트이다.
6. 오시는 길

- KakaoMap API를 이용했다.
- 커스텀 오버레이를 통해 태그를 화면 위에 띄어 하이퍼링크를 주었다.