CRUD- Read : 게시글 불러오기 (2)

게시글들을 서버에 저장하고 만약 그 게시글들을 삭제하거나 수정 그리고 상세페이지로의 전환을 위해 게시글마다 특정한 아이디가 있어야한다.

 

그러면 우리는 게시글 마다 고유한 아이디를 부여해주어야한다,

 

고유한 아이디는 간단하게 숫자를 넣을 것이다,

 

먼저 순서를 그려보았다.

 

작동순서

 

1.고유한 번호를 만들기위한 counter DB생성을 위해 Counter 모델을 만들어줌

2. Counter모델을 생성하면 Counter DB가 생성됨

3. Counter DB에 수동으로 데이터를 만들어줌

4. 서버로 가서 만든 모델을 쓸수 있게 넣어줌

5. 이전에 만들었던 upload의 submit API를 수정해야됨(게시글마다 고유한 번호도 같이 저장되기위해)

6. 게시글을 생성하기 전에 Counter에 counter라는 이름의 데이터에서 postNum을 가져옴

7.postNum을 게시글 데이터에 추가해줌 ( 제목 , 내용, postNum- 3개의 데이터를 저장함)

8.Post에 저장해줌

9.Post에 저장하고 다시 Counter에 가서 counter 데이터를 또 불러와 postNum을 +1 증가시켜 update해줌(다음 게시글 생성에 필요한 고유한 번호를 위해서 증가함) -> 이는 추후에 게시글이 삭제가되어도 고유한 번호는 변하지않음

 

 

1.고유한 번호를 만들기위한 counter DB생성을 위해 Counter 모델을 만들어줌

 

 

2. Counter모델을 생성하면 Counter DB가 생성됨

3. Counter DB에 수동으로 데이터를 만들어줌

4. 서버로 가서 만든 모델을 쓸수 있게 넣어줌

5. 이전에 만들었던 upload의 submit API를 수정해야됨(게시글마다 고유한 번호도 같이 저장되기위해)

6. 게시글을 생성하기 전에 Counter에 counter라는 이름의 데이터에서 postNum을 가져옴

7.postNum을 게시글 데이터에 추가해줌 ( 제목 , 내용, postNum- 3개의 데이터를 저장함)

8.Post에 저장해줌

 

9.Post에 저장하고 다시 Counter에 가서 counter 데이터를 또 불러와 postNum을 +1 증가시켜 update해줌(다음 게시글 생성에 필요한 고유한 번호를 위해서 증가함) -> 이는 추후에 게시글이 삭제가되어도 고유한 번호는 변하지않음

 

 

 

 

 

☝게시글을 클릭하면 상세페이지로 이동

 

 

이제 게시글 리스트 데이터를 요청하면 그 안에는 postNum이라는 데이터가 추가됐다.

모든 게시글 태그에 Link태그를 추가하고 아래와 같이 postNum으로 경로를 지정해준다.

 

 

그럼 Route도 새로 만들어줘야한다(App.js)

상세페이지를 위한 Detail페이지도 생성해야된다.

 

 

 

 

그러면 이제 postNum으로 새로운 페이지를 들어갈 수 있게 된다.

 

 

☝useParams

상세페이지에서 서버에 데이터를 요청하려면 자신의 경로인 PostNum을 가져와야한다.

-> 그 PostNum으로 서버에서 게시글 데이터를 찾는것이다.

 

 

useParams를 가져온다

useParams를 생성해준다.

그럼 아래와 같이 postNum을 잘 가져온다.

 

 

 

☝상세페이지에서 해당되는 게시글 데이터 서버에 요청하기

 

서버에 postNum을 axios로 넘겨주고 데이터를 받아와야한다.

 

 

서버에서 상세페이지 게시글 데이터 가져오는 API를 생성한다.

 

 

findOne 명령어로 서버의 postNum과 클라이언트에서 받아온 postNum과 같은 데이터를 찾는다.

찾았으면 다시 그 데이터를 클라이언트에 post라는 이름으로 보내준다.

 

 

 

☝상세페이지에서 서버에 데이터를 요청하면 클라이언트는 기다려야하는 상황이온다(데이터가 많아지면 더느려짐)

-유저에게는 그런 상황에 데이터가 안보여지면 새로고침을 하거나 뒤로가기 버튼을 클릭하는 상황이 생긴다.

 

그런 상황을 막기위해

flag 라는 state를 생성하고

만약 true면 게시글 데이터를 띄워주고,

false면 로딩중인 화면을 띄워줘야한다.

 

 

로딩중인 화면은 부트스트랩을 이용했다.

 

flag선언해준다.

 

flag가 true면 게시글 데이터를 불러오고

false면 spinner 컴포넌트를 띄워준다.