[회고록] Le-Chou project 회고🗣️

hello__0·2023년 1월 22일
1

채식 밀키트 판매 웹 프로젝트

프로젝트 리뷰

  • 오설록의 기본 디자인은 가져가되, 저희가 직접 기획안을 구상하여 새로운 사이트를 만들었습니다.
  • 저희 Le chou는 세 가지 문제: 처음 채식을 시도하는 사람들의 접근성이 제한되는 문제, 채식주의자들의 선택 제한, 그리고 환경보호에 가치를 두는 소비자들의 선택지를 늘려주기 위한 해답을 개발에서 찾았습니다.
  • 짧은 프로젝트 기간동안 두번의 스프린트 미팅을 가지면서, 해결하고자하는 문제점들을 개발을 중심으로 프로젝트를 진행하였습니다.
  • 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 백앤드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.

프로젝트 기간

: 2023.01.02 ~ 2023.01.13(12일)

사용한 기술스텍

협업 툴Front-endBack-end
GitReactNode.js
GithubReact-RouterJavascript
TrelloSassMySQL

구현 페이지

login

제일 처음 인스타그램 클론을 했을 때 각각의 input에서 value값을 받아 useState에 저장을 하는 방식을 했다.
하지만 이번에 프로젝트를 하면서

 const [form, setForm] = useState({}); 

방식으로 useState에 객체로 email과 password를 넣는 방식으로 Login을 구현하였다.

  const [form, setForm] = useState({
    id: '',
    password: '',
  });

그리고 정규표현식을 사용하여 조건을 걸어주었다.
정규 표현식을 사용하려면 꼭 필요한 메서드가 있는데 test메서드를 사용하여 boolean타입으로 리턴하게 된다.

  const pwCondition = /^[A-Za-z0-9]{6,20}$/;
  const idCondition =
    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

  const idIdValid = idCondition.test(form.id);
  const pwPwValid = pwCondition.test(form.password);

그리고 각각의 input에 조건이 맞지 않으면 input 밑에 text를 띄우는 방식으로 구현하였다.

signup

signup도 login과 마찬가지로 input에서 value값을 각각 useState에 넣어주었던걸 객체를 useState안에 넣는 방식으로 구현하였다.
하지만 input이 아닌 select의 속성에 대한 이해가 부족했기 때문에 객체 안에 담지는 못하였고 성별과 생년월일은 개별 useState에 담아서 구현하게 되었다.

mypage - 주문/예약관리

주문접수, 결제완료 같은 고정 데이터는 map함수를 이용하여 구현하였고, 상단의 숫자는 mock data로 구현하였다.
mock data를 구현하는 부분에서 useEffect로 데이터를 가지고 올 때 그 데이터가 객체인지, 배열인지에 따라 가지고 오는 방법이 달라서 시간이 오래 걸렸었다.

mypage - 활동내역, 나의혜택

나의 혜택부분에서 반복적인 button을 map함수를 이용하였고, 처음 ::before, ::after에 대해서 공부하게 되었다. JS의 innerText 같은 존재라고 느껴져서 생각보다 더 많은 곳에 쓰이지 않을까 라는 생각을 했다.

Benefits.jsx

      <nav className="item-list-wrapper">
        <ul className="item-list">
          <li className="item">
            <Link className="link-item" to="/orderReservation">
              주문/예약관리
            </Link>
          </li>
          <li className="item">
            <Link className="link-item" to="/activityList">
              활동내역
            </Link>
          </li>
          <li className="item">
            <Link className="link-item" to="/benefits">
              나의 혜택
            </Link>
          </li>
          <li className="item">
            <Link className="link-item">정보관리</Link>
          </li>
          <li className="item">
            <Link className="link-item">고객센터</Link>
          </li>
        </ul>
      </nav>
      <div className="tab-box">
        <div className="benefits-info">
          {BENEFITS_NAV.map(info => (
            <a className={`link-text ${info.color}`} href="/" key={info.id}>
              {info.title}
            </a>
          ))}
        </div>
      </div>
      
const BENEFITS_NAV = [
  { id: 1, title: '안내', color: 'empty' },
  { id: 2, title: 'WELCOME', color: 'gray' },
  { id: 3, title: 'GREEN', color: 'green' },
  { id: 4, title: 'FAMILY', color: 'orange' },
  { id: 5, title: 'VIP', color: 'pink' },
  { id: 6, title: 'VVIP', color: 'purple' },
];

Benefits.scss

  .benefits-info {
      width: 1200px;
      height: 52px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;

      .link-text {
        margin-right: 20px;
        text-decoration-line: none;
        color: #999999;
        &::before {
          content: '●';
          margin-right: 3px;
        }
        &:first-child::before {
          content: '';
        }
      }
      .gray::before {
        content: '●';
        color: gray;
      }
      .green::before {
        content: '●';
        color: green;
      }
      .orange::before {
        content: '●';
        color: orange;
      }
      .pink::before {
        content: '●';
        color: pink;
      }
      .purple::before {
        content: '●';
        color: purple;
      }
    }
  }

혜택 등급에 따른 nav를 구현해야 하는데 이 부분을 map을 이용해서 만들고 싶었다. 하지만 등급에 따른 색들을 어떻게 구현해야 할지 막막했다.
상수 데이터를 map으로 반복 할 때 className들을 동일하게 주고 상수 데이터의 color값에 따라 ::before을 다르게 주어서 변경이 가능하도록 멘토링 받았다. 정말 생각지도 못한 방법이어서 신세계를 경험한 기분이었다...


나의 생각정리

이번 프로젝트를 하면서 실력의 부족함을 많이 느꼈다. 로그인이나 회원가입 페이지만 하더라도 useState에 객체를 넣어서 하는 방법 외에도 react-form-hook을 이용해서도 가능한 방법이 있다는 것을 알게 되었고 정말 개발의 세계는 무궁무진하다고 생각했다.
1차 프로젝트 때 맡은 부분은 그렇게 비중이 큰 페이지들을 담당하지는 않았지만 실력을 조금 더 키워서 2차 때에는 한 부분이라도 조금 main에 가까운 페이지를 개발해보고 싶다. 그리고 다음번에는 react-form-hook을 이용해서 리팩토링 해보려고 한다.


Le chou 시연 영상

https://www.youtube.com/watch?v=sMrCeZQWSXc

profile
자라나라 나무나무

0개의 댓글