0. 목차
(1) 개발 환경 구축(프론트) : https://okane-on-cliff.tistory.com/247
(2) 개발 환경 구축(백) : https://okane-on-cliff.tistory.com/248
(3) 코드 작성 (프론트) : https://okane-on-cliff.tistory.com/249
(4) 코드 작성 (백) : https://okane-on-cliff.tistory.com/250
(5) 배포 : https://okane-on-cliff.tistory.com/251
1. 깃
(프론트) : https://github.com/okanekudasai/picturePractice_front.git
(백) : https://github.com/okanekudasai/picturePractice_Back.git
2. 프로젝트 주소
http://43.201.83.68:9997/picturePractice/
인스턴스가 뻗음
3. 프로젝트 브리핑
페이지는 CSR로 구현하였다.
사진은 서버에 저장된 사진을 BASE64 형식으로 전송하여 자바스크립트에서 읽는 것으로 하였다.
전체삭제는 관리자만 할 수 있도록 하였다 관리자인지는 JWT를 이용해 판단하도록 구현하였다.
4. 시연 영상
5. 프로젝트 설명
(1) 첫 화면
프로젝트를 키면 서버에 저장된 사진들이 보여진다 현재는 서버에 아무것도 저장되어 있지 않아서 아무것도 표시할 것이 없다.
또한 현재 저장된 사진들의 총 용량이 가장 처음 부분에 적혀있고
다음 파일을 선택할 수 있는 버튼이 있다.
그 파일을 전송할 수 있는 버튼과
서버의 사진을 모두 삭제 할 수 있는 관리자용 버튼이 있다.
(2) 파일 선택 시
파일 선택시 파일을 선택할 수 있는 창이 뜨고 열기를 하면 선택된 파일이 적혀 있음을 알 수 있다.
(3) 파일 전송시
파일을 전송하면 총 용량이 늘어나고 사진 이름, 사진, 다운로드 버튼이 생성 된다.
(4) 두개의 파일이 저장된 모습
(5) 전체 삭제 버튼 누름
알 맞는 키를 입력하면 토큰이 생성되어 sessionStorage에 저장되고 그 토큰의 유효성을 검사하여 삭제가 이루어진다.