📖 목차
🔍 Introduction
📹 Demo
👨👩👦👦 Launch
💻 Architecture
💡 Tech Stack
🗂️ Database
📗 API
🛠️ Log
📂 Directory Structure
👨👩👧👧 Team
기존의 메모장들에는 잡다한 많은 기능들이 탑재되어있어 사용에 어려움을 느꼈습니다.
이에 본연의 기능을 살리고 남녀노소 누구나 쉽게 이용 가능한 메모장을 만들어보자는 생각에 아이디어를 얻었습니다.
불필요한 기능을 제거하고, 간편하고 직관적인 디자인으로 주요 기능의 접근성을 높였습니다.
또한 눈이 편안한 색감을 선정하여 귀엽고 심플하게 디자인하였습니다.
개인정보 필요없이 생성할 id와 pw만 입력하여, 쉽고 빠르게 회원가입이 가능합니다.
이로써 회원가입의 거부감을 줄이고, 어느 기기에서든지 접속하여 계정별로 메모를 관리할 수 있습니다.
여러 사람이 공동으로 메모를 작성 및 관리할 수 있는 '공동 메모' 기능을 추가하였습니다.
대학생 팀플이나 회의 내용 작성으로도 적합합니다.
광고 삽입은 접근성을 떨어뜨리기에, 수익창출 없이 무료로 이용 가능하도록 하였습니다.
Memo list
View memo
Invite friends
메모들 목록을 나열합니다.
메모 내용을 조회합니다.
메모에 친구들을 초대하거나, 함께 새로운 메모를 작성합니다.
Login
SignUp
Change pw
로그인 합니다.
회원가입 합니다.
계정의 비밀번호를 변경합니다.
Memo list
New memo
View memo
메모들 목록을 나열합니다.
새로운 개인 메모를 작성합니다.
메모 내용을 조회합니다.
Friend list
Received list
Invite friends
친구들 목록을 나열합니다.
친구요청 수신 목록을 조회합니다.
메모에 친구들을 초대하거나, 함께 새로운 메모를 작성합니다.
User profile
Notice
App guide
회원정보를 조회합니다.
공지사항 페이지 입니다.
모바일앱 다운로드 안내 페이지 입니다.
테스터
트래픽
웹과 앱 분야에 모두 테스터를 모집하여, 특정 시간대 10분 동안의 동시접속 트래픽 변화를 측정하였습니다.
테스터 30명의 동시접속 결과, CPU 사용률이 0.7%->6%까지 올랐음을 확인했습니다. 이로써 최대 500명의 동시접속 시 CPU 사용률이 100%에 도달할 것임을 알 수 있었고, 인스턴스를 확장함으로써 예방 조치를 취할 수 있었습니다.
에브리타임
인스타그램
대학생 커뮤니티에 홍보글을 게시하여, HOT 게시물로 선정되었습니다.
SNS에 홍보글을 게시하여, 다양한 연령대의 접근성을 고려했습니다. 그 결과, 100명 이상의 이용자에게 서비스를 제공 중입니다.
< Operational Architecture >
- Frontend Deployment : AWS Amplify
- Backend Deployment : AWS Elastic Beanstalk
- Database : AWS RDS
- DNS : AWS Route53
- Traffic : AWS Application Load Balancer, EC2 Auto Scaling (CPUUtil 30% ~ 70%)
- Monitoring : AWS CloudWatch, Spring Logback, ExceptionHandler
- Version control : AWS S3, Github
Frontend
Backend
Security
Other
- Frontend : React, React Native, JavaScript
- Backend : Spring Boot, Java, Spring Security, JSON Web Token
- Database : MySQL
- Deployment : Amazon AWS
- API Tool : Postman
- API Documentation : Swagger
Frontend_Web : Open!
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
│ ├── memoicon128.png
│ ├── memoicon192.png
│ ├── memoicon512.png
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── assets
│ ├── fonts
│ │ ├── BMJUA_ttf.ttf
│ │ ├── Kalam-Bold.ttf
│ │ ├── Kalam-Light.ttf
│ │ └── Kalam-Regular.ttf
│ └── images
│ └── user.png
├── components
│ ├── List
│ │ ├── FriendList.jsx
│ │ ├── InviteFriendList.jsx
│ │ ├── MemoList.jsx
│ │ ├── MemoListItem.jsx
│ │ ├── SelectFriendList.jsx
│ │ └── SenderList.jsx
│ ├── Modal
│ │ ├── ConfirmModal.jsx
│ │ ├── FriendGroupModal.jsx
│ │ └── SendFriendshipModal.jsx
│ ├── Navigation
│ │ ├── LoadingNav.jsx
│ │ ├── NewMemoNav.jsx
│ │ ├── NoLoginNav.jsx
│ │ ├── ReadAndEditMemoNav.jsx
│ │ └── YesLoginNav.jsx
│ ├── Styled
│ │ ├── BasicWrapper.jsx
│ │ ├── HelloWrapper.jsx
│ │ ├── NavWrapper.jsx
│ │ └── OneMemoWrapper.jsx
│ └── UI
│ ├── Checkbox.jsx
│ ├── DropdownCenter.jsx
│ ├── DropdownLeft.jsx
│ ├── DropdownRight.jsx
│ ├── FriendOptionDropdownCenter.jsx
│ ├── IsStarButton.jsx
│ ├── MemoOptionButton.jsx
│ ├── MemoOptionDropdownRight.jsx
│ ├── NewMemoOptionDropdownRight.jsx
│ ├── SearchMemo.jsx
│ └── SortMemo.jsx
├── hooks
│ └── useDetectDropdown.jsx
├── index.css
├── index.js
├── logo.svg
├── pages
│ ├── Etc
│ │ ├── DownloadPage.jsx
│ │ ├── InformationPage.jsx
│ │ └── NoticePage.jsx
│ ├── Friend
│ │ ├── FriendListPage.jsx
│ │ └── SenderListPage.jsx
│ ├── Memo
│ │ ├── MemoListPage.jsx
│ │ ├── NewMemoPage.jsx
│ │ └── ReadAndEditMemoPage.jsx
│ └── User
│ ├── ChangePwPage.jsx
│ ├── LoginPage.jsx
│ ├── SignupPage.jsx
│ └── UserProfilePage.jsx
├── reportWebVitals.js
├── setupTests.js
└── utils
├── CheckToken.js
└── lazyUtil.js
Frontend_App : Open!
├── App.js
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── babel.config.js
├── eas.json
├── package-lock.json
└── package.json
Backend : Open!
└── src
├── main
│ ├── generated
│ ├── java
│ │ └── com
│ │ └── shj
│ │ └── onlinememospringproject
│ │ ├── OnlinememoSpringProjectApplication.java
│ │ ├── config
│ │ │ ├── JwtSecurityConfig.java
│ │ │ ├── SwaggerConfig.java
│ │ │ └── WebSecurityConfig.java
│ │ ├── controller
│ │ │ ├── AuthController.java
│ │ │ ├── FriendshipController.java
│ │ │ ├── MemoController.java
│ │ │ ├── TestController.java
│ │ │ └── UserController.java
│ │ ├── domain
│ │ │ ├── DefaultFriendshipEntity.java
│ │ │ ├── DefaultMemoEntity.java
│ │ │ ├── friendship
│ │ │ │ ├── Friendship.java
│ │ │ │ └── FriendshipJpaRepository.java
│ │ │ ├── memo
│ │ │ │ ├── Memo.java
│ │ │ │ └── MemoJpaRepository.java
│ │ │ ├── user
│ │ │ │ ├── Authority.java
│ │ │ │ ├── User.java
│ │ │ │ └── UserJpaRepository.java
│ │ │ └── userandmemo
│ │ │ ├── UserAndMemo.java
│ │ │ └── UserAndMemoJpaRepository.java
│ │ ├── dto
│ │ │ ├── friendship
│ │ │ │ ├── FriendshipRequestDto.java
│ │ │ │ ├── FriendshipResponseDto.java
│ │ │ │ ├── FriendshipSendRequestDto.java
│ │ │ │ ├── FriendshipSendResponseDto.java
│ │ │ │ └── FriendshipUpdateRequestDto.java
│ │ │ ├── memo
│ │ │ │ ├── MemoInviteResponseDto.java
│ │ │ │ ├── MemoResponseDto.java
│ │ │ │ ├── MemoSaveRequestDto.java
│ │ │ │ ├── MemoSaveResponseDto.java
│ │ │ │ ├── MemoUpdateRequestDto.java
│ │ │ │ └── MemoUpdateStarRequestDto.java
│ │ │ ├── token
│ │ │ │ └── TokenDto.java
│ │ │ ├── user
│ │ │ │ ├── UserIdResponseDto.java
│ │ │ │ ├── UserLoginRequestDto.java
│ │ │ │ ├── UserRequestDto.java
│ │ │ │ ├── UserRequestDtos.java
│ │ │ │ ├── UserResponseDto.java
│ │ │ │ ├── UserSignupRequestDto.java
│ │ │ │ ├── UserUpdateNameRequestDto.java
│ │ │ │ └── UserUpdatePwRequestDto.java
│ │ │ └── userandmemo
│ │ │ ├── UserAndMemoRequestDto.java
│ │ │ └── UserAndMemoResponseDto.java
│ │ ├── jwt
│ │ │ ├── JwtAccessDeniedHandler.java
│ │ │ ├── JwtAuthenticationEntryPoint.java
│ │ │ ├── JwtFilter.java
│ │ │ └── TokenProvider.java
│ │ ├── response
│ │ │ ├── GlobalExceptionHandler.java
│ │ │ ├── ResponseCode.java
│ │ │ ├── ResponseData.java
│ │ │ ├── exception
│ │ │ │ ├── FriendshipBadRequestException.java
│ │ │ │ ├── FriendshipDuplicateException.java
│ │ │ │ ├── LoginIdDuplicateException.java
│ │ │ │ ├── MemoSortBadRequestException.java
│ │ │ │ ├── NoSuchFriendshipException.java
│ │ │ │ ├── NoSuchMemoException.java
│ │ │ │ ├── NoSuchUserException.java
│ │ │ │ └── UserAndMemoDuplicateException.java
│ │ │ └── responseitem
│ │ │ ├── MessageItem.java
│ │ │ └── StatusItem.java
│ │ ├── service
│ │ │ ├── FriendshipService.java
│ │ │ ├── MemoService.java
│ │ │ ├── UserAndMemoService.java
│ │ │ ├── UserService.java
│ │ │ ├── auth
│ │ │ │ ├── AuthService.java
│ │ │ │ └── CustomUserDetailsService.java
│ │ │ └── logic
│ │ │ ├── FriendshipServiceLogic.java
│ │ │ ├── MemoServiceLogic.java
│ │ │ ├── UserAndMemoServiceLogic.java
│ │ │ └── UserServiceLogic.java
│ │ └── util
│ │ └── SecurityUtil.java
│ └── resources
│ ├── application-jwt.properties
│ ├── application-mysql.properties
│ ├── application.properties
│ ├── logback-spring.xml
│ ├── static
│ └── templates
└── test
└── java
└── com
└── shj
└── onlinememospringproject
├── OnlinememoSpringProjectApplicationTests.java
└── service
├── MemoServiceTest.java
├── UserAndMemoServiceTest.java
└── UserServiceTest.java
👨👩👧👧 Team (Full Stack)
사현진
Frontend & Backend Developer