Blueming

블루밍은 학생과 선생님 간의 원활한 소통을 위한 학습 보조 도구입니다.
더 이상의 한계 없는 학습의 정원, 함께 우리의 정원을 가꾸어 나가요! 🌱🌼

Service Introduction

저희는 교육을 수강하며 이러한 불편함을 느꼈습니다.

🗣️ “뒷자리라 코드가 잘 안 보여요.“
🗣️ “너무 조용해서 질문하기 어려워요.“
🗣️ “학생들끼리 익명으로 소통할 수 있는 창구가 있으면 좋겠어요.“
🗣️ “공지사항을 슬랙에서 확인하다보니 찾기 힘들어요.“

‼️ "이 모든 것을 한번에 해결할 수 있는 플랫폼이 있다면 어떨까?"

따라서 교육 통합 관리 시스템이자 학생들의 수업을 보조해주는 도구인, 블루밍을 개발했습니다!

🔨 블루밍을 통해 사용자는

코드 공유를 간편화하고
적극적인 질의응답 유도하고
학생들의 학습 상황을 팔로우할 수 있습니다!

Project Architecture

Main Features

🔔 알림 기능

학생은 수업에 관한 피드백 혹은 질문을 알림 기능을 통해 익명으로 전달할 수 있습니다.
강사는 알림을 통해 학생들의 이해정도를 알 수 있고 질문을 받을 수 있어 최적화된 수업이 가능합니다.

📝 보드 기능

게시판, 과제함, 공지사항 세개의 게시판이 존재합니다.
게시판에는 익명으로 글을 적을 수 있으며, 과제함은 자신이 올린 글만 접근 할 수 있습니다.

💻 코드 공유 기능

강사 혹은 학생의 코드를 각자의 화면에 띄워 모두 함께 공유할 수 있습니다.
스크린과 멀어 강사의 화면이 안보이거나, 학생의 코드를 보며 설명해야 하는 경우에 해당 기능을을 사용함으로써 보다 질 높은 수업이 가능합니다

Team Member

김미래	김시은	박서희	한다현

@allllfo	@lvolzdev	@seohee99	@ekgus9701
Full-stack	Full-stack	Full-stack	Full-stack
✔️ AWS EC2 배포 ✔️ 로그인, 회원가입 기능 및 UI 구현 ✔️ 마이페이지 기능 및 UI 구현 ✔️ 기타 UI 구현	✔️ AWS EC2 배포 및 CICD 구현 ✔️ 메인페이지 UI 및 커리큘럼 기능 구현 ✔️ 게시글 작성/수정 페이지 구현 ✔️ 로고 디자인 포함 기타 문서 작업	✔️ 기본 레이아웃 설계 및 구현 ✔️ Iframe, VSCode Liveshare Extension을 활용한 화면 공유 기능 구현 ✔️ Socket.io를 활용한 질문, 알림 기능 구현	✔️ 게시글 리스트 페이지 구현 ✔️ 게시글 상세 페이지 구현 ✔️ 헤더 문구 변경 기능 구현 ✔️ 기타 UI 구현

Case Study

문제 1, 화면 공유 기능 : Iframe에 링크 삽입 시 CORS 에러

상황

vscode 코드 공유를 위해 live share extension을 설치해서 Iframe의 src 속성에 화면 공유 링크를 삽입

문제

부모(blueming), 자식(vscode~~.com) 은 같은 출처가 아니기 때문에 CORS 에러가 발생

CORS

- CORS : cross origin resource sharing, 동일한 출처(프로토콜, 호스트명, 포트)의 리소스에만 접근하도록 제한하는 정책

- 따라서 CORS는 서로 다른 출처(Origin) 간에 리소스를 전달하는 방식을 제어하는 체제이며,CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다!

해결

해결 방법 1

iframe 에 다른 출처의 사이트를 넣었다는 글을 참고하여 같은 방법을 사용
다른 사람이 만든 프록시 서버(대표적인 예:https://cors-anywhere/herokuapp.com)를 사용하는 것 :: 요청해야하는 url 앞에 프록시 서버 url을 붙여 요청하면 해결할 수 있음
하지만 이 방법은 사용자가 직접 프록시 서버 사이트에 들어가서 잠시 사용하겠다는 요청 버튼을 눌러야만 가능하기에 이건 임시적인 방법이었고, 개발용으로만 가능해서 배포했을 때는 사용하지 못한다는 단점으로 사용하지 않음

해결 방법 2

서버에서 직접 Access-Control-Origin 헤더를 세팅
Iframe에 넣고 싶은 링크를 서버로 보내서 서버에서 헤더를 넣어 응답을 보내주었고, 그 응답받은 데이터 자체를 iframe에서 srcDoc 속성에 넣어주었다. (srcDoc은 html같은 형태를 넣을 수 있는 속성)
서버, 프론트 사이의 프록시는 이미 설정해두었기때문에 위 방법을 사용해서 다른 출처의 사이트를 iframe에 넣을 수 있게 되었다!

문제 2, 배포 : 소켓 통신 시 CORS 에러

상황

AWS EC2 인스턴스에 Socket 통신 구현한 버전의 배포 시도.

문제

로컬에서는 문제없이 작동됐지만, 배포하자 cors에러 발생하며 소켓 통신 작동하지 않음.
서버는 3000번 포트, 클라이언트는 5173번 포트 사용 중.
따라서 기존 파일의 경우,

프론트엔드 socket 파일에서는 http://elasicIP:3000 서버 포트로 소켓을 보내게끔 구현.
마찬가지로 백엔드 socket 파일에서는 Server를 새로 만들 때 cors origin에 http://elasicIP:5173 추가해줬음.

해결방법

EC2 인스턴스 내에서는 nginx 웹서버를 통해 통신함.
고로 소켓 통신 시에도 직접 프론트/백 포트로 전송하는 것이 아닌, null 값을 보내주니 정상적으로 통신이 동작함.

Code

Folder Structure

폴더 구조

📂 frontend
├─ .eslintrc.cjs
├─ .gitignore //  .gitignore 파일
├─ package-lock.json
├─ package.json // package 관리 파일
├─ public // image 관리 폴더
├─ README.md
├─ src
│  ├─ App.css
│  ├─ App.jsx
│  ├─ assets // 데이터, 폰트 등 관리 폴더
│  │  ├─ data
│  │  ├─ fonts
│  ├─ components // 레이아웃 관리 폴더
│  ├─ lib
│  │  ├─ apis // 백엔드와 통신을 위한 폴더
│  │  └─ hooks
│  ├─ main.jsx
│  ├─ routers // 라우터 관리 폴더
│  ├─ routes
│  │  ├─ board // 메인 기능 1. board
│  │  │  ├─ assignment // 1-1. 과제함
│  │  │  │  ├─ detail
│  │  │  │  └─ write
│  │  │  ├─ board // 1-2. 자유게시판
│  │  │  │  ├─ detail
│  │  │  │  └─ write
│  │  │  └─ notice // 1-3. 공지사항
│  │  │     ├─ detail
│  │  │     └─ write
│  │  ├─ codeShare // 메인 기능 2. 화면 공유
│  │  ├─ question // 메인 기능 3. 질문/알림
│  │  ├─ socket // 소켓 통신을 위한 폴더
│  │  └─ user // 유저 기능 관리를 위한 폴더
│  │     ├─ login
│  │     ├─ mypage
│  │     └─ signup
│  └─ store
│     ├─ reducers // redux 상태 관리를 위한 폴더
│     └─ store.js
└─ vite.config.js

📂 backend
├─ .gitignore
├─ app.js
├─ bin // 서버 시작 파일
│  └─ www
├─ middlewares // 로그인 관리 미들웨어
├─ models // DB 모델
├─ package.json
├─ routes // 라우터 관리 폴더
├─ utils // 인증, 소켓 관리 폴더
│  ├─ auth.js
│  └─ socket
└─ views

lvolzdev/Blueming