📊 구동 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 등 클라우드서비스 백엔드 연결
- 배포하기
- 홍보하기
'Club|Project > 이대솔브닥웹사이트 - 뀨엘 | Frontend(React,Next.js)' 카테고리의 다른 글
📊 이대백준랭작프로그램 [뀨업] - 찐뀨엘 재기획개발 (0) | 2024.06.23 |
---|---|
📊 이대백준랭작프로그램 [뀨업] - 찐뀨엘 결성 ing (1) | 2024.06.13 |
📊 이대백준랭작프로그램 [뀨업] - 프론트 : API 연결 3 (1) | 2024.06.05 |
📊 이대백준랭작프로그램 [뀨업] - 프론트 : API 연결 2 (0) | 2024.06.04 |
📊 이대백준랭작프로그램 [뀨업] - 프론트 : API 연결 1 (1) | 2024.05.27 |