원티드 프리온보딩 프론트엔드 코스 2주차 회고 (2) — Redux

채용 과제를 하거나, 취업해서 회사가 생기고 나면 전역 상태 관리 툴을 사용하는 경우가 많을 거다. (어마어마한 props drilling으로 모든 걸 해결하지 않을 거라고 생각....) 그래서 리액트를 하면서 redux, recoil 같은 전역 상태 툴을 알고 있는 게 필수라고 생각했는데, 나는 왜 그동안 사용하지 않았는지?  아무튼 이번에는 리덕스를 필수로 사용하는 과제였고, 이전에도 Context API나 리덕스 튜토리얼 (정도지만)을 통해 사용해 봤기 때문에 그닥 걱정은 되지 않았다!

 

 

우선 이번에는 과제 변경 사항이 많았기 때문에 족금 정신이 없었고... swit 과제는 프로토타입이 없었기 때문에 디자인은 어떻게 하지 생각하다가 swit은 이미 잘 사용되고 있는 메신저이기 때문에~ 웹 버전 디자인을 참고하면 되겠다고 생각했다. (디자인이라도 쉽게 가자 마인드 맞고요 피그마 사용이라든지 디자인은 전체적으로 조금 자신 없었음 그러나 그렇게 회피한 것이 나중에 현실로 일어납니다)

 

 

그리고 리덕스를 사용할 건지 리덕스 툴킷을 사용할 건지도 회의할 때 말했었는데, C언어부터 배운 전공자 입장에서는 역시 어려운 걸 먼저 배워 봐야 다음에 배울 것도 쉽고...... (마치 C나 자바 배우다가 파이썬을 처음 배웠을 때 쉬웠던 것처럼) 그래서 리덕스를 사용해 보고 싶었다. 팀원 분들이 좋아서 그렇게 해 주셨다. 내 의견만은 아니었겠지?

 

 

요구 사항에 본인이 작성한 메시지는 옆에 * 표시가 붙는다고 해서 간단한 로그인 기능이 있어야겠다~ 했고, 이를 파이어베이스로 구현하자고 하셔서 조금 오버스펙이 아닌가 싶었으나 다행히도 localStorage + redux 조합으로 잘 해결했다.

 

 

 

아무튼 시작~

1. useFetch & json-server

위 스샷에 보이는 것처럼 사이트에 접속하면 5명이 떠들고 있는 채팅이 미리 출력되어야 한다. 이를 위해 목 데이터를 우리가 만들고 저번에 사용했던 json-server를 사용하는 게 어떠냐~ 제안했는데 괜찮을 것 같다고 해서 저번과 같은 방식으로 진행했다.

그리고 custom hook을 사용하면 좋을 것 같다 싶어서 useFetch 훅을 먼저 작성하고 진행하게 되었다.

import { useEffect, useState } from 'react';

const useFetch = (url) => {
    const [state, setState] = useState();
    useEffect(() => {
        const request = async () => {
            const json = await (await fetch(url)).json();
            console.log(json);
        };
        request();
    }, []);
    return state;
};

export default useFetch;

 

 

 

 

 

2. 메시지 답장 기능

협업을 하기 전 요구 사항을 살펴보니까 메시지 입력, 답장, 삭제 부분을 구현해야 했다. 근데 이 부분이 뭔가 협업할 때 딱딱 나눠진 부분이 아니라 조금 곤란할 것 같아서 redux store 부분을 같이 작성하고 진행하기로 했다.

import { createStore } from 'redux';

export const FETCH = 'FETCT';
export const ADD_MESSAGE = 'ADD_MESSAGE';
export const REPLY_MESSAGE = 'REPLY_MESSAGE';
export const REMOVE_MESSAGE = 'REMOVE_MESSAGE';

export const addMessage = (userId, userName, profileImage, content) => ({
    type: ADD_MESSAGE,
    userId,
    userName,
    profileImage,
    content,
});
export const replyMessage = () => ({ type: REPLY_MESSAGE });
export const removeMessage = () => ({ type: REMOVE_MESSAGE });

const initialState = [];

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH:
            return (state = action.value);

        case ADD_MESSAGE:
            return state.concat({
                userId: action.userID,
                userName: action.userName,
                profileImage: action.profileImage,
                content: action.content,
                date: new Date(),
            });
        default:
            return state;
    }
};

const store = createStore(todoReducer);

export default store;

대충 이~~ 렇게 Fetch부터 먼저 해 보기.

 

나는 리덕스를 사용한 프로젝트는 처음이어서 그랬는지는 모르겠는데, fetch 하는 것부터 꽤 오래 걸렸던 것 같다. ^^ 그치만 해결 못 하는 오류는 없다고 내가 또 해냄! 내가해냄!

 

 

 

그리고 내가 맡은 답장 기능은 답장 버튼을 누르면 해당하는 메시지를 보낸 사람, 메시지 내용, (회신) 이렇게 세 가지를 입력창에 자동 입력하는 기능이었다. 이 기능은 버튼을 누르면  `${보낸 사람}\n${메시지}\n(회신)\n` 이런 문자열을 redux로 관리하고, 입력창에서 불러오도록 했다. 체크박스에 치여서 그랬는지 몰라도 나름 쉬웠음...

 

 

 

 

 

 

 

 

3. 입력창에 맞춰서 스크롤 내리기

이런식으로 입력창이 커지면 입력한 채팅도 올라가게 만들고 싶었다. 왜냐면 스윗이 그렇게 생겼음.... 그러니까 우리가 원하는 요구사항 중 하나였음.

 

그런데 기존 메시지를 출력하는 컴포넌트와 메시지를 입력하는 컴포넌트가 분리되어 있어서 어떻게 하면 둘을 연결시킬 수 있을까...... 고민을 많이 했다! 

 

그래서 내가 생각한 방법은 메시지 출력하는 Div에 useRef를 이어 주는 건데, 그걸 상위에서 정의하고, 메시지 출력 컴포넌트와 입력 컴포넌트에 모두 전달한다.

 

const Main = () => {
    const MsgBoxRef = useRef();

    return (
        <Messages MsgBox={MsgBoxRef} />
        <NewMessage MsgBox={MsgBoxRef} />
        )
}

이런 식으로! (Messages가 출력 담당이고 NewMessage가 입력 담당)

 

 

그리고 Messages에서는 메시지들을 감싸는 전체 div에 MsgBox를 연결해 준다.

const Messages = (props) => {

    return (
        <S.StyledMessages ref={props.MsgBox}>
           // 생략
    )
 }

 

 

 

입력창 박스 크기에 따라 Messages의 출력 div 스크롤을 맨 밑으로 내리는 함수는 NewMessage 컴포넌트에서 정의해 줬다. 

const scrollHandler = () => {
        MsgBox.current.scrollTo({
            top: MsgBox.current.scrollHeight,
        });
    };

useEffect(() => {
    scrollHandler();
}, [scrollHeight]);

이런 식으로 전달받은 MsgBox의 스크롤을 가장 밑으로 내리고, 입력창의 높이가 담겨 있는 scrollHeight가 변할 때마다 scrollHandler를 실행하도록 작성해 주니까 잘됐음. 

 

 

 

 

 

 

 

4. 입력창 안에 전송 버튼

이건 마감 기한이 있어서 적당히 타협하고 제출한 건데, 축소하면 저 버튼이 입력창을 빗나간다...... 🤦🏻 물론 시도했던 건 여러 방법이 있다.

 

1. input 창 absolute, button도 absolute 설정하기

이건 축소해도 버튼이 input 창 안에 잘 ! 얌전히! 있는데 문제가 뭐냐면 3번에서 쓴 입력창에 맞춰 스크롤 내리는 게 안 된다.

 

2. input 창 relative, button만 absolute 설정하기

위 스샷이 이렇게 설정한 결과다. 스크롤이 더 우선순위라고 생각했고, 축소만 안 하면 버튼이 잘 있으니까(...) 일단은 이렇게 설정했다.

 

 

그리고 해상도마다 버튼 위치도 약간 달랐는데, 이건 버튼 스타일은 rem으로 하고, input에서는 px로 설정해서 조금 달랐던 것 같다. 똑같이 px로 바꾸니까 심각하게 다르진 않았다.

 

예전 프로젝트부터 리팩토링 하고 있어서 좀 후순위지만 얘도 아무튼 리팩토링 대상이다.

 

🤦🏻

 

 

 

 

+ 22.04.01 

textarea와 button의 부모인 div와 form의 align-items 값을 center에서 flex-end로 바꾸면서 원하는 대로 어떤 해상도에서든 버튼이 인풋 창 안에 들어가도록 구현했다. 어떻게 알았느냐 하면, textarea의 height가 늘어나면 textarea가 div에 꽉 차게 되었으나 초기에는 div의 정렬을 center로 설정했기 때문에 textarea에 여백이 생겼었고, 그 때문에 버튼의 position을 absolute로 설정하고 bottom 값을 0으로 주었을 때 textarea에서 살짝 비껴나가게 된 것이다. 한참 동안 내 머리를 아프게 했던 쥐고 있던 숙제를 드디어 해결해서 뿌듯하다! 

 

absolute와 relative 문제인 줄 알았는데 한 가지 문제에 focus를 맞추는 게 아니라 여러 요인을 모두 살펴야 에러를 해결할 수 있다는 걸 다시금 깨닫게 된다. 

 

 

이게 되네!

 

---

 

그래도 전 과제에 비하면 쉽게 느껴져서 짧은 시간에 굉장한 성장을 해냈구나! 싶었다. 깃허브에 이슈 관리도 했었는데, 잘 사용하면 프로젝트 일정 관리에 유용했을 텐데 지금 생각해 보니 아쉽다. 이때쯤 되니 배포는 거의 기본이 돼서 Netlify를 통한 배포는 아주 수월하게 했었던 기억이. ㅎㅎ 리덕스도 더 큰 프로젝트에서 사용해 보고 싶다. 가독성 있는 리덕스 코드 작성하는 게 은근 까다롭고 어려운 것 같다.

 

 

 

전체 코드는 여기서 확인해 주세요. 🥰

GitHub - console-lo9/messenger: 메신저 과제 구현 내용을 담은 레포지토리입니다