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

📊 이대백준랭작프로그램 [뀨업] - 프론트 : API 연결 3

by 정람지 2024. 6. 5.

세은찡이 게시글 맡아주고~! 굿

큭큭.. 우선 과제 중심 부분인 sql하고 자바는 완성되었으니

프론트는 정 데드라인못맞추겠으면 더미데이터페이크영상작전으로


📊 API 명세서 체크표

기능 HTTP URL Request Response 완성 여부
관리자가 오늘의 문제 post POST /main/auth   { (String) “TodayPS 생성 성공“ } ⭕️
메인페이지 보여주기(오늘의 문제 + 그룹 순위) GET /main   { 
(INT) “ewha_ranking”: “이화여대 그룹 순위” 
(INT) “rival_ranking”: “이화여대 전 순위 등수” 
(String) “rival_group_name” : “이화여대 전 순위 그룹 이름” 
(INT) “solved_num_gap” : “전 순위 그룹과 문제 수 차이” 
(INT) “pid” : “오늘의 문제 번호” 
(String) “dib_handle” : “찜한 사람 핸들” 
(Boolean) “dib” : “찜하기 여부” 
(String) “p_title” : “오늘의 문제 제목” 
(INT) “p_tier” : “오늘의 문제 티어” 
}
⭕️
오늘의 문제 찜하기 PUT /main/todayps/dib/enable { 
(INT)”pid”: “찜한 문제 번호” 
(String) “dib_handle”: “찜한 사람 핸들” 
}
{ 
(INT)”problem_num”: “찜한 문제 번호” 
(String) “dib_handle”: “찜한 사람 핸들” 
(Boolean) “dib” : “찜하기 여부” 
(String) “problem_title” : “오늘의 문제 제목” 
(INT) “problem_tier” : “오늘의 문제 티어” 
}
 
학생의 교내 랭크 보여주기 GET /studentRank   { 
(INT) “rank_ingroup” : “사용자의 교내 랭크” 
(String) “handle” : “사용자 핸들” 
(String) “userlink” : “사용자 솔브닥 링크” 
(String) “tier” : “사용자 티어” 
(INT) “solved_num” : “사용자 푼 문제 수” 
}
⭕️
문제 알고리즘별로 보여주기 GET /problems/algo{algoid} { 
(String) “tag” : “사용자가 선택한 알고리즘 태그” } 
→ url에 파라미터 형태로 제공(프엔) ex) /problems/algo?tag=알고리즘명
{ 
(INT) “pid” : “문제 번호” 
(String) “p_title” : “문제 제목” 
(String) “link” : “문제 링크” 
(INT) “solvednum” : “푼 사람 수” 
(String) “tier” : “문제 티어” 
}
⭕️
문제 티어별로 보여주기 GET /problems/tier { 
(String) “tier” : “사용자가 선택한 티어” 
} 
→ url에 파라미터 형태로 제공 ex) /problems/tier?tier=티어번호
{ 
(INT) “pid” : “문제 번호” 
(String) “p_title” : “문제 제목” 
(String) “link” : “문제 링크” 
(INT) “solvednum” : “푼 사람 수” 
(String) “algo” : “문제 알고리즘” → 보류? 
}
⭕️
같이 풀어요 게시판 게시글 문제번호별로 보여주기(검색) GET /pstogether/search/{pid} { 
(int) “pid” : “사용자가 검색한 문제 번호” 
} 
→ url에 파라미터 형태로 제공 ex) /pstogether/search?pid=문제번호
{ 
(INT)”pid” : “문제 번호” 
(String) “article_title” : “게시글 제목” 
(String) “handle” : “게시자 핸들”
}
같이 풀어요 게시판 게시글 미리보기 GET /pstogether/previews   { 
(INT)”pid” : “문제 번호” 
(String) “article_title” : “게시글 제목” 
(String) “handle” : “게시자 핸들” 
}
⭕️
같이 풀어요 게시글 상세 조회 GET /pstogether/search { 
(INT) “articleId” : “게시글 아이디”
}
{ 
(INT)”pid” : “문제 번호” 
(String) “handle” : “게시자 핸들” 
(String) “github_link” : “깃허브 링크” 
}
 
같이 풀어요 게시글 올리기 POST /pstogether { 
(INT)”pid” : “문제 번호” 
(String) “handle” : “게시자 핸들” 
(String) “github_link” : “깃허브 링크” 
(INT) “pw” : “비밀번호” }
{ 
”게시글 등록에 성공했습니다” 
(INT)”pid” : “문제 번호” 
(String) “handle” : “게시자 핸들” 
(String) “github_link” : “깃허브 링크” 
(INT) “pw” : “비밀번호” 
}
⭕️
같이 풀어요 게시글 삭제 DELETE /pstogether { 
(INT) “articleId” : “게시글 아이디” 
(INT) “pw” : “비밀번호” }
{ //비밀번호가 일치할 경우 ”게시글 삭제 성공” } 
{ //비밀번호가 불일치할 경우 ”비밀번호 불일치” }
 

📊문제 분류 페이지 작업 -  문제 티어별로 보여주기

HTTP PUT
URL http://localhost:8080/problems/tier
request (String) “tier” : “사용자가 선택한 티어” 
→ url에 파라미터 형태로 제공 ex) /problems/tier?tier=티어번호
response (INT) “pid” : “문제 번호” 
(String) “p_title” : “문제 제목” 
(String) “link” : “문제 링크” 
(INT) “solvednum” : “푼 사람 수” 
(String) “algo” : “문제 알고리즘” → 보류? 

완료~

문제 알고리즘을 넣어야 하나 말아야 하나

그리고 데이터가 너무 많아서... 렉걸린다.

하나 페이지에 다 떄려넣어서 그런가 보다

스크롤바 티끌

나중에는 12345이렇게 페이지로 구분해야 하나..

 


 

📊문제 분류 페이지 작업 -  문제 알고리즘별로 보여주기

HTTP GET
URL http://localhost:8080/problems/algo{algoid}
request (String) “tag” : “사용자가 선택한 알고리즘 태그” 
→ url에 파라미터 형태로 제공(프엔) ex) /problems/algo?tag=알고리즘명
response (INT) “pid” : “문제 번호” 
(String) “p_title” : “문제 제목” 
(String) “link” : “문제 링크” 
(INT) “solvednum” : “푼 사람 수” 
(String) “tier” : “문제 티어” 

 

tier pid p_title link solvednum

 

백엔드 재구동 시

포트 사용중이라고 할 때 끄는 법

lsof -i :8080으로 pid 확인

sudo kill -9 [pid]

 

아악아강ㄱ진짜 화난다

<td>{tierName(ProblemData.tier)}</td>

이거 왜 안뜨지??

숫자로 가져오는 티어 이름으로 바꿔서 표시하려고 그랬는데

이렇게 비어 나온다 뭐지???

함수 잘 작동하고!

숫자 잘 나오고

음?

쓰다가 갑자기 머리를 스치는

(String) “tier” : “문제 티어”  

아니 String이잖아! 소은아 숫자인데 왜 String으로

ㅎㅎ..해결 

그래서 NULL값 반환된거군,,

 

+ 언레 나중에 예외처리하기

일단끗!


우리아기,,

뿌닷

B5가 안떠서 어디 내가 모르는 데서 오류난 줄 알고 화났는데

큭큭..

내가 브론즈 5를

다 풀어버렸기 때문이었다

!!

브론즈 4도 밀었는데.. 새로 생겻더라고?

 

암튼

뿌닷2


기기괴괴오랜만에보니까재밋더라