20220129 개발일지

오늘은 개인과제의 페이지들은 모두 구현하는 것으로 목표를 정했다.

게시판 글쓰기(/write)를 다른 페이지로 분리하고, detail페이지를 완성하였다.

첫날 진행하면서 페이지 구현방식에 고민이 있었는데, 페이지 로드는 기본적으로 타임리프를 사용하여 controller에서 해당 html을 return해주는 식으로 했고, 그 다음에 ajax를 통해 필요한 데이터들을 restcontroller 방식으로 불러왔다.

 

게시글 상세보기같은 경우에는 게시글 박스에 링크를 걸어서 누르면 /detail로 이동하게 하였고,

조회할 게시글 id값도 보내주었다.

다음과 같이 url로 하면 해당 url에 접속했을 때 detail.html이 return되도록 controller에 작성해주어야 한다.

혹은 detail.html을 입력할 수도 있는데 이 경우에는 static에 해당 html이 있어야 한다.

wirte페이지를 타임리프로 불러와서 detail도 동일하게 타임리프로 페이지를 로딩하였다.

onclick="location.href='/boards/detail'; throwid(${id})"

//id값을 넘기는 함수
function throwid(id) {
    localStorage.setItem('id', id)
}

그리고 detail페이지에서는 이렇게 id값이 받아와서 Get요청으로 데이터를 불러왔다.

let id = localStorage.getItem('id');

 

detail에서는 댓글 작성과 댓글 조회를 추가로 구현했다.

작성은 게시글 작성과 비슷해서 금방 구현햇는데, 댓글 조회부분이 잘 안되었다.

처음에 게시글 조회하기와 동일한 api여서 (예상한 것 처럼) 오류가 났고, api를 다르게 했을 때는 화면에 추가한 댓글이 뜨지 않았다.(db에 저장은 확인했다.)

 

마침 튜터님이 게더에 방문하셔서 질문을 드렸는데 api는 다르게 해서 두 번 호출하면 된다고 했다. restcontroller면 어차피 데이터만 내려주는거니까 한 화면에 구현하는 것은 상관없다고 하셨다.

 

생각해보니 api랑 url을 좀 햇갈려했던 것 같다.

get방식은 해당 url을 입력하고 엔터를 치면 조회가 된다는 것에 너무 집중했던 것 같다.

url과 상관없이 데이터만 받아오는 상황이고, api는 서버와만 맞춰 데이터를 잘 받아와서 붙이는 건 html에서 구현하면 된다.

그리고 'id'값이 여러곳에서 사용되면서 햇갈렸던 것 같다.

댓글을 불러올 때 id(댓글의 id)가 아니라 해당 댓글의 boardId로 조회를 해야했다.

(사실 userId로 수정해놨다가 개발일지 쓰면서 userId가 아니라!! boardId로 조회해야 한다는 것을 알고 다시 고쳤다)

commentRepository에 boardId로 조회 + 최신순 정렬할 수 있게 메소드를 새로 만들었다.

boardId는 처음에 comment 작성할 때 ajax로 같이 보내주고 comment, commentDto에도 해당 컬럼을 추가하였다.

 

그리고 카카오 로그인 기능도 구현하였다.

그런데 카카오 로그인을 기존 User에 합칠지, 분리할지, 그러면 관련된 다른 기능들을 어떻게 할지 설계가 필요하다.

우선은 심화강의처럼 기존 User에 kakaoId를 컬럼으로 추가하였다.

현재 모든 조회는 boardId로만 이루어지고 있어서 UserId가 당장은 큰 문제는 없을 것 같은데, 로그인한 사용자에 따라 권한을 설정해 줄 때 문제가 될 수도 있을 것 같다.

그리고 카카오 로그인 후 리턴값을 "redirect:/"로 하면 문제가 없는데, "redirect:/boardslogin"으로 하면 로그인 창이 제대로 뜨지 않는 문제가 있다.

 

월요일에 스프링 시큐리티 공부하면서 권한 부분 기능 구현하면서 다시 살펴봐야할 것 같다.

로그인에 따라 다른 창이 보이도록 html을 2개 만든 부분이 있는데, 다른 창도 모두 그렇게 하면 너무 html파일이 많아질 것 같아서 튜터님 조언처럼 local storage + show/hide처럼 버튼을 보이고, 숨기게 하는 방식을 찾아봐야 할 것 같다.