wecode +31 (9/17)

배운 것/개발한 것/정리한 것

- 오전 : 코드카타

1.문제

* 문제
주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동시켜주세요.
원래 있던 숫자의 순서는 바꾸지 말아주세요.

* 새로운 배열을 생성해서는 안 됩니다.

2. 답안

const moveZeroes = nums => {
  let zeroCount = [];
  while(nums.includes(0)) {
    for (let i=0; i<nums.length; i++) {
    if (nums[i] === 0) {
      zeroCount.push(parseInt(nums.splice(i, 1).join('')));
    }
  }
  }
  return nums.concat(zeroCount);
}

 

- 오후

1. 컨버스 사이트 작업

 

1) 동적 라우팅 (제품 별 다른 url로 연결) 시도해보기

<Router>
        <Switch>
          <Route exact path="/main" component={Main} />
          <Route exact path="/signup" component={SignUp} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/productList" component={ProductList} />
          <Route exact path="/productDetail" component={ProductDetail} />
          <Route exact path="/productDetail/:id" component={ProductDetail} />
        </Switch>
 </Router>

라우터 페이지 내 exact page에 id로 뿌려주기 기능 추가

  componentDidMount() {
    //추후 백엔드 데이터에 맞게 수정 (json 파일 뒤에 /productID 형식으로 받아올 예정)
    fetch(`http://localhost:3000/data/ProductDetail/ProductDetailMOCK.json`)
      .then((res) => res.json())
      .then((res) => {
        if (res.productItem[`${this.props.match.params.id}`]) {
          this.setState({
            productInfo: res.productItem[`${this.props.match.params.id}`],
          });
        } else {
          console.log("상품 아이디가 존재하지 않습니다");
          //에러 페이지로 이동
        }
      });
  }

해당 id를 받아오는 컴포넌트에서 fetch를 사용하여 url id에 맞는 데이터 가져와서 배열에 선언 후 뿌려주기

그 이후 props 이용해서 자식 컴포넌트에 전달

 

2) 상품 Mock data 만들고 페이지에 뿌려보기 : 완료

3) CSS 추가 : 사이즈 버튼 hover, 로그인 버튼 hover,  바로구매 버튼 hover 추가 : 완료

4) 추천상품 베스트 셀러 뜨게 CSS 추가

 -> 추천상품 mock data 내에 isBestSeller 변수 데이터로 설정 후, True인 경우에만 추천상품 위에 span이 display되게 설정

5) 상품정보 상단 우측 +/- 구현

 

1. JSX

<section
          className={`ProductInfoDetail ${isClicked ? "active" : "deactive"}`}
        >

2. SASS

.ProductInfoDetail.active {
    margin: 0;
    height: 350px;
    overflow: hidden;
    transition: height 0.25s ease-out;
  }
  .ProductInfoDetail.deactive {
    margin: 0;
    height: 0px;
    overflow: hidden;
    transition: height 0.25s ease-out;
  }

 

 

내일 할 일

1. 컨버스 사이트

 - 인스타그램 부분 hover 안했을 시에 나타나는 부분 추가, 더보기 하여 모든 인스타그램 게시물 나오게 추가 (리액트 슬릭? 라이브러리 사용)

 - 팝업 적용 (사이즈 가이드, 사이즈가 고민되면 클릭하세요 버튼, 배송정보, 교환반품)

 - 컬러 신발 별로 하단에 바 색깔 변하게 하는 기능

 - 설명 내 더보기 클릭시 세부 설명 탭으로 이동

 - 신발 수량 +/- 기능, 5개까지 구매가능 합니다 메시지 띄우기

 - 추가 CSS (우측 패널 fixed)

 

2. 블로깅

 - CSS transition, hover, 장바구니/메뉴 부분 우측에 띄우기 정리해보기 (특히 css transition)