TIL(20240712) [프론트 연결 및 구현: 카드 생성/조회]
카드와 댓글 기능 구현 후에 프론트 쪽으로 넘어왔다.
아직 백엔드 쪽 해야할 일이 있지만
1) 카드 전체조회(작업자별 및 전체) 수정 2) 카드, 댓글 권한설정 마무리 3) 카드, 댓글 전역예외처리
먼저 프론트 쪽으로 연결이 될까 의구심이 들어서 프론트 쪽 연결을 하면서 수정이 필요한 부분이랑 함께 수정할려고 한다.
타임리프로 프론트-백엔드 연결
- 카드 생성 UI
카드 생성 UI.. 심플하게..! 이쁜게 중요한게 아니니까..ㅎㅎㅎ;; 연결만 되어다오..😂
컬럼을 선택하는 드롭다운이 String으로 타입을 못넘겨주는 것 같아서 그냥 문자열로 받는 형식으로 수정했다..ㅎㅎ;;
createCard버튼을 누르면! 캡처하지 못했지만 성공 alert창이 뜬다. 콘솔에서 확인해보면 success!
데이터가 잘 들어왔는지 DB도 확인해보자
- 카드 디테일 조회
DB에서 조회할 카드 검색
DB에서 조회할 댓글리스트 검색
성공성공!!!! (힘든것이 잠시 잊혀졌다..😂)
내가 너무 몰랐던 탓인지.. 카드 상세조회시 별도의 댓글 API를 사용할 수 있었다.. 그러니까 API 두 개를 가지고 하나의 페이지를 구현할 수 있다는 것이지.. 2개 3개이상도 가능할 것 같다.. 나는 프론트 쪽에 대해서 너무 공부를 안해서인지 자주 접해보지 못해서 항상 프론트 쪽이 어떻게 구현되는지 궁금하긴 했는데 이번 기회로 많이 해소가 된 것 같다. 그런데.. ㅎㅎ 카드 조회시 댓글까지 나오도록 구현했었는데.. 구지 연결하려면 할 수 있지만 더 복잡해지니 2개의 API를 연결해서 써도 괜찮을 것 같다. 이미 댓글 조회 기능은 구현해놨었으니 그대로 썼고 카드 조회 Dto에서 댓글리스트 필드는 삭제했다. 그리고 댓글 리스트를 불러오는 과정에서 백엔드쪽은 페이지 처리가 되어있는데 프론트 쪽에도 페이지 버튼 ? 부분을 구현해야할 것 같다!