🇰🇷 CloverFeed.Kor
🇺🇸 CloverFeed.Eng
| 회원가입 및 로그인 | 피드백 질문 폼 생성 |
|---|---|
 |
 |
| 피드백 답변 제출 | 피드백 답변 확인 |
|---|---|
 |
 |
| 분야 | 사용 기술 |
|---|---|
| Fronted |          |
| Backend |    |
| AI |   |
| DevOps |     |
| etc |         |
React를 사용한 SPA(Single Page Application)로 페이지를 작성하였으며, React를 사용함으로서 가독성이 높은 코드 작성, 컴포넌트 기반 구조를 통한 모듈화, 가상 DOM을 활용한 성능 최적화 등을 통한 효율적인 사용자 인터페이스 개발이 가능했습니다.
프론트엔드 개발 언어로 TypeScript를 사용했습니다. TypeScript는 JavaScript의 동적 언어라는 특성으로 인한 단점을 해결하기 위해 만들어진 정적 타입 언어로, 정적 타입 검사를 통한 코드 안정성 강화, 유지보수성 향상 등의 이점이 있으며 이를 통해 협업을 더욱 원활하게 할 수 있었습니다.
Vite를 번들러로 채택하였습니다. Vite는 ESModule 기반의 번들러로 기존의 Webpack 대비 빠른 빌드와 테스팅이 가능하며, 이를 통해 개발 생산성을 높였습니다.
Tailwind CSS를 CSS 프레임워크로 사용하였습니다. Tailwind CSS는 클래스 기반의 유틸리티 퍼스트 프레임워크로, 이를 사용하여 빠르고 효율적인 스타일링은 물론, 개발 컨벤션 통일 효과를 얻었습니다.
익명의 동료에게 받은 피드백들을 한 눈에 파악하기 쉽게 차트와 워드클라우드로 시각화를 진행하였습니다. 강점과 성격 및 태도를 나타내는 태그는 Chart.js를 사용하여 도넛 형태의 차트로 표현하였으며, 주관식 답변에서 나타난 키워드의 빈도를 추출하여 react-wordcloud라는 라이브러리를 사용하여 메인 페이지에 워드클라우드로 표현하였습니다.
질문 목록과 피드백 답변을 작성할 때, 질문과 답변을 추가할 때마다 API 요청을 한다면 API 응답 시간 지연으로 인한 성능 저하가 발생할 수 있습니다. 이를 해결하기 위해 질문 목록 작성, 답변 목록 작성 기능에 Recoil을 사용한 전역 상태 관리를 적용했습니다. Recoil은 상태를 컴포넌트 외부에 저장하고 관리하는 라이브러리로, 이를 통해 여러 컴포넌트가 하나의 상태를 전역적으로 공유할 수 있게 됩니다. 각각의 질문 혹은 답변이 추가될 때마다 Recoil Atom에 정의된 질문 리스트, 답변 리스트로 업데이트 되며, 이러한 구조 덕분에 질문 폼 혹은 피드백 답변을 최종적으로 확정할 때 한 번에 모아서 백엔드와 통신하는 방식을 적용하여 질문과 답변 작성 페이지에서의 사용성 향상을 더욱 용이하게 할 수 있었습니다.
강력한 ORM, 보안 기능, 풍부한 기능 등으로 안정적이고 생산성이 높으며, 인공지능을 활용한 NLP 기능 추가와 ChatGPT 연동에 용이한 파이썬 기반의 웹 프레임워크인 Django를 사용하였습니다.
데이터 관리를 위해 표준 SQL을 지원하며, 이미 높은 안정성과 확장성을 검증받은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)인 MySQL을 DBMS로 사용하였습니다.
Docker를 사용하여 애플리케이션을 컨테이너화함으로써 개발 환경의 일관성을 유지하고, 환경 구성의 간소화로 빠른 배포 및 관리와 이식성 향상을 실현했습니다.
SSL 인증서를 발급받아 HTTPS를 적용하여 웹사이트의 무결성을 보호하도록 하였습니다.
준비물
- OpenAI secret key (발급받으러 가기(비용이 발생할 수 있음))
- Docker를 시스템에 설치합니다.
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ git clone https://github.com/2023WinterBootCamp-Team-L/CloverFeed.git- .env 파일을 알맞은 위치에 작성합니다.
- /.env (docker-compose.yml 파일과 같은 디렉토리)
MYSQL_ROOT_PASSWORD=(여기에 원하는 MySQL 루트 비밀번호 입력)
MYSQL_DATABASE=cloverfeed
MYSQL_USER=user
MYSQL_PASSWORD=(여기에 원하는 MySQL 루트 비밀번호 입력)
- /backend/config/.env
DB_NAME=cloverfeed
DB_USER=root
DB_PASSWORD=(여기에 상단 .env파일에서 설정한 MySQL 루트 비밀번호 입력)
DB_HOST=mysql
DB_PORT=3306
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://frontend:5173,http://localhost:5173,http://127.0.0.1:5174,http://frontend:5174,http://localhost:5174,http://127.0.0.1:80,http://frontend:80,http://localhost:80,http://127.0.0.1,http://frontend,http://localhost,http://localhost:8000
ALLOWED_HOSTS=backend,localhost,127.0.0.1
OPENAI_KEY=(여기에 OpenAI secret key 입력)
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ cd project
$ docker compose up -d --build- Docker Desktop에서 Docker Container들이 잘 실행되고 있는지 확인합니다.
- Docker Desktop에서 backend container를 선택한 다음, django secret key를 확인합니다. (확인 방법)
- 확인한 django secret key를 .env 파일에 추가합니다.
- /backend/config/.env
DB_NAME=cloverfeed
DB_USER=root
DB_PASSWORD=(여기에 상단 .env파일에서 설정한 MySQL 루트 비밀번호 입력)
DB_HOST=mysql
DB_PORT=3306
SECRET_KEY=django-insecure-(여기에 django secret key 입력)
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://frontend:5173,http://localhost:5173,http://127.0.0.1:5174,http://frontend:5174,http://localhost:5174,http://127.0.0.1:80,http://frontend:80,http://localhost:80,http://127.0.0.1,http://frontend,http://localhost,http://localhost:8000
ALLOWED_HOSTS=backend,localhost,127.0.0.1
OPENAI_KEY=(여기에 OpenAI secret key 입력)
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ docker compose up -d --build- Docker Desktop에서 Docker Container들이 잘 실행되고 있는지 한 번 더 확인합니다.
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ cd frontend
$ yarn
$ yarn dev- 그 상태에서 'localhost:5173'에 접속하면 사용할 수 있습니다.
| Pictures |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| Name | 강석규 | 조상아 | 석민정 | 강지은 | 정현수 | 한현서 | 이창연 |
| Position |
Leader Backend DevOps |
Backend DevOps |
Backend |
Frontend |
Frontend |
Frontend |
Frontend |
| GitHub |
|
|
|
|
|
|
|
개발 기간 : 2023년 12월26일 ~ 2024년 2월3일