[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8

프로젝트 발표일까지 남은 시간은 단 하루
삭제버튼도 만들어야하고
독서 진행바도 만들어야했다.

하지만 시간이 부족해 로그인과 회원가입 기능을 완료한팀원이 도와줬다.
팀원은 독서 진행바를 만들고
나는 삭제 버튼을 만들었다.

삭제 버튼을 클릭하면 DB에서도 삭제가 되게 구현했다.

삭제 버튼을 누르면
사용자가 책 카드 옆에 있는 휴지통 아이콘을 누르면 

자바스크립트에서 해당 책의 book_id와 email을 가져와서 삭제 요청을 보낸다. 

axios.delete(`http://localhost:8080/api/books/delete`, {
  data: {
    email: book.email,
    book_id: book.book_id,
  },
  headers: { Authorization: token }
})

 

백엔드의 경우

controller -> service -> dao 순서로

BookController.java에서 delete 요청을 받아

BookService.java를 통해 

BookDao.xml의 sql문을 실행해 book테이블에서 해당 책 데이터를 삭제한다.

 

삭제 후 UI업데이트

삭제가 성공하면  프론트에서 해당 책 요소(book-item)를 .remove()로 화면세어 제거한다.

다시 목록을 불러오지 않아도 삭제가 즉시 반영된다.

 

삭제 버튼은

읽고 있어요나 읽고 싶어요 상태일때만 삭제버튼이 보이도록 했다.

왜? 다 읽었어요에서느 삭제버튼이 없냐? 책을 다 읽었기에 보호 목적으로 만들어 놓지 않았다.

 

 

팀원이 차트바가 나오게 구현을 해줬다. 내가 작성했을때와 팀원이 작성했던 방법을 분석해보고자 한다.

 

팀원의 코드

<!-- GoalMapper.xml -->
<insert id="insertGoal" parameterType="com.book.tracker.dto.Goal">
    INSERT INTO goal (email, target_books, current_books, is_completed, created_at)
    VALUES (#{email}, #{targetBooks}, #{currentBooks}, #{isCompleted}, #{createdAt})
</insert>

• parameterType 정확
• 필드명과 DB 컬럼명 일치
•  Mapper interface와 ID 연결 명확

나의 코드를 보고 느낀점

• DTO만 잘 짠다고 끝이 아니다. MyBatis와 DB는 항상 “매핑”이 핵심이다
• 작동 안 될 때는 XML → DAO → Service → Controller 흐름을 따라가면서 로그로 추적해보기
• 브랜치 변경 시에는 꼭 mapper.xml, sqlSessionTemplate, resultMap 같은 설정이 덮였는지 체크하기

“Java 코드 자체보다, MyBatis XML과 흐름 연결이 핵심이었다!”

 

구현해야할 기능은 다 구현했다!