🔥 핵심 기술

1️⃣ 상태관리 라이브러리 도입

팀원들 모두 React 프로젝트가 처음이었기 때문에 React에서 만들어서 문법 친화적인 상태 관리 라이브러리 Recoil 을 전역에서 사용하기로 결정.

• 팀원들과 함께 JD를 분석해본 결과 현재 프론트엔드 업계에서 요구하는 역량 중 Fetch 함수를 실행할 때 반복되는 코드를 간결하게 만들어주는 axios 와 React Query 를 우대하는 것을 확인.
• 상태 관리를 하나의 라이브러리로만 진행하는 것이 아니라 각각의 라이브러리의 장점을 살려 Client State를 관리하는 Recoil과 ServerState를 관리하는 ReactQuery를 조합하는 전략을 시행.

Client State

Recoil

• Client가 소유하며 온전히 제어
• 항상 Client 내부에 저장되며 조작에 따라 최신상태로 갱신

• Recoil은 React에서 만든 상태 관리 라이브러리
• key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 동일한 상태를 공유하므로 atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링.
• 회원의 정보를 저장하는 userDataAtom 회원의 로그인 유무와 API 통신을 위한 Token을 저장하는 privateDataAtom 을 전역에서 활용할 수 있도록 저장.
• 프로젝트를 진행하며 Modal 뉴스레터를 위한 EarthUs 공식 계정 정보 에 대한 상태를 추가로 전역에 저장.

Server State

React Query

• Fetching Updating 비동기 API 실행
• Client가 제어하거나 소유하지 않는 원격의 Server 공간에서 관리

• React Query 는 반복적인 비동기 API 통신을 쉽게 처리하고 업데이트, 캐싱, 에러처리 등을 쉽게 처리할 수 있는 라이브러리.
• DevTool을 제공해주기 때문에 API 통신에 대한 디버깅에 용이.
• 비동기로 서버 통신에 성공하면 data 를 반환하고, 에러가 발생하면 error 객체로 데이터를 반환하는 유틸 기능을 프로젝트에 도입하기로 결정.

2️⃣ API 호출을 위한 커스텀 훅 제작

• API 요청과 응답 데이터 로직을 간결하게 작성할 수 있도록 axios, ReactQuery 사용
• 각 페이지마다 통신을 할 때 API 명세를 기준으로 아래와 같이 커스텀 훅을 4가지로 분류해서 제작.
• useApiQuery
  • 사용자에게 데이터를 보여주는 HTTP METHOD GET 요청과 같이 서버에 저장되어 있는 상태를 호출해서 사용할 때 사용.
  • 커스텀훅 작동 방식

파라미터	역할
queryKey	전송 Url으로 자동으로 생성되도록 설계.
queryFn	Query 요청을 수행하기 위한 Promise를 Return 하는 함수.
options	useQuery에서 사용되는 refetchOnWindowFocus, enabled Option 공통 적용.

// useQuery 구조
const { isLoading, error, data } = useQuery(
    [apiUrl],         // queryKey
    executeQuery,     // queryFn
    {                 // Options
      // 브라우저 화면을 이탈했다가 다시 포커스할 때 refetch 방지
      refetchOnWindowFocus: false,
      // 쿼리 실행 여부를 Boolean을 통해 제어
      enabled,
    },
);

• • 사용자에게 데이터를 보여주는 HTTP METHOD GET 요청과 같이 서버에 저장되어 있는 상태를 호출해서 사용할 때 사용.
  • 커스텀훅 작동 방
  • 리액트 쿼리 useQuery의 queryFn 영역에 excuteQuery 함수를 콜백으로 전달.
  • 전송 Url, 메서드, body(json), enabled 를 인자로 받은 후 axios를 활용해서 API에 요청 전송.
  • API 명세에 공통으로 들어가는 headers는 고정으로 설정.
  • 응답에 성공할 경우 isLoading error data 로 반환.

// 전체 코드 로직
const executeQuery = async () => {
  try {
    const headers = {
      "Content-type": "application/json",
      Authorization: `Bearer ${token}`,
    };
    const res = await axios({
      url: BASE_URL + apiUrl,
      method: "",
      headers,
      data: body,
      enabled: true,
    });
    if (res.status === 200) {
      return res.data;
    }
  } catch (error) {
    return error;
  }
};

const { isLoading, error, data } = useQuery(...);
return { isLoading, error, data };

• useApiMutation
  • 사용자가 데이터를 제어하는 HTTP METHOD POST, PUT, DELETE 요청과 같이 서버에 Side Effect를 발생시켜 상태에 변이를 발생시킬 때 사용.
  • 커스텀 훅 작동 방식

파라미터	역할
mutationKey	전송 Url으로 자동으로 생성되도록 설계.
mutationFn	Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수.
options	useMutation에서 사용되는 Option 객체로 필요한 경우 페이지에서 직접 작성해서 사용.

// useMutation 구조
const mutations = useMutation(
  executeMutation, {    // mutationFn
  mutationKey: apiUrl,  // mutationKey
  ...options,           // options
});

• • 리액트쿼리 useMutation의 mutationFn 영역에 executeMutation 함수를 콜백으로 전달.
  • 전송 Url, 메서드, data, options 를 인자로 받은 후 axios를 활용해서 API에 요청 전송.
  • API 명세에 공통으로 들어가는 headers는 Token이 있는지 식별한 후 고정으로 설정.
  • 외부 파일에서 커스텀 훅 호출시 입력폼을 작성한 후 버튼에 이벤트 핸들러에 mutate 함수를 추가하면 이벤트 발생시 SideEffect 발생.

// 전체 코드 로직
export default function useApiMutation(
  apiUrl = "", method = "", data = null, options = {},
) {
  const executeMutation = async () => {
    const headers = {
      "Content-type": "application/json",
    };
    token && (headers.Authorization = `Bearer ${token}`);

    const res = await axios({
      url: BASE_URL + apiUrl,
      method,
      headers,
      data,
    });
    return res.data;
  };

  const mutations = useMutation(executeMutation, {...});
  return mutations;
}

// 게시물 업로드 핸들러 이벤트 예시
const handleUploadPost = e => {
  e.preventDefault();
  uploadPostMutation.mutate();
};

• useImageUploader
  • useApiMutatuion Hook 과 같이 서버에 Side Effect를 발생시켜 상태에 변이를 발생시키며 <input type=”file”/> 을 통해 image 확장자를 업로드하는 경우 사용.
  • API 명세에서 이미지 등록이 필요한 페이지에서는 서버에 이미지를 전송하면 숫자로 이루어진 filename 을 포함하는 응답을 반환하므로 해당 기준에 맞춰 조건식 실행.
  • 커스텀 훅 작동 방식

파라미터	역할
mutationKey	전송 Url으로 자동으로 생성되도록 설계.
mutationFn	Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수.
options	useMutation에서 사용되는 Option 객체로 필요한 경우 페이지에서 직접 작성해서 사용.

// 로컬 이미지 서버에 등록
const executeImageUpload = async files => {
  const formData = new FormData();

  // files가 배열인지 아닌지 확인 후 배열이 아니면 배열로 변환
  const filesArray = Array.isArray(files) ? files : [files];
  
  // 배열에 있는 모든 파일을 formData에 'image'라는 키로 추가
  filesArray.forEach(file => {
    formData.append("image", file);
  });

  // axios로 formData를 전송해서 data 반환
  const response = await axios.post(BASE_URL + apiUrl, formData);
  return response.data;
};

// useMutation 구조
const mutation = useMutation(executeImageUpload, {
  onSuccess: data => {
    // 반환 받은 data가 배열인지 식별 후 filename 추출
    let filenames;
    (Array.isArray(data)) {
      filenames = data.map(d => d.filename);
    } else {
      filenames = [data.filename];
    }

    // 이미지 주소를 BASE_URL과 조합해서 image 상태에 저장.
    const apiImg = filenames
      .map(filename => `${BASE_URL}/${filename}`)
      .join(",");
    setImage(apiImg);
  },

// 전체 코드 로직
export default function useImageUploader(apiUrl) {
  const [image, setImage] = useState("");

  const executeImageUpload = async files => {...};
  const mutation = useMutation(...);

  return { mutation, image };
}

• • 리액트쿼리 useMutation의 mutationFn 영역에 executeImageUpload 함수를 콜백으로 전달.
  • 전송 Url, formData 를 인자로 받은 후 axios를 활용해서 API에 요청 전송.
  • 파일을 2장 이상 등록했을 경우 filename 이 배열로 반환되므로, 단일이미지와 동일한 로직으로 처리하기 위해 .join 배열메서드를 통해 문자열을 하나로 취합하여 image 변수에 저장.

• useApiInfiniteQuery

  • 사용자에게 데이터를 보여주는 HTTP METHOD GET 요청과 같이 서버에 저장되어 있는 상태를 계속해서 호출해서 사용할 때 사용.
  • 사용자가 스크롤할 때마다 새로운 데이터를 가져오는 무한 스크롤 구현에 사용.
  • react-infinite-scroller 라이브러리의 InfiniteScroll 컴포넌트와 높은 호환성.
  • 커스텀훅 작동 방식

파라미터	역할
queryKey	전송 Url으로 자동으로 생성되도록 설계.
queryFn	InfiniteQuery 요청을 수행하기 위한 Promise를 Return 하는 함수. pageParam 파라미터 사용.
options	useInfiniteQuery에서 사용되는 getNextPageParam Option 공통 적용.

// useInfiniteQuery 구조
const { data, hasNextPage, fetchNextPage, isLoading, isError } =
  useInfiniteQuery(
    [apiUrl],                 // queryKey
    executeInfiniteQuery,     // queryFn
    {                         // Options
      // 다음 API 요청에 사용될 pageParam 반환
      // 한 페이지의 데이터 길이가 LIMIT보다 작을 경우 undefined 반환
      // 그 외의 경우 현재 페이지 수 * LIMIT 반환
      getNextPageParam: (lastPage, allPages) => {
        const resKey = keyName;
        if (
          keyName
            ? lastPage[resKey] && lastPage[resKey].length < LIMIT
            : lastPage && lastPage.length < LIMIT
        ) {
          return undefined;
        }
        return { skip: allPages.length * LIMIT };
      },
    }
);

• • 리액트 쿼리 useInfiniteQuery의 queryFn 영역에 excuteInfiniteQuery 함수를 콜백으로 전달.
  • excuteInfiniteQuery 함수에서 pageParam 을 인자로 전달하여 API 요청 전송 Url의 skip 파라미터 값으로 사용.
  • 전송 Url, 응답 key 값 을 인자로 받은 후 axios get 메서드를 활용해서 API에 요청 전송.
  • API 명세에 공통으로 들어가는 headers는 고정으로 설정.
  • 응답에 성공할 경우 data hasNextPage fetchNextPage isLoading isError 로 반환.

// 전체 코드 로직
const executeInfiniteQuery = async ({ pageParam = { skip: 0 } }) => {
  const { skip } = pageParam;
  try {
    const headers = {
      "Content-type": "application/json",
      Authorization: `Bearer ${token}`,
    };
    const res = await axios.get(
      `${BASE_URL + apiUrl}?limit=${LIMIT}&skip=${skip}`,
      { headers },
    );
    if (res.status === 200) {
      console.log("요청에 성공했습니다.");
      console.table(res.data);
      return res.data;
    }
  } catch (error) {
    return error;
  }
};

const { data, hasNextPage, fetchNextPage, isLoading, isError } =
  useInfiniteQuery(...);
return { data, hasNextPage, fetchNextPage, isLoading, isError };

• • hasNextPage fetchNextPage 는 InfiniteScroll 컴포넌트에서 사용. hasMore 가 true인 경우 loadMore 를 실행하여 데이터 로드.

<InfiniteScroll hasMore={hasNextPage} loadMore={() => fetchNextPage()} />

3️⃣ 시맨틱 마크업

검색 결과 하이라이트

• 검색 API를 통한 기능 구현에서 일치하는 검색어에 하이라이트를 표시할 때 사용.
• <mark>는 사용자의 현재 활동과 연관이 있는 부분을 나타내며 주의를 끌기 위해 사용하는 태그.
• 따라서, 검색 결과 텍스트에 시맨틱한 의미를 부여하기 위해 <mark>를 적용해 스타일링.

  // Link 랜더링 조건부 출력
  function renderLinkContent() {
    // Search 페이지 하이라이트 관련
    if (SEARCH) {
      const regex = new RegExp(searchKeyword, "gi");
      const userNameWithHighlight = userName.replace(
        regex,
        match => `<mark class="highlight">${match}</mark>`,
      );

      return (
        <>
          <Avatar profileImg={profileImg} size={40} />
          <div>
            <span dangerouslySetInnerHTML={{ __html: userNameWithHighlight }} />
            {id ? <p>@{account}</p> : ""}
          </div>
        </>
      );
    }

    return null;
  }

4️⃣ 웹 접근성

디자인

• 글꼴 및 배경 색 명도 대비 준수.

• 버튼을 아이콘으로만 보여주는 게 아니라 문자를 사용하여 직관적으로 의미 전달.

키보드

• swiper slide 탭으로 페이지 전환 가능.
• 모달이 열렸을 때 모달 안에서 포커스 잃지 않고 이동.
• <input type=“file” />의 파일 선택 커스터마이징 버튼 탭 키로 접근 가능.
  <input type=“file” />의 파일 선택 버튼을 커스터마이징하는데 label 태그 안에 button 태그를 사용할 수 없어 div 태그에 탭 키로 접근 가능하도록 role=“button” tabIndex={0}속성 추가.

스크린 리더

• 검색 기능 사용 시, 검색어와 일치하는 하이라이트 부분을 시각 뿐만 아니라 청각으로도 인지할 수 있게 음성 강조 효과 추가.

  mark::before,
  mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [강조 시작] ";
}

mark::after {
  content: " [강조 끝] ";
}

• 채팅방에 새로운 메세지 전송 시, 실시간으로 업데이트 되는 메세지 노드를 스크린 리더가 읽을 수 있게 aria-live 및 role 속성 적용.

<section
  className="sendBubble"
  role="log"
  aria-live="polite"
  aria-label="Chat"
>
  {messages.map(message => (
    <ChatBubble
      key={message.key}
      isReceived={false}
      sentMessage={message.content}
      uploadedImage={message.uploadedImage}
      currentTime={message.time}
    />
  ))}
</section>

5️⃣ Figma 디자인시스템 도입

• 피그마 Variable 기능을 활용하여 버튼 hover focus 등 다양한 타입에 대응할 수 있도록 디자인 시스템 제작.
• StyleComponent 를 활용해서 버튼 컴포넌트를 제작하고 props를 통해 타입을 정의하여 재사용성 증진.

버튼 컴포넌트 활용 예시

  <Button
    size="cta"
    variant={!disabledBtn && "primary"}
    type="submit"
  >
    로그인
  </Button>

버튼 컴포넌트 스타일 로직

const VARIANTS = {
  primary: css`
    --button-color: var(--color-white);
    --button-background: var(--color-primary);
    --button-border: 1px solid var(--color-primary);
    &::before {
      filter: invert(1);
    }
  `,
  white: css`
    --button-color: var(--color-black);
    --button-background: var(--color-white);
    --button-border: 1px solid var(--color-light);
    &::before {
      filter: invert(36%) sepia(93%) saturate(1033%) hue-rotate(183deg)
        brightness(88%) contrast(89%);
    }
  `,
};

const SIZES = {
  sm: css`
    --button-font-size: var(--font-size-xs);
    --button-padding: 0 1rem;
    --button-height: 2.25rem;
  `,
  md: css`
    --button-font-size: var(--font-size-md);
    --button-padding: 0 4rem;
    --button-height: 3rem;
  `,
  lg: css`
    --button-font-size: var(--font-size-lg);
    --button-padding: 0 6rem;
    --button-height: 4rem;
  `,
  cta: css`
    --button-font-size: var(--font-size-xl);
    --button-padding: 0 1rem;
    --button-height: 4rem;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    width: min(calc(100% - 2rem), calc(var(--size-max-width) - 2rem));
    border-radius: 0;
    align-items: center;
    justify-content: center;
    z-index: 10;
  `,
};

export default function Button({
  size,
  variant,
  children,
  icon,
  disabled,
  ...props
}) {
  return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <StyledButton
      icon={icon}
      size={size}
      variant={variant}
      disabled={disabled}
      {...props}
    >
      <span>{children}</span>
    </StyledButton>
  );
}

const StyledButton = styled.button`
  ${({ variant }) => VARIANTS[variant]}
  ${({ size }) => SIZES[size]}

  font:inherit;
  cursor: pointer;
  margin: 0;
  background: var(--button-background);
  border: var(--button-border);
  color: var(--button-color);
  padding: var(--button-padding);
  height: var(--button-height);
  line-height: var(--button-height);
  font-size: var(--button-font-size);
  border-radius: 0.25rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.4s ease-out;
  &:disabled {
    --button-color: var(--color-gray-76);
    --button-background: var(--color-bg);
    --button-border: 1px solid var(--color-bg);
    cursor: not-allowed;
    pointer-events: none;
  }

  &:hover {
    filter: brightness(0.9);
  }

  // icon이 있는 경우
  ${({ icon }) =>
    icon &&
    css`
      &::before {
        content: "";
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        background: url(${props => props.icon}) no-repeat center/1.5rem;
`}
`;