프로젝트 소개
우리들의 물음표, 우물(UMUL) 입니다.
- 우물(UMUL)은 지식을 자유롭게 질문하고, 대화하며, 좋아할 수 있는 SNS 형태의 지식 관리 시스템입니다.
- 직원들의 참여도를 높이기 위해 지식 관리 시스템에 Wiki, Post, 채팅, 추천-즐겨찾기 등의 기능을 구현했습니다.
- 팀 기능인 '조직(Table)’공간을 만들어 공동체 소속감을 바탕으로 사용자의 업무 집중력을 높였습니다.
- 빠르고 쉽게 얻는 지식을 바탕으로 문제 해결력을 높여 기업 경쟁력을 높이는 것이 UMUL의 목표입니다.
- 우물에 모여 지식을 채우고, 자유로이 잡담을 나눠보세요!
팀원 구성
⛵ 이경민
- Project Manager
- 일정 관리, 기획 문서 정리, 일일 및 멘토링 회고 정리, 의견 수립 및 전달, README-Wiki 작성, PPT 작업, 발표
- 구현 기능
- 검색 기능 : Post-Wiki 검색, 검색 로그 기록 및 출력, 초성 검색, title 검색, 옵션 선택 등
🚤김민우
🛥️심규혁
- Agile Coach
- 팀 의견 수립 및 전달, 팀 규칙 설정, 발표
- 구현 기능
⛴️박대호
- Git Manager
- 형상 관리 계획 수립, 형상 관리 활동 검토, Tag/Relese 관리
- 구현 기능
- Wiki 기능, 페이징 기능, 무한 스크롤 기능
01 개발 환경
✔ Backend |
|
Solution Stack |
Language |
![](https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white) ![](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=Python&logoColor=white) |
Framework |
![](https://img.shields.io/badge/springboot-6DB33F?style=for-the-badge&logo=springboot&logoColor=white) |
Database |
![](https://img.shields.io/badge/mariadb-003545?style=for-the-badge&logo=mariadb&logoColor=white) |
Cloud Service |
![](https://img.shields.io/badge/amazonec2-FF9900?style=for-the-badge&logo=amazonec2&logoColor=white) ![](https://img.shields.io/badge/amazonroute53-8C4FFF?style=for-the-badge&logo=amazonroute53&logoColor=white) |
Server |
![](https://img.shields.io/badge/nginx-009639?style=for-the-badge&logo=nginx&logoColor=white) |
✔ Frontend |
|
Solution Stack |
Language |
![](https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=white) ![](https://img.shields.io/badge/css3-1572B6?style=for-the-badge&logo=css3&logoColor=white) |
Framework |
![](https://img.shields.io/badge/vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white) |
Design System |
![](https://img.shields.io/badge/bootstrap-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white) ![](https://img.shields.io/badge/fontawesome-538DD7?style=for-the-badge&logo=fontawesome&logoColor=white) |
✔ CI/CD |
Solution Stack |
![](https://img.shields.io/badge/jenkins-D24939?style=for-the-badge&logo=jenkins&logoColor=white) ![](https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white) |
✔ Configuration Management |
Solution Stack |
![](https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white) ![](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white) |
✔ Collaboration Tool |
Solution Stack |
![](https://img.shields.io/badge/googledocs-4285F4?style=for-the-badge&logo=googledocs&logoColor=white) ![](https://img.shields.io/badge/googlesheets-34A853?style=for-the-badge&logo=googlesheets&logoColor=white) ![](https://img.shields.io/badge/googleslides-FBBC04?style=for-the-badge&logo=googleslides&logoColor=white)
![](https://img.shields.io/badge/googledrive-ECD53F?style=for-the-badge&logo=googledrive&logoColor=white) ![](https://img.shields.io/badge/googlecalendar-F40D12?style=for-the-badge&logo=googlecalendar&logoColor=white) ![](https://img.shields.io/badge/zoom-0B5CFF?style=for-the-badge&logo=zoom&logoColor=white) |
02 산출물
UMUL wiki
03 브런치 전략
![image](https://github.com/final-kms/main/assets/76561901/abbb568d-b08d-4ffd-8a39-fae7b5c8c08e)
- Git / Github 활용
- Backend / Frontend로 나누어 코드 관리
-
Backend, Frontend를 local에서 같은 폴더에 위치하여 함께 업로드되어 2번 방법 폐기
=> 이후, 팀원별 브랜치 나누어 관리
=> 각자 개발 이후 병합하여 배포
- tag / releases 만들어 현재까지 작업한 내용 설명 및 버전 관리
04 Agile 전략
![agile](https://github.com/final-kms/main/assets/80744883/5c267d73-1864-48b9-b268-7f3717c9357b)
소프트웨어 개발 방법론에는 다양한 종류가 있습니다.
그 중 저희는 많은 기업들이 사용하고 있고, 개발 후 발생하는 변수에 대해 빠른 대처가 가능한 애자일 방법론을 채택했습니다.
프로젝트에 적용한 애자일 방법론 3단계
- 기본적인 기능 개발
기본적인 기능들과 정상적인 작동 확인을 위한 간단한 UI 제작
- 요구사항에 있는 대부분의 기능 개발
요구사항에 있는 대부분의 기능 개발과 전체적인 UI 제작
- msa구조, 나머지 기능 개발
msa 구조로 변경, 나머지 기능 개발과 세부적인 UI 제작
장점
- 반복적인 개발 과정을 통해 숙련 증가
- 추가적인 요구사항에 대한 대처의 유연성
- 결과물의 빠른 확인
단점
- 세부적인 계획 필요
- 시간 계획 철저히 구성 필요
05 개발 일정
- 개발 기간 : 2024-03-04 ~ 2024-04-25
- Backend 개발(Work Day 31) : 2024-03-06 ~ 2024-04-19
- Frontend 개발(Work Day 30) : 2024-03-07 ~ 2024-04-19
- 테스트(Work Day 4) : 2024-03-21 ~ 2024-04-19
3월 |
![image](https://github.com/final-kms/main/assets/150432433/1099909c-2b40-454a-9078-24d060f0a530) |
4월 |
![image](https://github.com/final-kms/main/assets/150432433/d4476752-92d5-4971-b183-136f848c476d) |
06 기능 설명
기능 설명
## [사이트 접속]
- 사이트에 처음 접속 시 초기 로딩 화면과 함께 로그인 페이지로 이동합니다.
### [초기화면]
- '우물'은 회사 임직원용 서비스 이므로 로그인 후 사용 가능합니다.
- umul.site로 웹 사이트에 접속하면 로딩 후 로그인 페이지가 나타납니다.
| 초기화면 |
|----------|
|![Start](https://github.com/final-kms/main/assets/150432433/2d5c734f-44c4-4554-a13e-63a0bdf63dcf)|
### [회원가입]
- 회원가입은 회원의 아이디, 이메일, 비밀번호가 요구됩니다.
- 아이디
- 20자 이내의 값이 요구됩니다.
- 대소문자, 한글 모두 입력 가능합니다.
- 중복되지 않는 유일한 값이어야 합니다.
- 이메일
- 이메일 형식(예 : example@exam.com)만 입력 가능합니다.
- 50자 이내의 값이 요구됩니다.
- 중복되지 않는 유일한 값이어야 합니다.
- 비밀번호
- 120자 이내의 값이 요구됩니다.
| 회원가입 |
|----------|
|![회원가입](https://github.com/final-kms/main/assets/150432433/8d9f8773-4e0e-46ca-846b-a72bdc5987f5)|
### [로그인]
- 로그인은 회원의 아이디와 비밀번호가 요구됩니다.
- 로그인과 비밀번호가 틀리면 '실패'라는 창이 띄워집니다.
| 로그인 |
|----------|
|![로그인](https://github.com/final-kms/main/assets/150432433/289172c1-294e-48f1-b747-2d4b357a0a35)|
### [로그아웃]
- 로그아웃은 로그아웃 버튼 클릭시 즉시 적용됩니다.
- 첫번째 버튼 : 왼쪽 Nav Logout 버튼
- 두번째 버튼 : 오른쪽 상단 프로필의 Logout 버튼
| 로그아웃 |
|----------|
|![로그아웃](https://github.com/final-kms/main/assets/150432433/c52e6bb6-2e69-4f9d-a02b-4ad0cfae8b3b)|
## [Post]
- Post는 업무에 관한 궁금증을 자유롭게 질문하고 추천하는 시스템입니다.
### [Post 작성]
- Post는 '페이스북', '네이버 지식인'과 같이 자유롭게 질문을 올리고 댓글을 달 수 있는 기능입니다.
- 오른쪽 상단 Post+를 클릭해 작성할 수 있습니다.
- Post 작성은 제목, 본문, 태그가 요구됩니다.
- 태그는 띄어쓰기로 작성 가능하며 submit으로 Post 게시하면 '#'이 붙게 됩니다.
| Post 작성 |
|----------|
|![Post 작성](https://github.com/final-kms/main/assets/150432433/ef222881-2abb-40ca-8f09-30167ba7cf4e)|
### [Post 수정 및 삭제]
- 각 게시물에 적용된 '•••'를 클릭하여 수정 및 삭제가 가능합니다.
- 수정 방법은 Post 작성과 동일합니다.
| Post 수정 및 삭제 |
|----------|
||
### [Post 댓글, 추천, 즐겨찾기]
- Post의 본문 내용은 펼치기 및 접기가 가능합니다.(100자가 넘을 경우)
- Post에는 댓글을 달 수 있습니다.
- Post에 추천과 즐겨찾기를 할 수 있습니다.
- 댓글에 추천을 할 수 있습니다.
| Post 댓글, 추천, 즐겨찾기 |
|----------|
|![Post 댓글 작성 좋아요 즐겨찾기](https://github.com/final-kms/main/assets/150432433/caec2a8c-47e2-4e94-b14d-a95e14f64be2)|
### [Post 추천, 즐겨찾기 순위]
- 각 Post 추천 및 즐겨찾기 개수에 따른 순위를 확인할 수 있습니다.
- Post 게시 최신 순으로도 확인할 수 있습니다.(수정시 날짜 업데이트)
- 각 추천, 즐겨찾기, 최신 순 Post 제목을 클릭시 해당 Post 모달 페이지로 이동 가능 합니다.
| Post 좋아요, 즐겨찾기 순위 |
|----------|
|![Post 좋아요 즐겨찾기 최신순 정렬](https://github.com/final-kms/main/assets/150432433/0489fef0-5e7c-489e-8e76-6cd859c3e49c)|
## [Wiki]
- Wiki는 업무에 관한 정보를 카테고리로 관리하는 시스템입니다.
### [Wiki 게시글 작성]
- Wiki 게시글 작성 시 제목, 내용, 카테고리를 작성하여야 합니다.
- 세 가지 중 하나라도 작성하지 않으면 알림을 발생시키며, 게시글 작성이 원활하게 수행되지 않습니다.
- tiptap 에디터를 활용하여 글의 굵기, 크기 등의 효과를 설정할 수 있습니다.
| Wiki 게시글 작성 |
|----------|
![WikiWrite](https://github.com/final-kms/main/assets/76561901/2894cd07-3882-4354-86b7-b3544210aed8)
### [Wiki 게시글 열람]
- 게시글을 5개, 10개, 20개씩 볼 수 있도록 선택할 수 있습니다.
- 페이지 당 wiki 게시글의 개수를 초과하면 다음 버튼을 클릭하여 이후의 게시글을 열람할 수 있도록 합니다.
| Wiki 게시글 열람 |
|----------|
![PagingWiki](https://github.com/final-kms/main/assets/76561901/eafb391d-e9bf-4415-8f90-1e5a8debf2fd)
### [Wiki 게시글 수정]
- Wiki 게시글 수정 시에도 작성 시와 마찬가지로 빈 요소를 허용하지 않습니다.
- wiki 게시글 수정 시 로그를 저장하여 이력 관리를 할 수 있습니다.
| Wiki 게시글 수정 |
|----------|
![WikiUpdate](https://github.com/final-kms/main/assets/76561901/22ee0bd4-c2ed-438d-be19-e951ea563376)
### [Wiki 게시글 삭제]
- 게시글 삭제 시 "정말 삭제하시겠습니까?" 라는 문구와 함께 알림을 발생시켜 삭제 여부를 묻습니다.
- 작성자, 관리자 외에 게시글을 삭제하지 못하도록 합니다.
| Wiki 게시글 삭제 |
|----------|
![WikiDelete](https://github.com/final-kms/main/assets/76561901/6ccdf810-f6c9-429f-80fd-41892a9fa8b1)
### [Wiki 게시글 좋아요/즐겨찾기 기능]
- 게시글에 좋아요/즐겨찾기 버튼을 누를 수 있습니다.
- 좋아요/즐겨찾기 개수를 세어 순위를 매길 수 있습니다.
- 좋아요/즐겨찾기 표시를 한 게시글은 마이페이지 내에 표출될 수 있습니다.
| Wiki 게시글 좋아요/즐겨찾기 기능 |
|----------|
![LikeStar](https://github.com/final-kms/main/assets/76561901/d0818662-d57c-4248-88f4-574e0127244a)
### [Wiki 최신순/좋아요순/즐겨찾기순 순위]
- 최근에 작성된 게시글을 5개까지 볼 수 있습니다.
- 좋아요가 많은 게시글의 순위를 5위까지 볼 수 있습니다.
- 즐겨찾기가 많은 게시글의 순위를 5위까지 볼 수 있습니다.
| Wiki 최신순/좋아요순/즐겨찾기순 순위 |
|----------|
![rank](https://github.com/final-kms/main/assets/76561901/c4e60fa5-5601-4f7a-8646-c20f9a80a6db)
## [Search]
- 검색기능으로 원하는 Post, Wiki를 찾을 수 있습니다.
- Post, Wiki 검색 조건을 선택해 찾도록 만들어 정확성을 높였습니다.
### [검색창]
- 검색창을 누르면 검색 박스가 나타납니다.
- 검색창이 아닌 부분을 누르면 검색 박스가 사라집니다.
- 검색창 안에 있는 데이터는 마우스로 클릭할 수 있고, 키보드 방향키로 선택할 수 있습니다.
- Post, Wiki 검색창은 서로 검색 기록 및 검색 내용, 검색 이미지가 달라 구분하기 쉽도록 만들었습니다.
- 키보드 방향키로 원하는 키워드로 이동 후 Enter로 검색할 수 있습니다.
| 검색창 |
|----------|
|![Search-box](https://github.com/final-kms/main/assets/150432433/fae96448-313f-4129-a7ed-bed2846836fc)|
### [검색 기록]
- 본인이 검색한 내용을 다시 확인할 수 있도록 검색 기록 기능을 추가했습니다.
- 검색 기록은 중복 제외, 최신 10개만 불러오며 삭제가 가능합니다.
- 삭제를 하면 다시 최신 10개를 불러오게 됩니다.
- 삭제 버튼은 위치에 마우스로 가까이 다가갔을 때만 드러납니다.
- Post, Wiki 검색 기록은 각각 검색 했던 내용이 기록됩니다.
| 검색 기록 |
|----------|
|![Search-Log](https://github.com/final-kms/main/assets/150432433/bcfb9205-431d-4912-813d-01cc451f9d23)|
### [검색하기]
- Post, Wiki의 Title을 검색할 수 있습니다.
- 초성 검색이 가능합니다.
- 검색 중 키보드 방향키를 사용할 수 있습니다.
- 검색어가 없으면 기본 페이지가 출력됩니다.
- 검색 결과는 Post, Wiki 옵션 선택에 따라 내용이 달라집니다.~~(영상 첨부 아직 x 추후 추가)~~
| 검색하기 |
|----------|
|![Search-Do](https://github.com/final-kms/main/assets/150432433/bda08fdd-a787-4ac7-b92e-c427d85276f1)|
## [마이페이지]
- 마이페이지에서는 개인정보수정 및 작성하고 추천, 즐겨찾기한 글들을 확인할 수 있습니다.
### [마이페이지 Account Setting]
- 마이페이지 Account Setting 에서는 개인 정보를 수정할 수 있습니다.
- 원하는 이미지(파일)를 선택해 프로필을 변경할 수 있습니다.
- 회원 아이디, 이메일, 비밀번호 모두 수정 가능합니다.
- 해당 수정에 대한 조건은 회원가입 조건과 동일합니다.
| 마이페이지 Account Setting |
|----------|
|![마이페이지 Account Setting](https://github.com/final-kms/main/assets/150432433/8f20a6c5-c992-42c8-8274-d092399b1651)|
### [마이페이지 My Post]
- 마이페이지 My Post 에서는 '내가' 작성한 Post를 확인할 수 있습니다.
- My Post의 내용은 기본 Post 페이지 내용과 동일합니다.
| 마이페이지 My Post |
|----------|
|![마이페이지 My Post](https://github.com/final-kms/main/assets/150432433/f5c8587a-92aa-4538-b703-035f6f979dd4)|
### [마이페이지 My Wiki]
- 마이페이지 My Wiki 에서는 '내가' 작성한 Wiki를 확인할 수 있습니다.
- My Wiki의 내용은 기본 Wiki 페이지 내용과 동일합니다.
| 마이페이지 My Wiki |
|----------|
|![마이페이지 My Wiki](https://github.com/final-kms/main/assets/150432433/9faaeff9-a1b3-4a23-87c6-c96a764d6310)|
### [마이페이지 My Reply]
- 마이페이지 My Reply 에서는 '내가' 작성한 Reply를 확인할 수 있습니다.
- Reply는 Post에 달리기 때문에 My Reply 에서는 Post가 보여집니다.
- My Reply의 내용은 내가 작성한 댓글이 포함된 기본 Post 페이지 값과 동일합니다.
| 마이페이지 My Reply |
|----------|
|![My Reply](https://github.com/final-kms/main/assets/150432433/875e223b-e580-4ff1-8066-d0f2b40413fe)|
### [마이페이지 Like]
- 마이페이지 Like 에서는 '내가' 추천한 Post와 Wiki를 확인할 수 있습니다.
| 마이페이지 Like |
|----------|
|![마이페이지 Like](https://github.com/final-kms/main/assets/150432433/c8f8e0d1-4b2f-4e39-aaf4-7466c865d5c5)|
### [마이페이지 Star]
- 마이페이지 Star 에서는 '내가' 즐겨찾기한 Post와 Wiki를 확인할 수 있습니다.
| 마이페이지 Star |
|----------|
|![마이페이지 Star](https://github.com/final-kms/main/assets/150432433/9764cc0b-c6e5-435a-8a9b-69034821550d)|
## [팔로우]
- 팔로우 기능을 통해 유저간의 연결을 높였습니다.
- 팔로우를 하면 알람 기능을 통해 상대방의 업데이트를 실시간으로 확인할 수 있습니다.
### [Follow]
- 원하는 사용자를 Follow, UnFollow할 수 있습니다.
- 사용자의 email을 검색해 Follow 기능을 이용할 수 있습니다.
- 사용자 email의 일부만 입력해도 검색이 가능합니다.
| Follow |
|----------|
|![Follow](https://github.com/final-kms/main/assets/150432433/6aae6318-b9a0-4cfa-bffc-bb1636c36bec)|
### [Followee]
- Followee 기능을 통해 나를 follow한 사용자를 확인할 수 있습니다.
| Followee |
|----------|
|![Followee](https://github.com/final-kms/main/assets/150432433/040ec2a7-183e-48d5-89fe-efee479b52bb)|
## [조직]
- 조직(Table)은 사용자가 속한 조직을 나타내기 위한 기능입니다.
- 조직원들이 작성한 Post/Wiki 게시글을 열람할 수 있습니다.
- private 상태의 조직에서 글을 작성하면 조직 외부의 사용자들은 그 조직의 게시글을 열람할 수 없습니다.
### [조직 생성]
- 조직의 이름, 설명을 작성하여 조직을 생성할 수 있습니다.
| 조직 생성 |
|----------|
![createtable](https://github.com/final-kms/main/assets/76561901/4913a3b2-d9b9-4acd-81a4-af46703e5b40)
### [조직 초대]
- 초대할 사람의 이메일을 기입하여 조직에 초대할 수 있습니다.
- 초대를 받은 사람은 초대를 수락 및 거절할 수 있습니다.
- 초대를 수락하여 조직원이 되면 조직 내에서 게시글을 작성할 수 있고, 작성된 게시글은 조직 내에 표출됩니다.
| 조직 초대 |
|----------|
![invite](https://github.com/final-kms/main/assets/76561901/f7b2cde6-d0b1-471a-9a43-afcefd2cce0b)
### [조직 관리]
- 관리자는 조직의 이름, 설명을 변경할 수 있고, 관리자를 설정할 수 있습니다.
- 관리자는 조직의 public/private 상태를 변경할 수 있습니다.
- 관리자는 조직에 새로운 조직원을 초대할 수 있습니다.
| 조직 관리 |
|----------|
![manageTable](https://github.com/final-kms/main/assets/76561901/a7e4268c-6df3-4650-8383-2c562e3d9d60)
### [조직 관리자 설정]
- 관리자로 설정할 사람의 이메일을 작성하여 관리자로 임명/해임할 수 있습니다.
| 조직 관리자 설정 |
|----------|
![admin](https://github.com/final-kms/main/assets/76561901/94e31826-3f83-45f9-8c06-4c29bf62a088)
## [채팅]
- 채팅 기능은 사람들이 서로 자유롭게 대화하기 위해 만들어 졌습니다.
- 1:1로 대화할 수 있을 뿐 아니라, 팀 단체 채팅도 가능합니다.
### [ChatRoom]
- 채팅방 생성
- 채팅방 생성이 가능합니다.
- 이름으로 채팅방을 생성해야 합니다.
| ChatRoom |
|----------|
|![Create Chat Room](https://github.com/final-kms/main/assets/150432433/a9124d86-fd64-4188-81ed-0303e48b2108)|
### [Chat]
- 채팅하기
- 사용자를 이메일로 초대할 수 있습니다(여러명 한번에 초대 가능).
- 글 작성시 Enter는 줄 바꿈입니다.
- 긴 글 작성 후 제출 시, 길이에 맞춰 줄이 자동으로 넘어 갑니다.
- 작성 시간과 작성자를 확인할 수 있습니다.
| Chat |
|----------|
|![Chatting](https://github.com/final-kms/main/assets/150432433/3f303602-bfc7-4b93-84c5-f2253b0e56d6)|
## [App]
- 웹 서비스를 모바일 app으로 동일하게 경험할 수 있습니다.(안드로이드 전용)
| Login | Post | Table | Chat |
|-------|------|-------|------|
|
|
|
|
|
07 프로젝트 후기
⛵ 이경민
53일 간의 final 프로젝트가 막을 내렸다. WBS 같은 일정 관리부터 프로젝트 계획서, UI 설계서, ERD 등의 문서작업, 그리고 Backend와 Frontend 까지 프로젝트 전체를 경험했다. 개발에 처음 발을 들인 초보 개발자로서 이보다 값진 경험은 없으리라 생각한다. 추위와 따듯함이 연결되던 날씨처럼 작은 것에도 울고 웃을 수 있던 오늘의 프로젝트는 마음속 깊이 자리 잡아 새로운 시작이 되어 줄 것이다.
🚤김민우
테크 리더 역할을 맡아 개발 환경을 설정하고, 배포를 맡아 진행했다. 인공지능을 공부하다 웹 개발 프로젝트를 개발해보니 새롭고 재밌는 경험이었다. 부족한 점도 많았지만, 성장이 더 많았던 이번 프로젝트는 훗날 회사에 들어가서도 생각날 것 같다. 다음에는 인공지능을 웹에 적용시켜 추천 알고리즘을 구현해보고 싶다.
🛥️심규혁
기획, 문서작성 부터 개발과 테스트 등 프로젝트를 진행하면서 다양한 경험을 했다. 팀원들과 소통, 협동 하며 개발하는 좋은 경험을 할 수 있었고, 개발 과정에서 모르는 부분을 찾고, 팀원들을 통해 배울 수 있어 좋았다. 그리고 문서 작업의 중요성을 크게 느꼈다. 프로젝트 시작 과정에서 준비를 단단하게 해야 프로젝트 진행이 수월해 진다는 점을 느꼈다.
⛴️박대호
팀을 이루어 프로젝트를 수행해 볼 수 있었던 좋은 경험이었다고 생각함. html/css/js등 바닐라로 개발하는 것이 아닌 프레임워크를 활용하여 컴포넌트 기반 개발을 경험할 수 있어서 좋았음.