1차 프로젝트 Day 4🔥

(meeting log와 구현한 이벤트/ 새로운 기능 정리)

Daily standing meeting log (1 차 프로젝트 Day 4)✌✌

Back-end

Done

• 모델링 로직 구성 논의
• Django 초기 설정
• 모델링 로직 In progress
• 로그인/회원가입 엔드포인트 구현

Today's to-dos

• 크롤링 시작(due Friday)
• CSV 데이터 뽑기 (due this week)
• git merge 받은 후 충돌사항 확인
• DB 테스트 해보기

blocker

• x

Front-end

아래 굵은 글씨 부분이 내가 구현한 /구현할 부분

Done

• 프로젝트 초기 셋팅
• 로그인/회원가입 component 구성
• Nav bar 레이아웃 html 구성
• Man page 레이아웃 html 구성
• 로그인/회원가입 layout
• Main page layout
• Product page layout
• 로그인,회원가입 엔드포인트 백엔드와 확인 완료
• Nav 바 dropdown 이벤트
• 버튼 에니메이션, 컬러에니메이션 호버 이벤트

Today's to-dos

• 로그인,회원가입 validation, 기타 추가 기능 구현
• 스크롤 Nav bar이벤트
• Nav bar layout 디테일
• 슬라이더 이벤트
• 제품 상세 페이지 레이아웃 및 사이즈 옵션 이벤트

blocker x

• x

---

구현 이벤트, css, 및 새로 배운 기능 정리💫

쉬운 것 부터 어려운 순서대로!!🤗

1. class component로 작성 할때는 최상위 class 이름과 component이름을 같게 만드는 것이 좋다!

class Product extends React.Component {
  render() {
    return (
      <main className = "Product"></main>
      )}}

2. class component형태로 state를 관리할 때, props 값을 넘겨줘야 하는 경우 constructor 함수와 super에 props를 인자로 넘겨 주어야 한다.

• 아래 imageSrc 값의 초기 설정을 props 값에서 가져올 것이기 때문에 ()안에 props를 넣는 것!

class Product extends React.Component {
  constructor(props) {
    super(props);
    this. state= {
      imageSrc= this.props.imageUrl,
      hovered: false,
      colorHovered: false
    }
  }

3. React에서는 a 태그 대신 Link 태그를 사용한다.

• 먼저 이동하려는 경로를 Router에 포함 시켜주고 import 해주는 것이 중요하다.
• router에 이미 지정된 링크로 이동할 수 있도록 먼저 router파일에 지정된 경로를 가져와준다. 먼저 Link 태그를 사용할 수 있도록 react-router-dom에서 link를 불러온다.

import { Link } from "react-router-dom";

• 링크를 적용 해줄 div를 Link 태그로 감싸준다! 🤼‍(hug하는 emoji가 없다 ㅜㅜ) 해서 "/shopping/man"로 이동해야 하면 클릭해야 하는 이벤트에 아래를 적용 시켜 준다.

<Link to="/shopping/man">
  <div className="imgs"></div>
</Link>

4. 가독성 있는 코드를 위한 destructuring!

• 렌디리앞~(render 뒤 return 앞에 붙여준다)

const {
      mouseOutHandler,
      mouseOverHandler,
      colorMouseOut,
      colorMouseOver,
    } = this;
    const { imageSrc, hovered, colorHovered } = this.state;
    const { name, price, colors } = this.props;

5. mouseon/out의 유무로 버튼 및 컬러 패치 보이기/숨기기

• opacity값을 1 혹은 0으로 줌으로서 mouseon했을 때/mouseout했을 때 보여주고자 하는 이미지를 height값에 영향 주지 않고 적용할 수 있다.
  -여기서 주의 할 부분은 다른 class값을 주는게 아니라 .show or .hide라는 클래스를 새로 만들어 주고
• 기존에 만들어 준 class에 추가하는 방식이다. 아래 color-and-add class 가 보여주고자 하는 className이고 mouseon 하기 전에는 빈 칸으로 보여주고 mouseon 했을때만 보여줘야 한다.

    .hide {
      opacity: 0;
    }

    .show {
      opacity: 1;
    }

    .color-and-add {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

• color and add에 삼항 연산자를 사용해서 해당 조건일 경우에 준다는 경우인데

    <div
              className={
                colorHovered || hovered
                  ? "color-and-add show"
                  : "color-and-add hide"
              }
            >

-여기서 className에 state 값에 or을 준 이유는 버튼에 중복으로 mouseover 이벤트가 일어나는걸 방지하기위해 mouseover이벤트를 버튼과 버튼이외의 부분으로 나누었기 때문에 그 부분일 경우 다 를 포함하고 싶어서 or로 적용해 주었다.

6. 인자를 넘겨줄때는 arrow function 으로!

• 보통 react에서 event를 걸고 함수를 전달할때 항상onMouseEnter={this.clickhandler}이런 식으로 적용 했었는데 만약 이벤트가 일어 났을 때 데이터를 넘겨줘서, state를 변경시켜줘야 하는 경우라면 인자로 넘겨 주어야한다.
• 아래의 경우 컬러 패치를 클릭했을 때, 클릭하는 부분의 imageUrl을 state 값에서 받아서 이미지 사진을 수정해주는 효과를 부여해 주고 싶기 때문에, color.imageUrl이라는 인자를 넘겨주었다.

  <div className="color-options">
                {colors.map((color) => {
                  return (
                    <img
                      onMouseEnter={() => colorMouseOver(color.imageUrl)}
                      onMouseLeave={colorMouseOut}
                      alt=""
                      className="color-option"
                      src={color.colorImage}
                    />

7. hover할때 아래 밑줄이 그어지는 에니메이션 구현하기

• 해당 부분은 구글링해서 코드를 참고해서 만들었다.
• 도움받은 사이트 : https://codepen.io/franzskuffka/pen/wKLPjo
• className 이후에 :before 는 해당 클래스 외 에 적용하려는 css를 의미하고 항상 content가 있어야 하는데 우리는 밑줄만 원하는거라서 content : ""라고 적용한다.

.quick-add-hovered {
        font-family: MierA-Demi;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 15.4px;
        background-color: transparent;
        text-decoration: none;
        padding: 5.5px 0px 5px 0px;
        cursor: pointer;
        border: none;
        outline: none;
        position: relative;
        transition: 0.3s;
      }

      .quick-add-hovered::before {
        content: "";
        border-bottom: 0.5px solid black; //밑줄 굵기 
        padding: 0 0.1px; //밑 줄 호버 전 길이 
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 0;
        transition: 0.3s; //애니메이션이 구현되는 duration 
      }

      .quick-add-hovered:hover::before {
        width: 100%; //hover 했을 때의 밑줄 길이 
      }

대망의 mouseEnter/mouseOut 이벤트

• 제품 리스트 페이지에서 상품을 클릭하면 상세 이미지가 나오는 것 까지는 이전에 true or false로 해결하였다. 하지만 mouseover 된 상태에서 색깔 버튼을 누르면 그 색상의 옷 이미지로 변신하는 기능을 구현하려고 하니 이미지가 2개 이상 들어가는 것이었다....자 그럼 이제 true false로 적용된 이벤트를 버리고, 각각의 버튼 이미지에 또 mouseover 이벤트를 줘서 구현을 해야한다.

• 여기서 문제는 mouseEnter이 적용되는 구간에 또다른 mouseEnter를 입히게 되는건데, 그렇게 되면 중복 이벤트가 발생되면서 중첩이 되서 값이 계속 바뀌는 상황이 난다. 이걸 해결하기 위해 하나의 mouseover이벤트가 일어날때는 다른 mouseover이벤트가 일어나지 않게 적용해야한다.

• 비루한 그림이지만 이렇게 mouseenter이벤트가 전체에 걸려있는 상황에, 아래 작은버튼에도 mouseenter이벤트를 걸어주면 저렇게 빨간 부분처럼 겹치는 상황이 생겨서 이벤트가 잘 안먹힐 수 있다.
  

처음에 왜 ... 안되는 거지 하고 mouseenter이벤트에 console.log 를 찍어보니 엄청 일어나는 버튼 근처에서 이벤트가 중복으로 계속 발생하는 문제를 파악했다.

<해결 코드>

• 이미지가 hovered 되었을때 hovered state와 컬러버튼이 hover 되었을때의 colorHovered boolean state를 세팅해주고,
• 이미지가 hover되었으면, colorHovered를 무력화해주고 if (colorHovered) return;
• 버튼이 hover 되었으면 colorHovered를 true로 만들어 주고 함수에서 인자로 받은 imgurl을 이미지 imageSrc에 업데이트 해주어서 사진을 변경해 준다.

 colorMouseOver = (img) => {
    this.setState({ imageSrc: img, colorHovered: true });
  };

• 전체 코드

    this.state = {
      imageSrc: this.props.imageUrl,
      hovered: false,
      colorHovered: false,
    };
  }
  mouseOverHandler = () => {
    const { colorHovered } = this.state;
    if (colorHovered) return;
    this.setState({ imageSrc: this.props.imageHovered, hovered: true });
  };

  mouseOutHandler = () => {
    const { colorHovered } = this.state;
    if (colorHovered) return;
    this.setState({ imageSrc: this.props.imageUrl, hovered: false });
  };

  colorMouseOver = (img) => {
    this.setState({ imageSrc: img, colorHovered: true });
  };

  colorMouseOut = () => {
    this.setState({ imgSrc: this.props.imageUrl, colorHovered: false });
  };