본문 바로가기
✨ Club/이대솔브닥웹사이트 - 뀨엘 | Frontend(React,Next.js)

📊 이대백준랭작프로그램 [뀨업] - 팀프로젝트 완성

by 정람지 2024. 6. 7.


📊 구동 README 작성 / 보고서

- 윈도우 사용해야 함

- 이클립스 사용해야 함

 

아~ 내 아무것도없는 윈도우컴 커몬

 

 

mySQL 깔기

 

Get-Service | Where-Object {$_.DisplayName -like "*mysql*"}

MySQL84

 

C:\Program Files\MySQL\MySQL Server 8.4\bin

환경변수 설정 

  • Win + R 키를 눌러 실행 창을 열고, sysdm.cpl을 입력한 후 Enter 
  • 시스템 속성 창이 열리면, 고급 탭을 선택하고, 환경 변수 버튼을 클릭
  • 환경 변수 창에서 시스템 변수 섹션의 Path 변수를 찾아 선택한 후, 편집 버튼을 클릭
  • Path 변수 편집 창에서 새로 만들기 버튼을 클릭하고, MySQL의 bin 디렉터리 경로를 추가

아이고오오됐다

mysql -u root -p

show databases;

show tables;

SELECT * FROM db2024_students;

 

 

워크밴치 깔기

앗싸잘됨~~!~!~!

 

아~씁 윈도우 맥 한영키 달라서 자꾸 영어대문자쓰는거ZLDQKESP

 

Frontend :프론트엔드 리액트 프로그램

1. Node.js 설치
설치 확인용 터미널 명령어 : npm -v
설치가 되지 않았다면 Node.js 공식 웹사이트로 이동하여 최신 LTS(Long-Term Support) 버전을 다운로드하여 설치합니다.

2. 프로젝트 의존성 설치
프로젝트 디렉토리로 이동( frontend\q_up-react ) 합니다.
의존성 설치용 터미널 명령어 : npm install

3. 실행
프로젝트 실행용 터미널 명령어 : npm start
프로젝트를 확인합니다.
 URL :  http://localhost:3000/
 반응형 미구현으로 인하여 1920 X 1080 px 규격, 80% 를 권장합니다.


Backend :백엔드 스프링 프로그램

(이클립스 버전)
1. STS 플러그인 설치
이클립스 마켓플레이스(Help -> Eclipse Marketplace)에서 'Spring Tools 4'를 검색하여 설치합니다.
2. 설정
Project > Java Compiler > Annotation Processing > Enable annotation processing를 체크합니다.
3. lombok 설치
lombok을 설치한 후 Project > Java Compiler > Annotation Processing > Factory Path에 External JARs로 추가합니다.
4. 실행
QqyuUpApplication을 실행합니다.

(인텔리제이 버전)
1. 실행
QqyuUpApplication을 실행합니다.

📊 시연 영상 촬영

대본

이화여자대학교 백준 랭킹 사이트, 뀨업입니다.
유명한 PS 웹사이트 백준에서의 이화여대 랭킹을 올리고자 만든 프로그램으로, 이를 위해 풀어야 하는 문제를 제시합니다.
먼저 메인 페이지입니다.
문구를 상단에 위치시켰고, 그 아래에 랭킹 현황이 뜹니다.
사용자는 이를 통해 현재 이화여대의 순위, 그리고 직전 순위의 단체와 그 사이 문제 수를 확인할 수 있습니다.
 메인 페이지 하단에는 오늘의 문제 섹션이 존재합니다.
골드/실버/브론즈 난이도에서 5개씩의 문제가 존재하며, 사용자는 찜하기 기능을 통해 자신의 핸들을 등록하여 자신이 풀겠다는 표시를 남길 수 있습니다. (아래 거 등록하기)
사용자는 상단의 헤더를 이용해 페이지를 이동할 수 있습니다. (이동)
분류별 문제 페이지입니다,
사용자는 수학, 구현, 그리디, 문자열, 등 다양한 알고리즘의 문제를 모아 볼 수 있습니다. (math 클릭)
티어와 번호, 제목, 푼 사람 수, 링크를 확인할 수 있고 링크를 통해 문제 페이지로 이동할 수 있습니다. (이동)
난이도별 문제 페이지입니다,
사용자는 브론즈,실버,골드 등 모든 난이도의 문제를 나눠 볼 수 있습니다. (실5 클릭)
마찬가지로 번호, 제목, 푼 사람 수, 링크를 확인할 수 있고 링크를 통해 문제 페이지로 이동할 수 있습니다. (이동)
함께 풀어요 게시판입니다.
문제를 풀다 막히면 벗들과 궁금한 점을 공유할 수 있습니다.
사용자는 현재 게시글들의 목록을 확인할 수 있고, 클릭하여 상세 정보를 알 수 있습니다. (클릭)
또한 글쓰기를 클릭하여 게시글을 작성할 수 있습니다.(작성)
데이터베이스의 변화를 확인해 보겠습니다.(SQL터미널)
그리고 삭제하고 싶은 게시물을 비밀번호를 통해 삭제할 수 있습니다.(삭제)
마지막으로 이화랭킹입니다.
사용자는 이화여대 사용자들의 백준 랭킹을 확인할 수 있습니다.
등수, 핸들, 티어, 푼 문제 수와 솔브닥 프로필 링크가 표시되고 링크를 타고 들어갈 수 있습니다.
(api날아온 거 한번 보여주기
보여진 모든 정보는 데이터베이스에서 백엔드의 정제를 거쳐 표시되었습니다.
(메인화면돌아가기
감사합니다! 

나...ㅅ발음못하나?


📊 PPT 제작

 

뀨엘 - 데이터베이스 팀플 최종발표

디자인 전문가가 아니어도 무료 템플릿으로 손쉽게 원하는 디자인을 할 수 있어요.

www.miricanvas.com

데굴데굴


불탔던 이틀...

데드라인이진짜효과가좋다

더미데이터넣다가 깃허브 부계도 찾았다!

 

celina324 - Overview

GitHub is where celina324 builds software.

github.com


일단 월요일 발표..

시연을 위한 HDMI 챙기기..허브도?

 

차후계획

- 기능 다듬기

- 프론트 반응형 구현

- 백준 실시간 크롤링

- 도메인

- AWS 등 클라우드서비스 백엔드 연결

- 배포하기

- 홍보하기

by 고라니