React-nodebird-04

UihyunLee·2022년 4월 14일
0

react/nodebird

목록 보기
5/10

더미데이터

  • 더미데이터의 중요성

프론트엔드 개발자는 백엔드 쪽과 연동하여 데이터를 주고 받기 전에는 데이터를 완전히 저장하는 것에는 한계가 있다.

하지만 브라우저가 종료되기 전에는 localStorage, store 등을 이용해 데이터를 저장할 수 있는데,

결국에는 후에 백엔드에 데이터를 보내고 받아오는 일을 해야 하기 때문에, 형식을 미리 백엔드와 의사소통을 통해 알 수 있고, 백엔드가 완성되기 전에는 더미데이터를 이용해서 데이터를 저장하고 사용할 수 있다.

저번 시간에는 더미데이터의 값이 이미 정해져 있었는데,
이번에는 다른 기능, component들도 추가하고, 더미데이터 형식도 바꿔서 내가 넣은 값이 더미데이터에 실제로 들어가도록 변경했다.

유저가 로그인을 하면 LOG_IN_REQUEST 액션이 실행되고
state의 user안에 내가 입력한 데이터를 가진 더미데이터가 들어간다.
components/LoginForm.js

const onSubmitForm = useCallback(
        (e) => {
            //onFinish = e.preventDefault() 가 이미 적용되어있음~!
            if (email && password) {
                dispatch({
                    type: LOG_IN_REQUEST,
                    data: {
                        User: {
                            nickname: "Vanc",
                            email,
                        },
                    },
                });
            }
        },
        [email, password]
    );

-reducers/user.js

const dummyUser = (data) => ({
    id: shortId.generate(),
    email: data.User.email,
    nickname: data.User.nickname,
});

user.js 코드의 dummyUser이다. id에는 아이디를 랜덤으로 만들어주는 라이브러리인 shortid 를 통해 만들어주고 이메일과 닉네임은 받아온 데이터를 통해 가져온다.

이렇게 값을 더미데이터에 전달하기 위해서는 액션을 dispatch 해줄 때 알맞게 주는 것이 중요하다.

이렇게 user 정보가 알맞게 저장이 되었다면,
post, comment를 추가하는 것도 어려운 것이 아니다.

reducer/post.js
post reducer의 dummyPost,dummyComment 이다.

const dummyPost = (data) => ({
    id: shortId.generate(),
    User: {
        id: data.User.id,
        nickname: data.User.nickname,
    },
    content: data.content,
    Images: [],
    Comments: [],
});

const dummyComment = (data) => ({
    User: {
        id: data.User.id,
        nickname: data.User.nickname,
    },
    content: data.content,
});

여기서 생각해야 할 부분은 comment는 게시글에 달리는 것인데, 어떻게 해야할까 ? 라는 생각이 당연할 것이다.

사실 간단한데 ADD_COMMENT_REQUEST 액션이 실행할 때 data에 게시글 id도 같이 전달하고 전체게시글에서 id가 같은 것을 찾고 그 게시글에 댓글을 추가하면 되는 것이다. ( 코드는 아래와 같다 )

[ADD_COMMENT_REQUEST]: (state, action) =>
            produce(state, (draft) => {
                const post = draft.mainPosts.find(
                    (v) => v.id === action.data.id
                );
                post.Comments.unshift(dummyComment(action.data));
                draft.addCommentLoading = true;
                draft.addCommentDone = false;
                draft.addCommentError = null;
            }),

ps

아직 대학생이다 보니 중간고사 기간이 다가와서 수업을 다시 듣고 있다.
(it쪽 관련 과이긴 하지만, 이런 개발과는 대부분 수업이 동떨어져 있기 때문에.. 따로 코테 공부, 개발 공부 한다고 하나도 못(안) 들었다.. 🤦‍)

중간고사 끝나면 또 바로 정보처리기사 실기 시험도 있다 하하..
실무에 있으신 분들께 들어보면 크게 의미는 없다고 하지만 개발 지식도 많이 포함이 되어있고 전부 기억은 못해도 후에 조금이라도 도움이 되지 않을까 싶어서 실기도 조금씩 준비중이다.

기사 시험도 깔끔하게 끝나고 개발 지식을 조금 더 쌓고, 방학이 다가오면 바로 백엔드하시는 분들과 프로젝트를 진행해볼 계획이다 👋👋!

profile
공부 기록

0개의 댓글