작품의 목적

캡스톤을 진행시에, 모일 날짜을 정하는 것에 대한 어려움을 해결하고, 학생들이 더욱 효율적으로 소통하고 정보를 공유할 수 일도록하기 위함

이전과의 차별점

1. 모바일에서도 더욱 자연스러운 UI

이전에도 모바일에서 구동 되었기만 flexable 하지 않아 UI가 깨져서 사용에 불편함이 있었지만, 이를 개선하였음

2. Node.js -> Koa

Node.js와 Express가 아닌 Koa를 사용해 보았음

3. 서버 시스템

기존에는 웹 호스팅을 통하여 서버를 실행하였으나, 이제 로컬에서 서버를 돌리며, 2개의 서버를 사용하여 서버를 호스팅함

4. Trunk base -> Git flow

**

명세

요구사항 정의서

첨부파일/Pasted image 20250619112147.png

IA(메뉴 트리)

첨부파일/Pasted image 20250619112237.png

기능 명세서

첨부파일/Pasted image 20250619112408.png

기능 정리

첨부파일/Pasted image 20250619112430.png

사용한 기술

Koa, Jsonwebtoken, Mysql2, Bcrypt, sequelize, React, React-router, Redux, Axios, Styled-components, selenium, word embeding, Sequelize

기능

1. 맛집 추천 기능

크롤링

selenium을 통하여 대학생 커뮤니티 앱인 에브리타임의 시간표 데이터를 파싱하였고, 또한 배달 앱 요기요에서 리뷰 데이터를 파싱 하였다.

단어 임베딩

첨부파일/단어임베딩.mp4 문제점으로는 리뷰 데이터와 식당 이름, 메뉴 이름에 쓸모 없는 수식어가 붙은 경우와 한자와 한글을 조합하는 경우, 메뉴는 같으나 다른 수식어가 붙은 경우가 존재하여 정형화의 한계를 느꼈다.

원래 불용어 제거에 대해서는 Natural Language Toolkit을 통하여 불용어를 제거하는 데 이는 한국어를 지원하지 않기에 손수 제거해야 하였다.

또한 json 데이터로 변환하는 과정에서 리뷰를 쓰지 않고 별점만 주는 경우가 있었는데 json은 None 값을 직렬화 할 수 없었기에 문제가 있었다.

2. 게시물 작성

Sequelize

첨부파일/Pasted image 20250619115433.png

Sequelize는 데이터베이스와의 상호작용을 객체 지향적으로 처리하며, SQL을 직접 작성하지 않고 데이터베이스를 조작할 수 있습니다. 이로 인해 개발 속도가 빨라지고, 코드의 유지보수성 및 가독성이 향상됩니다. 작성한 코드에서는 CRUD 작업 및 데이터 조회와 같은 주요 기능을 간단히 구현할 수 있는 Sequelize의 강점을 잘 활용하고 있습니다.

결과

첨부파일/post.mp4

부가 기능

첨부파일/post 부가기능.mp4

3. 일정 조율

첨부파일/미팅.mp4

4. 로그인

첨부파일/auth.mp4

5. 시간표

첨부파일/시간표.mp4

6. 그 외 기능들

첨부파일/긱식,뉴스.mp4

리펙토링

Redux 흐름도

첨부파일/Pasted image 20250619115448.png

View 사용자가 애플리케이션을 조작하여 특정 이벤트를 트리거 함, 이때 Dispatcher가 Action을 미들웨어로 전달함.
Middlewares (Redux-Saga) Redux-Saga는 전달 받은 액션 정보를 통해 비동기 요청 수행 Middleware에서 응답 받은 Action을 Dispatch함
Reducer Reducer는 Payload에 있는 data를 통해 Store를 수정

Saga-Function 생성자

첨부파일/Pasted image 20250619115527.png 다음은 리팩터링을 진행한 코드입니다. createRequestActionTypes는 입력된 타입에 대해 type과 성공시 Type, 실패시 Type을 반환합니다.

createRequestSaga함수는 타입과 axios를 이용한 API요청함수를 받고 이는 비동기 함수입니다.

createRequestSaga함수는 generator함수를 반환하며 이는 Redux middleware에서 yield로 동작을 구분하여 비동기처리가 완료된 후 다음 작업을 수행토록합니다.

요청 성공시 성공 타입과 응답 데이터를 Action객체로 Reducer에서 전달하고 실패시 실패 타입과 에러정보를 Action객체로 Reducer애게 전달합니다.

물론 과정 수행 시작시 로딩상태를 true로 변경하는 Action을 Reducer에 전달하고 과정 수행 완료시 로딩상태를 false로 변경하는 Action을 Reducer에게 전달합니다.

Redux Dev-Tools를 통한 강의 검색 시 로그 확인

첨부파일/Pasted image 20250619115615.png

문제점 및 해결 방안

1. 중복된 Dispatch

첨부파일/Pasted image 20250619115706.png 중복 Dispatch: 이미 비동기 요청이 진행 중임에도 불구하고 동일한 액션이 여러 번 디스패치되는 문제가 발생. 불필요한 로드: 비동기 요청이 중첩되면서 애플리케이션의 성능 저하를 초래.

1. 해결

첨부파일/Pasted image 20250619115734.png 중복된 액션 호출을 방지하기 위해 loading 상태를 추가하여 비동기 요청 중일 때 새로운 요청이 발생하지 않도록 수정.

첨부파일/Pasted image 20250619115752.png 중복 Dispatch 방지: 비동기 요청 중에는 추가 액션 디스패치를 차단하여 중복 작업을 제거. 성능 개선: 불필요한 로드가 사라지면서 애플리케이션의 반응성이 향상.