2. Table of Contents
2
I. 개요
프로젝트 참여 인원 소개
프로젝트 소개
II. 프로젝트 설계
기술 스택
개발 툴
Cloud 설계도
III. 프로젝트 주요 기능
유저
일기
활동
IV. 기능 구현 방법
FE
BE
배포
V. SW아카데미 회고
오동준
김채운
VI. 시연 영상
4. 4
개요
프로젝트 참여 인원 소개
○ 오동준
○ 충남대학교 컴퓨터융합학부 4학
년 재학중
○ 프론트엔드 과정
○ 프론트엔드, 클라우드 담당
○ 김채운
○ 충남대학교 경영학과 졸업
○ 백엔드 과정
○ 백엔드, DB, Docker 담당
○ 홍성빈
○ 충남대학교 컴퓨터융합학부 재학중
○ 백엔드 과정 TA
○ 프로젝트 전반에 걸쳐서 많은 도움을
줌.
○ 박광수
○ 아이티센 그룹 cloit 책임 수석
○ 아이티센 기업 프로젝트 멘토
○ 클라우드 구축에 많은 도움을 줌.
5. 5
개요
주제 선정 배경
귀찮음 MyData 익명성
일기를 쓰고 싶은 욕구는 있으나.
쓰지 않거나 중간에 포기
서비스가 종료되면, 내가 쓴 일기도 사라짐 `내 정보`를 제공하는 것에 부담
6. 6
주제 선정 배경
프로젝트 설명
날씨 = 기분: 기분을 날씨로 표현하는 일기장
주요 컨셉
차별화 요소
간편함 Export
익명 보안
• 간편한 UI
• 기분/사진/코멘트를 선택적으로 입력
• 일기 작성 부담 완화
• Key만으로 일기장 접근
• 내 일기는 내 것
• 일기 다운로드 서비스
• 수익모델과 연결
• 사용자 정보를 받지 않는 완전한 익명서비스
• 서버도 사용자를 모름
• 서버에서 해킹이 어려운 Key 제공
• 개인정보가 유출될 일 없음
• 추후, 일기 내용 암호화 계획
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
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
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 회고