[Refactoring] 우당탕 삽질 리팩토링 프로젝트 - 1

엘리스 SW 엔지니어 트랙 7기가 마무리 되었다.

부트캠프가 끝나고 내가 작성했던 글들, 프로젝트 들을 정리하며 이력서랑 포트폴리오를 정리하고 있는데..

첫번째 프로젝트를 했던 코드를 다시 찬찬히 훑어보니, 수정해야할 부분들이 너무 많이 보였다. (이 날것 상태의 코드를 포트폴리오에 써보자니 조금 부끄럽기도 했고..ㅎㅎ)

수정 해야 할 게.. 왜 자꾸 보이지

리액트를 처음 응용했던 코드, 일정에 맞춰 급급하게 짰던 코드 등.. 프론트 엔드 파트는 내가 처음부터 참여하지 않아서 디렉터리 구조가 섞여있기도 하고.. 계속 손을 봐야할 곳들이 눈에 밟혔다. 

1차 프로젝트때 열심히 했던 기억도 있고, 고쳐보고 싶기도 한 마음이 들어서 이전에 같이 프로젝트를 진행했던 분이랑 함께 리팩토링을 해보기로 결심했다.🛠

 

# 브랜치를 정리해보자

첫 프로젝트를 진행하다보니 깃에 익숙하지 않은 팀원분들이 있어서 브랜치가 꼬이는 등 다양한 이슈로 인해 브랜치를 새로 파서 진행하다보니 엄청나게 많은 브랜치가 생겼었다. 백엔드 파트는 기능별로 브랜치가 나뉘어져있었지만, 프론트 파트는 브랜치 전략을 따로 가져가지 못했다. 

 

본인 브랜치에 마스터 브랜치를 합쳐버려서 master 브랜치를 revert한 브랜치도 보이고.. 아무든 우여곡절을 나타낸 브랜치들이 수두룩했다. 어차피 리팩토링을 하게 되면 풀스택으로 진행해야하니 이전에 사용했던 브랜치들을 정리하고, 기능별로 브랜치를 가져보려고 한다.

브랜치 삭제야 얼마 걸리지 않으니까 빠르게 정리해보자🏃‍♀️

 

새로운 브랜치 전략을 가져갈 거니, master만 남기고 싹 지웠다. 

 

# Refact [Pages] : Login & Join

 

현재 pages 디렉터리에는 페이지/component 등이 섞여있는 상태이다. pages는 페이지 별로 컴포넌트를 저장하는 폴더이니까.. 각 페이지 별로 폴더를 생성하고, 그에 맞는 api, jsx, css 파일을 넣어줘야겠다.

제일 먼저 가장 건들이기 쉬운 Loin, Join 페이지 부터 작업을 시작해보자! 🧚

 

Login, Join 과 관련된 api는 api/authAPI.js에 있고, css는 app.css 파일에 통합되어있다. 일단.. 폴더를 만들고 api 파일과 Login 파일을 넣었다. 추가로 app.css 파일에 있던 로그인 관련 css 들을 가져와 styled-component로 변경해주었다! 

 

import { Link } from 'react-router-dom';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import * as S from './Login.styles';
import { getUser } from './authAPI';

function Login() {
  const navigate = useNavigate();

  // 입력된 유저 아이디, 비밀번호
  const [userId, setUserId] = useState('');
  const [userPassword, setUserPassword] = useState('');

  // 이메일 형식 체크
  const emailRegEx =
    /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

  const emailCheck = (userId) => {
    if (userId === 'admin') {
      return true;
    }
    if (emailRegEx.test(userId)) {
      return true;
    } else {
      alert('이메일 형식이 아닙니다. 다시 입력해주세요.');
      return false;
    }
  };

  // 유저 정보 Id(email) get
  const signIn = async () => {
    if (emailCheck(userId)) {
      getUser({ email: userId, password: userPassword }).then((data) => {
        if (data === 'no user') {
          alert('존재하지 않는 아이디입니다. 회원가입을 해주세요.');
          return;
        } else if (data === 'INCORRECT') {
          alert('비밀번호를 확인해주세요');
          return;
        }

        alert('로그인에 성공하였습니다.');
        navigate('/');
      });
    }
  };

  return (
    <S.Container>
      <h3>SINBA_D</h3>

      <form>
        <input
          type='email'
          placeholder='이메일'
          required
          onChange={(e) => setUserId(e.target.value)}
        />
        <input
          type='password'
          placeholder='비밀번호'
          required
          onChange={(e) => setUserPassword(e.target.value)}
        />

        <S.LoginButton type='button' value='로그인' onClick={signIn} />

        <Link to='/auth/join'>
          <S.SignUpButton>회원가입</S.SignUpButton>
        </Link>
      </form>
    </S.Container>
  );
}

export default Login;

 

(Join 페이지 작업도 동일해서 따로 코드랑 사진 추가는 안하겠다)

 

이렇게 작업을 하다보니 "<Link to='/auth/join'> 요 부분이 눈에 띄었는데, 이런 path 값들도 다른 곳에서 쓰일 수 있다. 향후 페이지 라우팅 관련해서도 리팩토링을 해야하는데.. 이렇게 상수 값으로 쓰이는 것들을 한 파일에 넣어서 관리하고, 다른 파일에서는 그 값을 불러오는 형식으로 쓰면 좀 더 코드가 깔끔해 보일 것 같다.

 

코드를 작성하다보면 다양한 곳에서 같은 코드(라고 하기엔 조금 억양이 그렇고.. 상수?라고 생각한다)를 사용하는 상황이 빈번하게 일어난다. 프로젝트 내에서 쉽게 불러다 쓸 수 있도록 src 폴더 아래 "global" 이라는 폴더를 새로 생성하고, "constants.js" 파일을 생성해 자주 사용할 상수값?들을 넣어줬다. 

// 페이지 라우팅 관련 path
export const PATH = {
  root: '/',
  login: '/auth/login',
  join: '/auth/join',
};

 

지금 당장은 login과 join 페이지 path 만 넣어놨지만.. 리팩토링을 하면서 차차 추가 될 예정이다.