로직 구현 후 로그인 구현시 트러블슈팅

카테고리 CRUD, 

할일 CRUD를 구현하고

 

카테고리 목록, 카테고리 추가, 할일 추가 페이지는 Thymeleaf로 보여주었고

카테고리 클릭시 하위카테고리 & 할일목록은 AJAX로 보여주었다.

 

카테고리명, 할일이름 옆에 수정 icon, 삭제 icon을 붙여서 

- 수정 icon 클릭시 ajax로 input text가 보여지고 수정되게

- 삭제 icon 클릭시 ajax로 삭제되게

 

오늘할일로 '추가' 시

- 오늘날짜 밑에도 목록이 생기고

- ajax로 DB에도 저장되게

 

오늘할일에 별표 ☆클릭시

- ajax로 DB 저장 및 ★로 바뀌게 처리

 

회원가입에서 validation는

- 비밀번호 확인용 불일치는 Javascript에서 유효성을 검사하였고, 

- ID 중복, 공백 검사는 BindingResult로 Thymeleaf로 보여주었다.

 

로그인은

- 세션으로 구현하였고 (추후 스프링 시큐리티로 리팩토링하려고)

- 로그인 유지는 서블릿 필터로 구현하였다.(김영한님 강의를 참고하며)

 

로그인을 구현하기 전에

카테고리/할일을 구현하였더니.. (test 유저를 임의로 insert 해놓고 구현했었다.)

로그인 유저를 로직에 적용하면서 여러 이슈들이 있었다.

 

먼저 카테고리 엔티티 수정 전 ERD를 보면

- 처음 설계시에는 시작시간, 종료시간 등 컬럼이 더 많았지만, 일단 MVP버전 컬럼들만 보고자 지워두었고,

- 메일인증 컬럼 등은 아직 구현 전이지만, 엔티티에는 있으므로 ERD에도 그대로 두었다.

  (DataType은 아직 JPA가 DDL-AUTO로 테이블을 사용중이라, 설계와 다른 부분이 있다.)

로그인 유저의 카테고리 목록을 보여주려고 하니,

ToDo 테이블을 조인해서 가져와야 했다.

일단은 DB 수정없이 가능한 데까지 해보려고 JPQL로 구현해보았다.

 

먼저 HeidiSQL에서 MySQL 쿼리문으로 만들어 원하는 대로 쿼리 결과가 나오는지 보고

SELECT * FROM category c JOIN todo t ON c.id = t.categoryId WHERE t.owner = 1;

JPQL로 작성하였다.

@Query("SELECT c FROM Category c JOIN c.todos t WHERE t.user.id = :userId")
List<Category> findByUser(@Param("userId") Long userId);  //카테고리에 userId 필드 추가 전

그런데, 카테고리를 추가해보니

→ 카테고리와 User의 중간점인 "할일" 없어서 카테고리 목록이 보이지 않았다😮 ㅎㅎ

 

그래서 카테고리 엔티티에 userId 필드를 추가해주었다.

Todo에서 User 객체를 가지고 있어서, 카테고리에는 User의 id만 갖고 있게 하였다.

카테고리의 parent 필드는 Category 타입이여서,

카테고리를 삭제할때는

일단 하위카테고리/할일을 남겨두기 위해

- todo에 있는 category를 null처리 해주고, 

- 지우려는 카테고리도 상위카테고리가 있다면 null처리를 해주었다.

 

일일계획에서는

- 처음에 Day를 PK로 했었는데, 생각해보니 그러면 row가 쌓일수가 없어서

- ID를 만들어 auto 증가되게 했고

할일 테이블과의 관계는 

할일 : 일일계획 =  N : M 인데 (할일을 여러날에 걸쳐 할수도 있고, 하루에 여러 할일을 할 수도 있으므로)

- 김영한님 말씀대로 N:M 연관관계는 RDB에서 표현할 수 없고, 중간테이블을 만들어야 하는 불편함이 있어서

- todo 엔티티를 직접 참조하지 않고, todoId만 저장하였다.

 

그리고 카테고리 없는 할일들까지 login User의 목록을 보여주게 수정하고

 

오늘할일 목록을 보여주려는데

여기 DailyPlan 테이블에 user 정보가 없어서, 

todo에서 user꺼 검색하고, 그 todo들이 오늘날짜에 있는지 검색하면 되긴 하지만..

쿼리를 짜면 짤 수 있지만, 너무 비효율적인 것 같아서

DailyPlan 테이블에 user 객체 컬럼을 추가해주었다.

이제 코드를 수정하러 Go Go~~ 💃