'김다미'배우에 대한 팬 운영 사이트. Vue.js, SpringBoot , ORM JPA, Maria DB를 이용.
배우 스케쥴을 관리자가 올려주고 사용자가 댓글을 다는 CRUD 게시판 구현.
AWS S3를 이용한 Profile file upload
관리자에게 건의할 수 있는 옵션 추가. ( + gmail )
모바일 웹으로 개발된 애플리케이션이 특징.
앞단 Vue, 뒷단 Springboot REST API SERVER.
Author 민경재[GGOMJAE]
2020.04.04 ~ ING
- 개인 개발 블로그 링크 https://blog.naver.com/ggomjae/221890680558
1.vue + springboot 연동, Proxy 설정으로 CORS문제 해결
2.vue router - /enter , /board
3.front ----> server.data return ----->front
4.profile component add , router
5.vue-good-table , backend : save.update - service,controller,dto
6.BoardContent Fronted <-> BackEnd, PC,모바일에 따른 @Media 적용 등 [#24] commit 내용
7.JPA hibernate를 이용한 Posts CRUD 기능 구현
8.JPA hibernate를 이용한 댓글 이용 - 단방향 구현, 양방향 안쓴 이유
9.로딩 개선을 위한 Chunk Optimization, MAX 1로 극대화
10.AWS s3를 이용하여 Profile upload - 만약 file을 올리면 기존에 있던 파일 s3 object 삭제11.keep-alive를 이용한 component data 유지 -> 나중에 vuex를 이용하여 수정 예정
12.Gmail SMTP, MailSender을 이용하여 관리자에게 Gmail 보내기
13.Spring Security JWT를 이용한 로그인 구현. 현재 : 로그인 후 JWT 생성 -> 반환 [ 진행 중 ]
14.vue 새로 고침 -> localstorage Token 값 복구
[2020.04.29] :구조 및 1,2,3 스크린샷 [ 계속 update ]
proxy를 이용하여 fronted,back port CORS 해결
devServer : {
proxy : {
'/api' : {
target : 'http://localhost:9001',
ws : true,
changeOrigin: true
},
},
}[2020.05.03] : 4 profile component add , router
vue-router를 이용해 경로에 따른 component load
code splitting를 이용하여 코드 분할
import VueRouter from 'vue-router';
export const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/enter',
component: ()=> import('../views/Enter.vue'),
name: 'Enter'
},
...[2020.05.08] : 5,6 스크린샷
vue-good-table을 이용한 table 구현
Controller,Service,JPA를 이용한 데이터 긁기
[2020.05.11] : 7 JPA hibernate를 이용한 Posts CRUD 기능구현
CRUD 사진과 현재까지의 모든 과정
- /enter 에서 /board로 가는 경로 과정을 이미지화
- 현재 저장되어있는 posts를 보여주는 board
- /save 에서 posts를 저장후 update 된 /board로 가는 경로 과정을 이미지화
- 저장한 posts를 보여주는 /BoardContent 경로에 있는 Content
- /BoardContent 에서 삭제,수정을 통해 Posts Update
[2020.05.14] : 8 JPA hibernate를 이용한 댓글 이용 - 단방향 구현
단반향 으로 구현
양방향 으로 구현 안한 이유 : 개인 블로그 https://blog.naver.com/ggomjae/221965307769
- /ReplySave 경로에서 Reply content 저장후 /boardContent Update
[2020.05.17] : 9 로딩 개선을 위한 Chunk Optimization
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
]
},
filenameHashing: false,
productionSourceMap: false[2020.05.18~19] : 10 AWS s3를 이용하여 Profile upload
-
vue를 통해 file upload, multipart를 이용하여 서버단으로 전송
-
s3Service는AWS S3의 비즈니스 로직을 담당, 파일 조작- service의 upload를 통해 로직 구현
-
Profile upload이기 때문에 기존에 S3에 있던 file 이 있으면 삭제하기 위해 imgPath 전송
keep-alive를 통해 data 유지, data에 있으면 axios로 전송
[2020.05.19] : 11 keep-alive를 이용한 component data 유지
- /Profile에서 File을 올리고 다시 경로를 바꾸면 refrash로 image가 없어지는 형상.
keep-alive를 통해 component data 유지 -> vuex로 다시 바꿀 예정
<keep-alive include="Profile">
<router-view></router-view>
</keep-alive>
[2020.05.28] : 12 Gmail SMTP, MailSender을 이용하여 관리자에게 Gmail 보내기
Gmail SMTP Server를 이용한 메일보내기 구현- 보내는데 5초 정도 걸림
[2020.06.02] : 13 Spring Security JWT를 이용한 로그인 구현. 현재 : 로그인 후 JWT 생성 -> 반환
Vuex를 이용한 JWT 보관 + 새로고침으로 인한 없어짐으로 LocalStorage로 구현mutations + actions를 이용한 Vuex 저장
Spring Security + JWT를 이용한 로그인 구현http webconfig를 이용한 접근에 따른 권한 구현 REST API [아직 구현 중]
[2020.06.03] : 14 vue 새로 고침 -> localstorage Token 값 복구
[store/index.js]
const tokenRefrash = () => {
const accessToken = localStorage.getItem("accessToken");
if (!accessToken) return
alert(accessToken);
axios.defaults.headers.common['Authorization'] = accessToken;
}
tokenRefrash();[2020.06.11] : jwt를 이용한 로그인 + AWS s3 이용한 file upload 까지 영상
https://www.youtube.com/watch?v=-ynV8PHtFPo
README는 간단한 흐름만 파악하도록 코드를 넣었습니다. 완전한 코드는 Git 위의 코드 부분을 봐주세요.
개발 과정을 블로그에 올리면서 개발하고 있습니다. 링크 https://blog.naver.com/ggomjae