[엘리스] 1차 프로젝트 회고록 - 07 시간부족

시간이 너무 아쉽다.

9팀 - 아침엔

날짜: 23-11-09

 

오늘 작업 내용

회원가입 구현

- API

import axios from 'axios';

// 유저정보 목록 불러오기 (로그인, 회원가입 중복 확인)
export const getUser = async ({ email, password }) => {
  try {
    const getItem = { id: email, password: password };
    const response = await axios.post('/api/auth/login', getItem);
    return response.data;
  } catch (err) {
    if (err.message === 'Request failed with status code 504') {
      return 'no user';
    }
    throw new Error(err);
  }
};

// 유저정보 보내기 (회원가입)
export const postUser = async ({ name, password, email }) => {
  try {
    const newItem = { name, password, email };
    const response = await axios.post('/api/auth/join', newItem);
    return response.data;
  } catch (err) {
    throw new Error(err);
  }
};

 

회원가입과 로그인을 위한 정보가 담겨있고, 보내는 API 이다. 로그인을 하기 위해서 아이디가 존재하면 에러 메시지를 띄우고, 회원가입시에 중복된 아이디가 존재하면 API가 알아서 걸러주는 'EXIST'를 보낸다.

 

- PAGES

 // 가입하기 버튼 클릭시 실행되는 함수
  const joinButtonClick = () => {
    if (
      emailCheck(userEmail) &&
      passwordCheck(userFirstPassword) &&
      passwordDoubleCheck(userFirstPassword, userLastPassword)
    ) {
      createNewUser();
      setUserName('');
      setUserFirstPassword('');
      setUserLastPassword('');
      setUserEmail('');
    }
  };

  // 회원가입 post
  const createNewUser = async () => {
    const newUser = {
      name: userName,
      password: userLastPassword,
      email: userEmail,
    };
    const result = await postUser(newUser);
    if (!result) {
      alert('회원가입에 실패했습니다.');
    } else {
      alert('회원가입 성공^ㅁ^');
      navigate('/auth/login');
    }
  };

  // 이메일 & 패스워드 정규식 표현
  const emailRegEx =
    /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
  const passwordRegEx = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;

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

  // 비밀번호 형식 체크
  const passwordCheck = (password) => {
    if (userFirstPassword.match(passwordRegEx) === null) {
      alert('숫자+영문자+특수문자 조합으로 8자리 이상 입력해주세요!');
      return false;
    } else {
      return true;
    }
  };

  // 패스워드 일치 확인
  const passwordDoubleCheck = (userFirstPassword, userLastPassword) => {
    if (userFirstPassword !== userLastPassword) {
      alert('비밀번호가 다릅니다.');
      return false;
    } else {
      return true;
    }
  };

회원가입시 이메일과 비밀번호 정규식을 두어 이메일 형식, 비밀번호 형식이 맞는지 체크한다. 비밀번호는 숫자, 영문자, 특수문자 조합으로 8자리 이상 입력해야 하고 비밀번호 확인을 해서 위의 비밀번호가 일치해야 한다. 다르면 alert를 뜨도록 작성했다.

 

라우트 연결

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/common/Header';
import Footer from './components/common/Footer';
import Detail from './pages/Detail';
import Cart from './pages/Cart';
import DeliveryAddress from './pages/DeliveryAddress';
import PurchaseCompleted from './pages/PurchaseCompleted';
import Home from './pages/Home';
import Login from './pages/Login';
import Join from './pages/Join';
import Userinfo from './pages/Userinfo';
import Top from './components/Top';
import Category from './pages/Category';
import ProductList from './components/ProductList';
import Products from './components/Products';
import ManageProducts from './pages/ManageProducts';
import ManageProduct from './components/ManageProduct';
import ManageProductNew from './pages/ManageProductNew';
import ManageProductEdit from './pages/ManageProductEdit';
import UserOrder from './pages/UserOrder';
import './css/app.css';

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path='/detail' element={<Detail />} />
        <Route path='/cart' element={<Cart />} />
        <Route path='/deliveryaddress' element={<DeliveryAddress />} />
        <Route path='/PurchaseCompleted' element={<PurchaseCompleted />} />
        <Route path='/' element={<Home />}></Route>
        <Route path='/category' element={<Category />}></Route>
        <Route path='/auth/login' element={<Login />}></Route>
        <Route path='/auth/join' element={<Join />}></Route>
        <Route path='/user' element={<Userinfo />}></Route>
        <Route path='/manageproducts' element={<ManageProducts />}></Route>
        <Route path='/productnew' element={<ManageProductNew />}></Route>
        <Route path='/plist' element={<ProductList />}></Route>
        <Route path='/user/order' element={<UserOrder />}></Route>
        <Route path='/productedit' element={<ManageProductEdit />}></Route>
        <Route path='/plist/:listType' element={<ProductList />}></Route>
        {/* <Route path='/plist/woman' element={<ProductList />}></Route>
        <Route path='/plist/man' element={<ProductList />}></Route> */}
      </Routes>
      <Top />
      <Footer />
    </Router>
  );
}

export default App;

디사한번 전체적으로 링크를 정리해서 완벽하게 이동이 가능하도록 마무리를 지어야겠다.

오류 해결 부분

- 로그인할때 API에 동일 아이디가 있는지 확인하는 데이터가 불러와지지 않아서 백엔드분과 같이 찾아봤더니

로그인은 get이 아닌 post였다.

- 카테고리 추가/삭제까지 오류 모두 마무리 했다.

-useEffect의 return 값은 함수형만 가능하다! 함수가 아니면 에러가 나온다.

 

느낀점

2주의 시간은 너무 짧다. 밤을 새가면서 하는데 새로운 언어를 배우면서 프로젝트를 한다는건 쉽지 않았다. 원하는 동작이 있는데도 로직을 짜고 코드를 생각하는 것 조차 쉽지 않아서 하나의 동작을 만드는데 시간이 많이 소요가 된다. 그래서 지금의 프로젝트가 너무 아쉽고, 좀더 욕심을 내고 싶은데 내 능력이 아직 많이 모자라 그것또한 너무 아쉽다. 그래도 서버도 모르는 내가 서버를 띄워서 오류를 해결하고 코드를 작성해가고 API가 무엇인지 정확히 몰랐는데 연결까지해서 데이터를 가공하는게 뿌듯하고 많이 성장하였음을 느꼈다. 좀더 쉬운 부분부터 차근차근 구현을 해올걸, 어려운 부분을 계속 붙잡고 있다가 시간을 많이 낭비해버린것 같기도 하다. 다음부터는 개발이 조금 늦어지더라도 설계가 탄탄해야 개발을 할때 있어서 막히는 부분 없이 진도를 나갈 수 있을것 같다. 구현해야할 부분이 생각보다 너무 많고 이제 하루 남았는데 완성을 할 수 있을지 걱정이 되지만 닿는데까지 열심히 할 예정이다!

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript