1. 프로젝트 회고전 03/23/06~03/23/17

by

팀 멤버

(프론트 엔드)

  • 김수미, 이기태, 홍태훈

(백엔드)

  • 김승태, 최원식

1. 프로젝트를 계속하기 위한 웹 서비스

'추천 관련글,
  • 10곳 중 4곳을 선정하여 최종 선정한 결과 Dr. Martin은 전자 상거래 사이트라고 합니다.

2. 프로젝트를 진행하면서 담당했던 페이지

  • 로그인/등록 페이지
    • 구현된 기능: 유효성 검사, 토큰 저장, 로그인 후 로그인 페이지로 전환
  • 제품 세부 정보 페이지
    • 구현 기능 : 백엔드에서 받은 데이터로 UI 생성, 신발 사이즈 선택, 장바구니 모달창 생성 및 구매 클릭, 좋아요 버튼, 스크롤 버튼, 상품 수량 버튼, 댓글




3. 새로운 기능

  • 상태를 많이 사용한다면 객체로 만들어서 사용할 수 있습니다.
const (name,setName) = useState('')
const (email,setEmail) = useState('')
const (pw,setPw) = useState('')
const (pwCorrect,setPwCorrect) = useState('')

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

const (inputValues, setInputValues) = useState({
    name: '',
    email: '',
    pw: '',
    pwCorrect: '',
  });

☞☞ 상태값의 변화를 감지하기 위해서는 객체 자체의 값이 변화해야 하며, 이 경우 확산 구문을 사용해야 합니다.

  • CSS를 사용할 때도 중요도와 관련성에 기반한 규칙이 있습니다.
    • (CSS 속성 순서)
      1. 레이아웃 속성(position, float, clear, display)
      2. 박스 모델 속성(너비, 높이, 테두리, 패딩)
      3. 시각적 속성(색상, 배경, 프레임, 그림자)
      4. 타이포그래피 속성(글꼴 크기, 글꼴 모음, 텍스트 정렬, 텍스트 변환)
      5. 다양한 속성(커서, 오버플로우, Z-인덱스)
  • 개체의 속성 값을 변수에 할당할 때 변수 이름만 약칭 속성 이름으로 쓸 수 있음
        body: JSON.stringify({
          email: email,
          password: pw,
        }),
        
      ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        
        body: JSON.stringify({
          email,
          password: pw,
        }),

4. 좋은 부분과 나쁜 부분

  • ‘어떻게 하면 코드를 더 간결하게 만들 수 있을까?’
    • 회원가입 페이지와 로그인 페이지에서 반복되는 사용자 인터페이스를 제시하며, 먼저 두 개의 컴포넌트로 분리하여 사용하였다.
    • 이 부분을 컴포넌트 내부에 어떻게 그릴지 고민하다가 위치와 삼항 연산자를 이용하여 조건이 맞을 때 로그인 UI를 보여주고, 그렇지 않을 때 로그인 UI를 보여주는 코드를 만들어 보았습니다.

아래는 이 코드입니다.

  const location = useLocation();
  const currentPage = location.pathname === '/login' ? LOGIN_DATA : SIGNUP_DATA;
  
  return (
    <>
      <form className="account">
        <strong className="title">
          {location.pathname === '/login' ? '로그인' : '회원가입'}
        </strong>
        {currentPage.map(({ id, title, type, name, placeholder }) => {
          return (
            <div className="input_box" key={id}>
              <label className={`input_${conditions(name) ? 'title' : 'warn'}`}>
                {title}
              </label>
              <input
                name={name}
                className="input"
                type={type}
                autoComplete={name.includes('pw') ? 'off' : undefined}
                onChange={handleInput}
                value={inputValues(name)}
                placeholder={placeholder}
              />
            </div>
          );
        })}
        <button onClick={submit} type="submit" className="account_button">
          {location.pathname === '/login' ? '로그인' : '회원가입'}
        </button>
      </form>
      <strong>
        {location.pathname === '/login' && (
          <Link className="sign_up" to="/signup">
            회원가입
          </Link>
        )}
      </strong>
    </>
  );

  • 항상 최신 진행 상황을 팀원들과 공유했습니다.
    • 이 부분은 저의 진행 상황과 팀원들의 진행 상황, 어떤 막힘이 있었는지 이해하는데 도움이 되었습니다.
      이를 통해 상호간의 막힘을 해결하는 데 도움이 되었고 팀 프로젝트의 중요성을 다시 한 번 일깨워 주었습니다.

  • 기획 부분에서는 그냥 박사님만 하자고 생각했어요. 클론 마틴.
    • 클론코딩을 하는 줄 알고 그냥 박사님의 특징을 따라했습니다.
      담비
    • 더 다양한 기술을 구현할 수 없다는 점은 아쉽다.

5. 향후 계획

  • 프로젝트를 진행하면서 따로 만들지 않은 페이지를 만들고, 웹사이트 제작에 필요한 요소들을 적용하는 방법을 탐구했습니다.
    • 메인 페이지의 캐러셀, 검색 기능
    • 상품 목록 페이지 필터링, 페이지 매김 기능
    • 장바구니 페이지에서 선택삭제 및 전체삭제 기능

  • 두 번째 프로젝트에서는 웹사이트를 복제할 생각 없이 최종 사용자가 계획하는 순간부터 사용할 웹사이트를 만든다는 생각으로 참여하겠습니다.