📚중고 도서 예약 시스템
서론
모든 코드를 모두 직접 구현한 것은 아니지만 실제로 대학교에 사용하는 서비스를 관리한 일지.
Firebase의 관리자 페이지는 초대를 받아야함
( 구글 email 주소가 필요하다 ! / 담당자에게 연락해야함 )
기존 학번은 8자리로 진행되어 코드의 조건문을 8자리로 설정하면 되었지만 25학번의 조건을 10자리로 늘려 기존 인수인계 받았던 코드의 수정을 하였음.
Firebase의 CLI와 연결하여 FIrebase에 베포하는 법.
처음 firebase 버전과 node.js 버전을 각각 사진에 보이는 버전으로 맞춰줘야함.
( 이것들 보다 상위 버전으로 진행할시 firebase 자체에서 node.js가 이 버전 이후로 지원을 안하는 것으로 알고 있음 )
Firebase 를 install 하거나 다운하거나 연결이 완료되고
이 후에 진행 순서
1. Yarn install
2. cd를 이용해서 kit-fleabook을 통해서 json 위치를 이동한다.
- 이때 제일 처음 환경을 설정할 때
Firebase init hosting - 명령어 사용그럼 파일을 선택하는 곳이 나온다.
이때 What do you want to use as your public directory? 문구가 나온다.
Firebase의 특성상 dist라고 따로 생기는데 public이 아닌 dist라고 입력하여 연결해준다.
나머지는 이런 형식으로 입력해서 init을 완료해준다.
3. init이 완료되면 빌드 전에 코드 수정을 반드시 저장을 확인한다. ( 애 먹었습니다.. )
수정해야할 부분
- src/components/TimeStampPicker.vue:14
- src/pages/BookDetail.vue:168
- src/pages/About.vue 19:67
- Src/reserve/StdInput.vue
2025학번 부터 학번이 10자리로 늘어남에 따라 새롭게 조건을 건 코드
export default {
data() {
const { id } = this.$route.query;
const text = id ? id : sessionStorage.getItem("stdId");
return {
stdId: text ? text : "",
errMessage: ""
};
},
methods: {
onClear() {
sessionStorage.removeItem("stdId");
this.stdId = "";
},
async onSearch() {
if(!(this.stdId.length === 8 ||this.stdId.length === 10)){
this.errMessage = "올바른 학번을 입력하세요"
return
}
sessionStorage.setItem("stdId", this.stdId);
this.$router.push({ path: "reserve", query: { id: this.stdId } });
},
},
};
</script>
이제 우리가 수정할 코드들이 모두 완료되었으면 npm run build를 진행한다.
- 주의 ⚠️ : 수정된 파일은 npm run build 전에 반드시 파일을 저장한다 ! ( command + s or ctrl + s )
이 후 베포를 firebase deploy을 입력해 배포를 완료한다.
!! 주의 사항
App 파일들이 외부 안에 또 같은 이름을 가진 디렉토리가 있을 것이다.
우리는 수정을 할 때 반드시 내부에 있는 디렉토리를 변경시켜야 베포 후에 사이트가 제대로 작동한다 =.=
Fire base과 또한 완료가 되면 kit-fleaboook 파일에 dist가 뿅하고 생긴다.
그럼 성공한겁니다 !
## 중고도서 예약 시스템
- Book detail page -> wooseong
- Else page -> bepyan
- Backend -> oune
yarn install
yarn serve
### 플러그인
- vue
- vuetify
- axios
### 사용된 것
- 상속 v-bind: v-on:
- Vue watch
- Infinity Scroll
- Transition-group
- v-skeleton-loader, v-progress-circular
- v-parallax
- v-text-field, v-container, v-card, v-dialog 등을 통한 레이아웃 구성
- vuetify css class를 통한 스타일 구성
- v-slot
){kind=link}