개요

기존에 Nuxt.js를 사용해서 시니어 패션 서비스인 Kalimba를 구현했었다. 하지만 React 시장이 커지고 있는 것을 보고 나중에 개발자를 구할 때, React 개발자를 구하는게 편하다고 생각되어 React를 공부할겸 만들어 보았다.

공부 내용 정리

1) 폴더 구조

React로 처음 프로젝트를 진행할 때, 가장 많이 고민하던 부분이었다. 참고할 블로그가 있어서 링크로 대체한다.

참고 블로그

2) 스타일 적용

Nuxt에서 React로 프로젝트를 진행할 때, 제일 적응이 안되었던 것은 Style 방법이었다. React에서는 css in js가 보편화된 방법으로 주로 styled component나 emotion을 사용했지만 너무 어색하고 불편했다. (지금은 적응되니 사용할만하다.)

결국에는 emotion + tailwind 조합을 사용하기로 결정했다. emotion으로 굵직한 스타일을 설정하고 tailwind로 가벼운 스타일(1~2개의 스타일 설정)과 전역으로 사용할 색깔을 설정해주기로 하고 진행하고 있다.

그리고 스타일 파일을 따로 분리해서 사용해주고 있다.

// Login.js
import * as styled from './Login.styled';

  return (
    <>
      <styled.Header>
        <BackButton />
        <span>로그인</span>
      </styled.Header>
    </>
  )

// Login.styled.js
import styled from '@emotion/styled'

export const Header = styled.header`
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  height: 10%;
`

3) react cookie

Naver 로그인을 구현하기 위해 accessToken과 refresh Token을 저장하고 서버와 통신해야했는데 react cookie를 사용해서 저장했다.

utils의 폴더에 cookie관련 함수를 작성하고 필요할 때, 사용했다.

// utils/cookies.js
import { Cookies } from "react-cookie";


const cookies = new Cookies();

export const setCookie = (name, value, option) => {
    return cookies.set(name, value, { ...option });
};

export const getCookie = (name) => {
    return cookies.get(name);
};

export const removeCookie = (name) => {
    cookies.remove(name);
};

4) craco를 사용한 절대 경로 관리

상대경로로 필요한 컴포넌트를 가져오려다보니 import ~ from ~ 이 지저분해지는게 불편했다. 그래서 craco를 설치해서 절대 경로 설정을 해주었고 scss도 사용해서 전역변수 설정을 해주었다. (지금은 tailwind 사용으로 사용하지 않음.)

craco 문서

React 18부터는

npm i @craco/craco@alpha

으로 설치해야한다.

// craco.config.js 예시
const CracoAlias = require('craco-alias');

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `
			./src/styles/main.scss
        `,
      },
    },
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          '@api': './src/api',
          '@assets': './src/assets',
          '@components': './src/components',
          '@hooks': './src/hooks',
          '@pages': './src/pages',
          '@style': './src/style',
          '@utils': './src/utils',
        },
      },
    },
  ],
}

5) useEffect 무한 루프 문제

useEffect를 통해서 서버에서 데이터를 가져오는 비동기 함수를 호출했더니 무한루프 문제가 발생했다. 원인과 해결방법은 다음 블로그에 잘 설명되어 있다.

참고블로그

느낀점

결국에는 프로젝트를 해보면서 폴더 구조를 정리하고 다른 사람들의 프로젝트를 참고하면서 프로젝트를 체계화하는 것이 중요하다고 느꼈다. 점점 리액트에 익숙해져서 뿌듯하다.