More Related Content
What's hot
What's hot (20)
Similar to 5조_최종발표.pptx
Similar to 5조_최종발표.pptx (20)
5조_최종발표.pptx
- 1. 1 SW아카데미 2기 최종발표 5팀 <MyWeatherDiary> FE 오동준 BE 김채운
- 2. Table of Contents 2 I. 개요 프로젝트 참여 인원 소개 프로젝트 소개 II. 프로젝트 설계 기술 스택 개발 툴 Cloud 설계도 III. 프로젝트 주요 기능 유저 일기 활동 IV. 기능 구현 방법 FE BE 배포 V. SW아카데미 회고 오동준 김채운 VI. 시연 영상
- 3. 3 개요 01 프로젝트 참여 인원 소개 프로젝트 소개
- 4. 4 개요 프로젝트 참여 인원 소개 ○ 오동준 ○ 충남대학교 컴퓨터융합학부 4학 년 재학중 ○ 프론트엔드 과정 ○ 프론트엔드, 클라우드 담당 ○ 김채운 ○ 충남대학교 경영학과 졸업 ○ 백엔드 과정 ○ 백엔드, DB, Docker 담당 ○ 홍성빈 ○ 충남대학교 컴퓨터융합학부 재학중 ○ 백엔드 과정 TA ○ 프로젝트 전반에 걸쳐서 많은 도움을 줌. ○ 박광수 ○ 아이티센 그룹 cloit 책임 수석 ○ 아이티센 기업 프로젝트 멘토 ○ 클라우드 구축에 많은 도움을 줌.
- 5. 5 개요 주제 선정 배경 귀찮음 MyData 익명성 일기를 쓰고 싶은 욕구는 있으나. 쓰지 않거나 중간에 포기 서비스가 종료되면, 내가 쓴 일기도 사라짐 `내 정보`를 제공하는 것에 부담
- 6. 6 주제 선정 배경 프로젝트 설명 날씨 = 기분: 기분을 날씨로 표현하는 일기장 주요 컨셉 차별화 요소 간편함 Export 익명 보안 • 간편한 UI • 기분/사진/코멘트를 선택적으로 입력 • 일기 작성 부담 완화 • Key만으로 일기장 접근 • 내 일기는 내 것 • 일기 다운로드 서비스 • 수익모델과 연결 • 사용자 정보를 받지 않는 완전한 익명서비스 • 서버도 사용자를 모름 • 서버에서 해킹이 어려운 Key 제공 • 개인정보가 유출될 일 없음 • 추후, 일기 내용 암호화 계획
- 7. 7 프로젝트 설계 02 기술 스택 개발 툴 프로젝트 설계도
- 8. 8 프로젝트 설계 기술 스택 : BE 개발 언어 / 라이브러리 테스트 JUnit5 DB MySQL Java 17 Spring Boot Spring data JPA Spring Security Restdocs Infra Amazon EC2 Amazon S3
- 9. 9 프로젝트 설계 기술 스택 : FE 프로토타입 Figma 코드 규격 / 스타일 Prettier ESLint 개발 언어 / 라이브러리 Javascript React Redux Toolkit Emotion Axios React Router Dom v6 배포 Amazon EC2
- 10. 10 프로젝트 설계 개발 툴 FE VSCode Vite Yarn Teamwork BE IntelliJ Maven Spring 카카오톡 Notion Github Postman
- 11. 11 프로젝트 설계 Cloud 설계도 ○ AWS를 사용한 2-Tier 시스템 구축 ○ 비용문제로 NAT Gateway를 NAT Instance 로 대체 ○ 과도한 리소스 사용을 방지하기 위하여 LoadBalancer, RDS, 이중화 서버 삭제
- 13. 13 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out key를 입력 후 로그인
- 14. 14 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out Generate Key 선택 일기 주제를 입력 후 키 생성 클릭 키 생성 확인 및 복사 버튼을 눌러서 복사
- 15. 15 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out 이메일 입력 후 전송 버튼을 누르면 해당 이메일로 키 백업
- 16. 16 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out Profile 탭을 눌러서 익명의 사용자 정보 확인 Avatar, nickname 모두 랜덤하게 생성
- 17. 17 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out 클릭 nickname과 일기 주제를 변경 변경된 정보 확인
- 18. 18 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out 일기장이 전부 사라짐
- 19. 19 프로젝트 주요 기능 유저 Login Generate Key Email 전송 유저 정보 조회 유저 정보 수정 일기장 삭제 Log out Log out 됨
- 20. 20 프로젝트 주요 기능 일기 일기 추가 일기 조회 일기 수정 일기 삭제 New Diary 버튼을 클릭 일기 작성 후 작성 버튼 클릭
- 21. 21 프로젝트 주요 기능 일기 일기 추가 일기 조회 일기 수정 일기 삭제 Diary 탭에서 내가 쓴일기 조회 가능
- 22. 22 프로젝트 주요 기능 일기 일기 추가 일기 조회 일기 수정 일기 삭제 일기 마다 옆 에 붙어있는 수정 버튼 클 릭
- 23. 23 프로젝트 주요 기능 일기 일기 추가 일기 조회 일기 수정 일기 삭제 일기 마다 옆 에 붙어있는 삭제 버튼 클 릭
- 24. 24 프로젝트 주요 기능 활동 활동 내역 조회 활동 내역 저장 Activity 선택 Monthly, Yearly 선택
- 25. 25 프로젝트 주요 기능 활동 활동 내역 조회 활동 내역 저장 png로 일기 contribution table을 스크린샷 가능 png, pdf로 내가 쓴 일기 내역 내보 내기 가능
- 27. 27 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ Store에 저장된 상태에 대한 직접적인 변경 방지 ○ 상태를 업데이트 할 때는 무조건 action을 dispatch함. ○ 무분별한 상태 변경을 방지하여 여러 컴포넌트에 일관된 상 태 제공 버그 방지
- 28. 28 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ Props Drilling 현상 방지 ○ 코드 유지 보수의 비용이 절약됨.
- 29. 29 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ Formik을 이용하여 Form 상태들 value를 추적 ○ onSubmit 시 redux store를 update하는 Action 발생
- 30. 30 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ Modal, Snack bar, Tooltip 같은 다채로운 기능들 은 MUI에서 모두 가져다가 씀.
- 31. 31 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ jsPDF를 이용하여 PDF로 내보내기 기능 구현
- 32. 32 기능 구현 방법 FE 상태 관리 Form 상태 관리 CSS library PDF 제작 달력 ○ contribution table, 달력 등은 모두 직접 구현
- 33. 33 기능 구현 방법 BE 도메인 관리 로그인 이미지 처리 Email 전송 ○ Spring Data JPA를 활용해 CRUD 연산 ○ Query 커스터마이징은 주로 Method query를 활용 ○ DB는 Docker image: 기본 schema와 data는 init.sql - 개발 시: docker image - 배포 시: docker-compose SpringDataJPA
- 34. 34 기능 구현 방법 BE 도메인 관리 로그인 이미지 처리 Email 전송 ○ Spring Security와 JWT로 로그인 구현 SpringSecurity
- 35. 35 기능 구현 방법 BE 도메인 관리 로그인 이미지 처리 Email 전송 ○ AWS S3를 이용한 이미지 처리 ○ Client와 Base64로 인코딩된 문자열을 송/수신 ○ AWS S3와 Byte array를 송/수신 AWS S3
- 36. 36 기능 구현 방법 BE 도메인 관리 로그인 이미지 처리 Email 전송 Gmail ○ Gmail SMTP를 통해 전송
- 37. 37 기능 구현 방법 배포 Cloud Domain Docker 프록시 ○ Cloud는 AWS를 이용 ○ 가장 최근에 배웠기에 가장 자세히 알고 무엇보다도 기업 멘토님께서 많이 도와주실 수 있는 CSP라서 선택
- 38. 38 기능 구현 방법 배포 Cloud Domain Docker 프록시 ○ gabia에서 호스팅 도메인 구입 (세일해서 1년에 1900원) ○ AWS Route 53에서 호스팅 영 역을 생성 ○ 레코드 이름에 구매한 도메인 입력 ○ 도메인과 서비스 중인 AWS WEB EC2 IP를 연결 ○ 가비아 도메인 관리에서 네임 서버 에 Route 53에서 알려주는 네임 서버 등록 후 실제 접속이 가능하 기까지 1일 기다림.
- 39. 39 기능 구현 방법 배포 Cloud Domain Docker 프록시 ○ FE와 BE모두 Dockerfile로 애플리케이션을 dockerize해서 Docker hub에 등록하여 AWS EC2 서버에서 다운받아서 동 작시키도록 함. ○ BE는 Jar 파일과 DB를 동시에 띄워야 하기 때문에 Docker-Compose를 이용하여 dockerize를 진행
- 40. 40 기능 구현 방법 배포 Cloud Domain Docker 프록시 웹페이지 요청 API 요청 브라우저 FE 서버 BE 서버 ○ 배포할 때 API 요청주소를 WAS 서버로 지정하면 요청 X ○ 요청주소는 WEB EC2 주소가 되고 vite에서 API 요청 중 proxy가 들어간 path가 존재하면 해당 API의 호스트를 WAS 서버로 변경해서 대신 요청을 날려줌. Proxy
- 41. 41 SW아카데미 회고 05
- 42. 42 SW아카데미 회고 Problem Try Keep - 온라인 수업 뿐만 아니라 오프라인 수업 병행. - TA 특강: 실제 적용 기술 습득 - 기업 프로젝트에서 배운 내용을 팀 프로젝트에 적용 - 강의만으로는 알 수 없는 문제들 경험 - 모르면 언제든 물어볼 수 있는 환경(멘토님, TA님 등) - 24시간 이용 가능한 교육실 및 다과 - 학습시간 보장: 배운 것을 제대로 학습하고 집중할 시간을 아카데미에서 보장 - 기업 프로젝트 일정 안내 시기: 고정된 시간을 미리 공지(2월 초), 학생들이 시간표 조정 - 컨텐츠 최신화: 영상을 다시 찍진 못하더라도, 영상에 사용되었으나 변경/삭제된 기술에 대해 안내 - FE 팀 형성: FE 간 협업 - 공지사항 정리: 카톡 공지사항, 스프레드 시트, SW아카데미 홈페이지 등 오동준 KPT 회고 - 벅찬 일정: SW 아카데미 온/오프라인 수업, 프로젝트, 학부수업 등 - 기업 프로젝트 상세 일정 안내 시기: 학부 시간표가 결정되는 기간에 비해 기업프로젝트의 수업 상세 날짜와 시간 공지기간이 많이 늦음 - 컨텐츠 노후: 2018년 기술, 변경/삭제된 것이 많음 - FE/BE 인원 비대칭으로 인한 FE 협업 부재 - 카톡 공지사항: 매일 올라오는 공지사항을 정리해둔 곳이 없어 불편
- 43. 43 SW아카데미 회고 Problem Try Keep - 빠른 피드백: 문제가 생겼을 때 연락이나 미팅이 빨랐음. - 멘토링: 매주 멘토링을 통해 프로젝트 방향성을 논의 - 프론트 구현: 프론트 구현이 빨라, 백엔드도 열심히 따라감. - 학습 소재의 다양함 - 데드라인 부재: 체계적인 구현 계획이 있었다면 조금 더 많은 부분 을 완성할 수 있지 않았을까 하는 아쉬움이 있다 - 시간 관리의 아쉬움: 여러 할 일들이 많아 시간 관리가 어려웠고, 팀 프로젝트에 많이 쏟지 못해 아쉬웠다. - 초창기에 대략적인 데드라인을 세우고, 자주 미팅을 하면서 구체적인 스케줄을 잡아본다. (구현 속도 향상 기대) - 개인적인 스케줄도 구체적으로 기록하여 시간관리를 한다. 김채운 KPT 회고
- 44. 44 시연 영상 06
- 46. Thank you 46