이번 WIL의 키워드 :
MVP개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지?
웹으로 즐기는 라이어게임을 개발하면서 내가 맡은 부분 첫번째는 실시간 채팅이다.
위와 같이 게임방을 들어가게 되면 참가자들이 이용할 수 있는 채팅으로
sockjs/stomp를 이용해 간다하게 구현해봤다.
메신저와 같이 1:1로 소통을 한 기록들을 저장하고, 불러오는 과정
그리고 내가 보낸 메세지와 상대방이 보낸 메세지의 생김새(?)가 크게 다르지 않아서
가볍게 접근해 볼 수 있었던 것 같다.
sokcjs/stomp를 이용하기 위해 많은 부분 다양한 블로그 자료들을 찾아보고
내가 필요한 부분들만 최소한으로 적용했지만, 완전하게 이해를 하진 못 한 것 같다.
안그래도 어제 중간발표가 있었고, 피드백을 주신 멘토님께서
socket 통신을 위한 sockjs를 조금 더 깊게 파보면 좋을거라고 말씀해주셔서
나중에 시간을 가지고 socket에 대해서 공부해 보려고 한다.
두번째는 게시글의 댓글 기능을 담당했다.
이전에는 항해에서 제공해주는 학습 자료들을 따라하고 적용해보면서
게시글 또는 댓글에 redux와 redux-thunk를 사용했었다.
수정 버튼을 누르게 되면 초기화된 input을 보여줬었는데
이전에 작성했던 글을 보여주고 그대로 수정을 하고 싶었다.
그리고 댓글 작성하고 조회, 삭제까지는 이해했었는데 수정하는 부분에서
1) 수정 버튼을 누르게 되면 get 으로 댓글을 조회하고
2) 비어있는 입력창에 수정 할 내용을 입력하고
3) 저장버튼을 눌러 put 업데이트 할 내용을 보내줬다.
당시에는 이 과정을 크게 불편함을 못 느끼고 그냥 적용했었는데
생각해보니 굳이 전역 관리와 통신을 2번으로 나눠서 할 필요가 있을까 라는 생각을 해봤고
이번에는 그 부분을 줄여서 댓글을 작업해봤다.
function CommentsForm() {
// 전체 게시글 조회 api
const getAllComments = async (payload) => {
await instance.get(`/lier/post/${payload}`).then((response) => {
const getComments = response.data.data.comments;
setComments(getComments);
});
};
return (
<>
<div className="commentsLayout">
<span className="commentsCount fontBold">{`댓글 ${comments.length}`}</span>
// CommentsList 컴포넌트에 props로 값을 넘겨줌.
<CommentsList comments={comments} />
<CommentPost />
</div>
</>
);
}
export default CommentsForm;
function CommentsList({ comments }) {
return (
<>
// 하나씩 렌더링 하기 위해 map을 사용했고
// 값을 CommentItem 컴포넌트에 한 번더 넘겨줬다.
{comments &&
comments.map((comment) => (
<CommentItem key={comment.commentid} comment={comment} />
))}
</>
);
}처음으로 댓글을 하나로 묶어주는 컴포넌트에서 전체 게시글을 조회를 하고
조회를 했던 값을 CommentList 컴포넌트에 props로 넘겨줬다.
두번째로 넘겨준 데이터를 하나씩 렌더링하기 위해 map을 사용했다.
그리고 한번 더 CommentItem 컴포넌트에 값을 넘겨줬다.
function CommentItem({ comment }) {
// 처음 조회했던 데이터를 관리(?)하는 useState
const [value, setValue] = useState(comment);
// 수정하는 댓글을 관리(?)하는 useState
const [editValue, setEditValue] = useState(value);
// 댓글 수정 api
const editComment = async (payload) => {
console.log(payload);
await instance
.put(`/lier/comment/${payload.commentid}`, payload.content)
.then((response) => {
alert(response.data.data);
});
};
// ...
<div className="commentEditInputContainer">
<textarea
className="commentEditInput fontBold"
value={editValue.content}
// 2. setEditValue에 새로 입력하는 값을 담아준다.
onChange={(e) => setEditValue(e.target.value)}
>
// 1. 조회한 댓글 내용을 그대로 보여준다.
{value.content}
</textarea>
<div className="commentEditBtn">
<button
className="editCancelBtn fontBold"
onClick={() => setIsEdit(false)}
>
취소하기
</button>
<button
className="editRegisterBtn fontBold"
// 3. 버튼을 눌러 새로운 값을 업데이트 한다.
onClick={() =>
editComment({
commentid: value.commentid,
content: editValue,
})
}
>
댓글등록
</button>
</div>
</div>이전에 학습자료를 참고했을 때 보다 과정을 줄일 수 있게 됐다.
