자바 웹 공부 61 - SpringBoot(새로 만들기13 / 게시판) + Axios

 

이어서 front-end와 back-end를 합치는 것을 해보자

 

front -> board -> src -> views -> MyPageView -> myPageContents -> index

 

주석 해제 시켜주고, 쿠키를 상수로 들고 오고

굳이 return이 필요 없으므로 지워주자

---

총 코드

 

constants -> api로 가서 추가해 줘야 위에 에러가 안 걸림

 

hooks -> paginghooks로 가서 추가

 

MyPageContent로 와서 아래에 에러가 뜨는데 수정

BoardListItem 가서 추가를 해주고

 

실행을 하면 에러가 사라져 있다.

로그인하고 마이페이지를 눌러보면

내가 쓴 글이 나온다. 하지만 새로고침을 하게 되면 cookie가 있지만 에러가 걸려서 로그아웃이 되어버린다.

 

MyPageContent로 가서! user를 없애버리고 다시 재실행하면 로그인이 유지된다.

 

Main -> MainHead -> index로 가서

 

constants -> api 가서 추가 후 돌아와서 넣어주고

얘 ctrl + 클릭 후 바꿔주고

아래에 에러 뜨는 것들도

바꿔주자

 

그러면 배경이 이렇게 바뀐다(배경이 하얀색이라 그럼)

---

검색했을 때 나오게 하는 기능

 

components -> ParpularCard -> index로 가서 수정

 

Main -> MainContents로 가서

 api가서 추가 후 넣어주고

 

searchView로 가서

 

board-> boardDetaileView -> index로 가서

이렇게 수정해 주고 아래에 가서

img를 boardImgUrl로 변경

더 아래로 내려가면 openLike가 있는데

LikeListItem ctrl + 클릭 후 들어가서 변경

 

hooks -> paging 가서 고치고

다시 돌아와서

commentList를 없애고 그냥 이렇게 지정해 주자

 

이렇게 바꾸고 CommentListItem으로 가서

 

주의할 점은 꼭 Comment 저런 것들이 import 되었는지 확인하자 저거 안 들어가서 애꿎은 시간만 버렸다.

---

views -> board -> BoardWriteView로 가서

작성을 해줄 거다.

 

이렇게 해주고 return 위에 토큰에 대한 것 좀 넣어주자

이건 위쪽에 넣어주고 아래에는

이걸 만들어 주는데 왜 boardTitle, content냐 하면 위에 상수로 만들어놔서 그렇다.(Img는 방금 만듦)

 

api로 가서 추가 후 돌아와서 넣어주자

useEffect위에 onWirteHandler가 있는데 여기에 postBoard()를 넣어주자

 

다 되었으면 브라우저 -> 마이페이지에 들어가서 글을 쓰고

새로 만들어진 것이 확인이 가능하다.

그런데 문제점이 하나 생겼는데

조회수가 2씩 올라간다;;

 

useEffect를 걸어놔서 2번씩 되는 거 같다.

 

boardDetailView에 가서

openComment 밑에

이제 새 로고침해서 해보면

검색기능도 잘 된다.

 

App.tsx로 가서

이렇게 바꿔주자