원티드 프리온보딩 프론트엔드 코스 3주차 회고 (1) — Next.js

프리온보딩을 시작하고 나니 시간이 무지 빠르게 흐른다. 드디어 3주차! 이번에는 Next.js를 처음 써 보게 되었다. 이름만 들었을 때 어려울 것 같았던 Next.js는 막상 해 보니 생각보다 어렵지는 않았지만, 역시 처음이라 그런지 어렵긴 어려웠다. (모순덩어리) 사실 마감 기한까지도 완벽하게 이해하지 못했는데 프리온보딩 코스가 끝나고 복습하고 나서야 조금씩 이해하는 중이다....

 

 

이번 과제에서 나는 상품 상세 페이지, 고객센터와 마이페이지, e2e 테스트를 맡았다.

 

 

 

아무튼 시작~

 

 

 

 

 

1. 상품 상세 페이지

처음에는 리액트에서 components를 작성하는 것과 동일하게 components 폴더 내에 페이지마다 폴더를 나눠서 컴포넌트를 작성했다. 

컴포넌트 분리 방식

컴포넌트 분리 기준은 위 사진과 같이 분리했다. 

OptionItem에서 유효기간을 표시하는 로직, 할인율을 구하는 로직, 가격에 세 자리마다 콤마를 찍는 로직은 따로 분리해 utils 폴더에 다음과 작성했다. 

export const getSaleRate = (
    originalPrice: number,
    sellingPrice: number,
): number => {
    return Math.round(((originalPrice - sellingPrice) / originalPrice) * 100);
};

export const getExpiryDate = (date: string): string => {
    if (date.length === 24) {
        const dateArray: string[] = date.substring(0, 10).split('-');
        return `${dateArray[0]}.${dateArray[1]}.${dateArray[2]}`;
    } else {
        const dateArray: string[] = date.split(' ');
        const month = getMonth(dateArray[1]);
        const day = dateArray[2];
        const year = dateArray[3];
        return `${year}.${month}.${day}`;
    }
};

export const get3DigitsCost = (cost: number): string => {
    return cost.toLocaleString();
};

 

하지만 따로 분리해 작성한 로직에 버그가 있었다. 유효기간을 표시하는 getExpiryDate 함수와 숫자의 경우 3자리마다 콤마를 찍는 get3DigitsCost 함수에서 버그가 발생했다. 따라서 리팩토링 과정을 걸쳐 버그를 수정했다.

 

getExpiryDate 함수에서는 2022.03.20 형식이 아닌 undefined.undefined.undefined 형식으로 값이 리턴되는 버그가 있었다. 이유는 API에서 값을 받아 왔을 때  2023-03-20T00:00:00+09:00 / 2022-03-20T15:00:00.000Z 두 가지 형식의 값을 랜덤하게 받았기 때문이다. (주로 페이지를 새로고침 했을 때 후자의 형식으로 값이 넘어왔음) 처음에는 string을 가공하여 리턴 값을 만들려고 했으나, API에서 넘겨 준 형식은 Date 함수를 이용한다면 쉽게 가공할 수 있다는 것을 알게 되어 다음과 같이 수정했다.

 

export const getExpiryDate = (input_date: string): string => {
    const date = new Date(input_date);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}.${month > 10 ? month : `0${month}`}.${
        day > 10 ? day : `0${day}`
    }`;
};

​

 

 

 

 

두 번째로 get3DigitsCost 함수에서 콤마가 찍히지 않는 버그는 get3DigitsCost 함수의 인자로 string 타입이 전달된다면 string 타입을 number로 바꾸도록 수정해 해결할 수 있었다.

 

3,620원이 아닌 3620원으로 표시

 

 

export const get3DigitsCost = (cost: number | string): string => {
    return typeof cost === 'string'
        ? Number(cost).toLocaleString()
        : cost.toLocaleString();
};

 

 

 

 

 

 

2. Redux 사용하기

Next.js에서 Redux를 사용할 때는 순수 리액트로 작성했을 경우와 달리 추가 설정을 거쳐야 한다고 한다.

 

npm i next-redux-wrapper

우선 next-redux-wrapper 패키지를 추가로 설치해 줬다.

 

 

// store/index.ts

import { configureStore } from '@reduxjs/toolkit'; 
import { createWrapper } from "next-redux-wrapper";

const makeStore = () =>
    configureStore({
        reducer: {
            fetch: fetchDataSlice.reducer,
            brand: selectBrandSlice.reducer,
            option: optionSlice.reducer,
            category: categoryIdSlice.reducer,
            mypage: mypageSlice.reducer,
        },
    });

export const wrapper = createWrapper(makeStore, {
    debug: process.env.NODE_ENV !== 'production',
});

작성한 리듀서들을 모아 store를 생성한 뒤, 생성된 스토어를 createWrapper에 담아 wrapper를 생성해 줘야 한다.

 

 

// pages/_app.tsx

import type { AppProps } from 'next/app';
import { wrapper } from 'store';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
	return <Component {...pageProps} />
};

export default wrapper.withRedux(MyApp);

그리고 wrapper의 withRedux HOC을 사용해 App 컴포넌트를 감싸 준다. 그러면 각 컴포넌트의 getInitialProps, getServerSideProps, getStaticProps에서 store에 접근할 수 있다고 한다.

 

 

리덕스를 세팅할 때 참고한 글들에 HYDRATE라는 액션을 통해 서버와 클라이언트의 상태를 합치는 작업을 수행할 수 있다는 설명도 있었는데, 완벽하게 이해가 되지 않아 한 번 더 설정을 해 봐야 할 것 같다.

 

 

 

 

 

3. 고객센터와 마이페이지

 

우리 팀은 프로젝트를 나눠서 진행할 때 메인 페이지, 카테고리 페이지, 브랜드 페이지, 상품 상세 페이지를 나누고 시작해서 고객센터와 마이페이지가 남는 상황이었다. 어떻게 할까 정하다가 우리 팀은 가장 어려운 부분들 도맡아 하고 싶어 하는 열정적인 사람들만 모여 있는 팀이니(다들 존경...) 먼저 할당량을 어느 정도 끝낸 사람이 고객센터와 마이페이지를 작업하자고 얘기를 해 놓은 상태였다. 그리고 내 작업이 제일 먼저 끝났다. 그래서 고객센터랑 마이페이지 제가 할게요~ 했다.

 

 

 

고객센터

고객센터는 위 이미지와 같이 구매 탭과 판매 탭이 나누어져 있고, 구매 탭과 판매 탭을 각각 클릭하면 하단의 질문 목록이 클릭한 탭에 맞게 바뀌어야 한다. 그리고 나는 처음엔 탭을 클릭하면 각 탭에 해당하는 qna 데이터를 가져와 화면이 리렌더링 되는 형식으로 구현하려고 했다. 그러나 내 마음과 같지 않았음.... 🥲 고객센터의 라우팅은 구매 / 판매가 나뉘어져 있는 형식이 아닌 동일한 endpoint 내에서 화면만 바뀌는 형식이었다. 그러니 CSR로 구현했을 경우에는 초기에 fetch 해 오는 구매 탭의 데이터만 받아 올 수밖에 없었을 것이다. 

 

 

따라서 이 부분은 하단의 코드처럼 QnaList 측에서 구매와 판매 데이터를 미리 fetch 해 놓고, 탭 클릭 이벤트가 발생하면 그에 맞는 데이터를 렌더링하도록 구현했다. 

 

import { useState } from 'react';
import useAxios from 'hooks/useAxios';
import { Qas } from 'types/qaTypes';
import Qna from './Qna';

const QnaList = ({ qaId }: { qaId: number }) => {
    const qaBuyList = useAxios<Qas>(`qas?qaTypeId=1`);
    const qaSellList = useAxios<Qas>(`qas?qaTypeId=2`);
    const [currentQa, setCurrentQa] = useState<number>(0);
    if (!qaBuyList || !qaSellList) return <div>로딩중</div>;
    return (
        <section>
            <div>
                {qaId === 1
                    ? qaBuyList.qas.map((qa) => (
                          <Qna
                              key={qa.id}
                              qa={qa}
                              currentQa={currentQa}
                              setCurrentQa={setCurrentQa}
                          />
                      ))
                    : qaSellList.qas.map((qa) => (
                          <Qna
                              key={qa.id}
                              qa={qa}
                              currentQa={currentQa}
                              setCurrentQa={setCurrentQa}
                          />
                      ))}
            </div>
        </section>
    );
};

export default QnaList;

 

그리고 더 나아가 CSR로 탭을 클릭했을 때 QnaList가 바뀌도록 고쳐서 문제를 해결할 수 있었지만, 새로고침을 했을 때 404 오류가 나는 상황이 발생했다. 따라서 이 부분은 구매 탭과 판매 탭의 QnaList를 미리 fetch 해 놓는 게 현명할 것이라고 판단했다. (물론 탭이 많아질 경우에는 비효율적이기 때문에 다른 방법으로 구현해야겠지만 현재는 데이터가 몇 개 없는 상황이기 때문에!)

 

 

또한, 프로젝트를 할 당시에는 Next.js에 너무 맨땅에 헤딩을 했던 터라 getServerSideProps의 사용법을 제대로 알지 못했다. 

 

아프겠다

 

 

그래서 Next.js를 썼다는 것에 의의가 있지만 아쉬움이 남는 프로젝트였는데, 이후 리팩토링을 하면서 getServerSideProps를 사용해 리팩토링을 진행했고, 각 컴포넌트 내에서 데이터를 fetch 해 오던 로직을 다음과 같이 SSR로 처리할 수 있도록 변경했다. Contact 외에도 브랜드 페이지, 카테고리 페이지에서도 getServerSideProps를 사용하였다.

 

// pages/contacts/index.ts

// 변경 전
   
import Contact from 'components/Contact';
import React from 'react';

const Contacts = () => {
    return <Contact />;
};

export default Contacts;

 

// pages/contacts/index.ts

// 변경 후

import axios from 'axios';
import Contact from 'components/Contact';
import React from 'react';
import { ContactType } from 'types/index';

const Contacts = ({ qaTypes, qaBuyList, qaSellList }: ContactType) => {
    return (
        <Contact
            qaTypes={qaTypes}
            qaBuyList={qaBuyList}
            qaSellList={qaSellList}
        />
    );
};

export async function getServerSideProps() {
    const { data: qna } = await axios.get('/qa-types');
    const { data: qaBuy } = await axios.get('/qas?qaTypeId=1');
    const { data: qaSell } = await axios.get('/qas?qaTypeId=2');

    const qaTypes = qna.qaTypes;
    const qaBuyList = qaBuy.qas;
    const qaSellList = qaSell.qas;

    return { props: { qaTypes, qaBuyList, qaSellList } };
}
export default Contacts;

 

 

 

 

마이페이지

 

고객센터를 먼저 작업한 후, 메인에서 고객센터로 접속할 수 있도록 메인의 햄버거 메뉴를 누르면 마이페이지 메뉴가 나오게 구현해야 했다.

바로 이렇게~

 

 

 

 

화면은 별것 없어서 쉬웠으나 애니메이션 부분에서 애를 먹었다. 첫 번째 문제는 우리는 데스크탑과 모바일 뷰를 따로 구현하는 게 아니라 데스크탑 화면 내에서 모바일 비율로 보일 수 있게끔 전체 컴포넌트를 담고 있는 div의 레이아웃을 설정했는데, 마이페이지가 오른쪽으로 슬라이드되는 애니메이션을 적용하니 전체 div의 위쪽에서 날아오는 것처럼 보였다. 그리고 두 번째 문제는 마이페이지가 열릴 때는 애니메이션이 동작하지만, 닫힐 때는 애니메이션 없이 그냥 없어진다는 거였다.

 

이게 아닌데

이 부분은 다른 팀원 분이 손봐주셔서 해결할 수 있었다. (감사합니다 😭)

첫 번째 문제는 전체 div에 overflow-x: hidden 속성을 추가해서 해결했다. 두 번째 문제는, 닫기 버튼을 클릭하면 display: none 속성을 사용해 보이지 않도록 설정했었는데, 이런 방식을 사용했기 때문에 애니메이션 없이 그냥 마이페이지 창이 사라질 수밖에 없었다. 따라서 다음과 같이 display:none 속성과 keyframes을 작성하고 animation을 지정하는 방식에서 transform을 직접 지정하는 방식으로 변경했다.

 

// 변경 전
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const slideLeft = keyframes`
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-600px);
  }
`;
const slideRight = keyframes`
  from {
    transform: translateX(-600px);
  }
  to {
    transform: translateX(0px);
  }
`;
const MypageDiv = styled.div<{ isOpen: boolean }>`
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: block;
    z-index: 100;
    ${({ isOpen }) => {
        if (!isOpen) {
            return css`
                animation-name: ${slideLeft};
                display: none;
            `;
        }
    }}
    overflow: hidden;
    animation-duration: 250ms;
    animation-timing-function: ease-out;
    animation-name: ${slideRight};
    animation-fill-mode: forwards;
`;

// 변경 후
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const MypageDiv = styled.div<{ isOpen: boolean }>`
    
    // 동일한 부분 생략
    
    transform: translateX(-100%);
    transition: 0.7s;
    display: block;
    ${({ isOpen }) => {
        if (isOpen) {
            return css`
                transform: translateX(0);
            `;
        }
    }}
`;

 

 

마이페이지의 애니메이션 이슈와 마찬가지로 상품 상세 페이지의 옵션을 선택하는 창에서 닫힐 때만 애니메이션이 적용되지 않는 문제를 같은 방법으로 해결할 수 있었다.

 

수정 전과 수정 후

 

 

 

 

4. cypress를 사용한 E2E 테스트

이번 프로젝트는 처음 사용해 보는 기술이 많은 만큼 의미 있는 프로젝트인 것 같다. E2E 테스트도 처음으로 도전해 보게 되었다. 마지막 날 새벽까지 잠도 안 잘 각오로 이러쿵저러쿵 부딪히고 있었지만 E2E 테스트를 구현해 보라는 요구사항도 무시할 수는 없었다.

 

검색 결과 cypress를 가장 많이 사용하는 것 같았다. 그래서 일단 cypress를 사용하기로 했다.

 

그리고 시간이 없다고 판단해 cypress에서 제공하는 선택자 이름을 제안해 주는 기능을 사용했는데, CSS in Js 방식으로 스타일링을 해서 그런지 클래스 이름이 깔끔하지 않고 서버를 다시 켤 때마다 바뀔 가능성이 있었다. 그래서 제대로 작동하지 않았다.

 

 

 

 

따라서 cypress에서 권장하는 data-cy 속성을 추가하고 E2E 테스트를 다시 작성했다.

 

 

 

// 고객센터 e2e 테스트 예시
// cypress/integration/contact.spec.js

describe('고객센터', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should navigate from homepage to the contact page', () => {
        cy.get('[data-cy=hamburger-menu]').click();
        cy.get('[data-cy=contacts]').contains('고객센터').click();
        cy.url().should('include', '/contacts');
        cy.get('[data-cy=qna-list] > :nth-child(1)').click();
        cy.get('[data-cy=qna-answer]')
            .contains(
                '니콘머니, 모바일 쿠폰은 현금성 유가증권에 해당되므로, 현금영수증이 별도로 발행되지 않습니다. 매장에서 구매하신 쿠폰으로 결제시 직원에게 요청하시면 발급이 가능합니다. 단, 일부 이벤트 쿠폰의 경우 현금 영수증 발행이 불가할 수 있으며 해당 사유로는 환불이 불가한 점 양해 부탁드립니다.',
            )
            .should('be.visible');
        cy.get('[data-cy=contact-tap-2]').click();
        cy.get('[data-cy=qna-list] > :nth-child(1)').contains(
            '바로 정산은 안 되나요?',
        );
        cy.get('[data-cy=qna-list] > :nth-child(1)').click();
        cy.get('[data-cy=qna-answer]')
            .contains(
                '판매하신 쿠폰은 사고 발생율을 줄이기 위해 수락일을 기준으로 2영업일 후에 정산금으로 전환되며, 은행 거래 시스템상 바로 지급은 어려운 점 양해 부탁드리겠습니다.',
            )
            .should('be.visible');
        cy.get('[data-cy=back-menu]').click();
        cy.wait(500);
        cy.get('[data-cy="header-title"]').contains('니콘내콘');
    });
});

깔끔쓰

 

첫 E2E 테스트도 깔끔하게 작성하기 성공! 

 

 

 

 

---

 

아마 프리온보딩 교육 중 제일 오래 걸리고 어려웠던 과제가 아닐까 싶다. 그렇지만 큰 산을 넘으면 다음 고비(?)는 그나마 넘기 쉬워진다고 역시 어려운 과제로 내가 더 많이 성장할 수 있는 것 같다. Next.js에 대해서는 더 많이 사용해 보고, 더 많이 공부해 봐야 익숙해지겠지만 첫 Next.js를 팀원들과 함께해 쉽게 포기하지 않을 수 있었고, 더 빠르게 배우지 않을 수 있지 않았을까 생각해 본다. 아직 이것저것 배울 것이 너무 많지만 프로젝트를 하며 아쉽다고 생각했던 포인트인 getServerSideProps와 E2E 테스트를 사용해 리팩토링했기 때문에 그래도 나름 뿌듯함이 담겨 있는 회고글이다. ✌🏻

 

 

 

 

참고

Next.js + redux toolkit 기본 세팅

Next.js에서 redux-toolkit 세팅하기

E2E테스트 with Cypress

Cypress Elements 선택하기 (data-cy 사용과 제거)

 

 

 

팀 레포지토리

GitHub - console-lo9/ncnc-app: 니콘내콘 모바일 웹페이지를 클론한 프로젝트입니다.

 

 

개인 레포지토리 (리팩토링 코드 포함)

GitHub - ttaerrim/ncnc-app: 니콘내콘 모바일 웹페이지를 클론한 프로젝트입니다.