1. 게시글 생성 모달
게시글 생성을 따로 페이지로 나눈 것이 아닌 모달창으로 만들어서 게시글을 생성할 수 있도록 만들었습니다.
-
흐름
1. 이미지 입력받기
2. 이미지 프리뷰 + 게시글 컨텐츠 작성
3. 게시글 생성 버튼 클릭 -
이미지 처리 순서는 회원가입과 마찬가지로 구현했습니다.
1. 사용자가 이미지 업로드
2.multipart/form-data형식으로 이미지 전송
3.multer를 이용해서 이미지를 서버 측public폴더에 저장
4. 저장한 이미지들의 이름을 배열로 반환
5. 클라이언트에서 해당 이미지 이름으로 프리뷰를 보여줌
추가적으로 이미지는 파일 탐색기를 이용해서 받거나 drag/drop방식으로 받을 수 있도록 만들었습니다.
또한 모달창을 굳이 닫기 버튼을 클릭하지 않더라도 모달 영역을 제외한 다른 영역을 클릭 시 닫히도록 만들었습니다.
2. 최신 게시글들 불러오기
GET의 /post?lastId=0요청으로 최신 게시글을 불러오도록 만들었습니다.
그리고 불러온 게시글들을 각각 PostCard 컴포넌트로 만들고 grid-box를 이용해서 한 라인에 3개씩 배치되도록 만들었습니다.
- 최신 게시글들 데이터 형식
[
// 게시글 하나
{
// 게시글 식별자
_id,
// 게시글 내용
content,
// 게시글의 이미지들
Images: [
"이미지이름",
// ...
]
// 게시글 작성자
User: {
// 게시글 작성자의 식별자
_id,
// 게시글 작성자의 이름
name,
// 게시글 작성자의 프로필 이미지
Image: {
// 게시글 작성자의 프로필 이미지의 식별자
_id,
// 게시글 작성자의 프로필 이미지의 이름
name
},
},
// 게시글 좋아요 누른 사람들
Likers: [
{ _id },
// ...
],
// 게시글 댓글들
Comments: [
{ _id },
// ...
]
},
// ...반복
]위의 형식대로 데이터를 받아오고 redux의 store에 저장해서 사용하고 있습니다.
최대한 최소한의 정보만 가져오려고 했으며, Likers나 Comments 같은 경우에는 게시글의 상세 정보 모달에 들어가지 않는 이상 자세한 정보는 필요없고 개수만 필요하기 때문에 개수만 세는데 필요한 정보만 JOIN해서 가져오도록 만들었습니다.
lastId는 불러온 게시글 중 가장 마지막 게시글의 식별자를 의미하는 변수이고, 그 값을 기준으로 이후 30개씩 게시글을 불러오도록 설계했습니다.
3. 특정 게시글 불러오기
게시글의 상세 정보를 볼 때도 새로운 페이지보다는 모달을 이용해서 구현했습니다.
현재 게시글 관련 컴포넌트 구조가 PostPage.jsx에서 최신 게시글에 대한 요청을 하고 PostCard.jsx에 하나씩 뿌려주는 방식입니다.
처음에는 PostCard에 특정 게시글에 대한 모달창을 넣어서 클릭 시 모달창이 열리도록 만들었지만, 조금 생각해 보니 각 PostCard에 모달창을 넣기보다는 그 상위 컴포넌트인 PostPage에서 특정 게시글에 대한 식별자만 받아서 모달창을 열어주는 게 더 효율적이라고 생각해서 PostPage에 모달창을 넣고 PostCard에서 클릭 시 식별자만 넘겨줘서 해당 식별자에 해당하는 게시글에 대한 상세 정보를 요청해서 받아오는 방식으로 구현했습니다.
마무리
1. 문제 해결 - forwardRef
모달의 경우 컴포넌트로 만들어서 다른 컴포넌트에서 불러서 사용하도록 구현했습니다.
이때 문제가 발생했던 게 모달의 ref가 있어서 모달을 제외한 다른 영역을 클릭했는지 알 수 있는데 컴포넌트에 ref를 전달하면 props로 전달되기만 하고 ref가 제대로 등록되지 않는 문제가 발생했습니다.
콘솔 창에 컴포넌트에 ref를 사용하니 경고 창이 떠서 문제의 원인을 파악하고 forwardRef를 이용해서 해결했습니다.
2. 잠재적 문제 의심 - lastId
아직 게시글을 많이 생성하지 않기도 했고, 게시글 상세 내용 보기부터 구현 중이라서 lastId를 이용한 무한 스크롤링이 정상적으로 동작하는지 확인을 해보지 못해서 현재 구현 중인 기능만 구현하고 난 뒤 정상적으로 동작하는지 테스트할 예정입니다.
