Project Day 1 - 개발일지

hwibaski·2021년 10월 2일

목록 보기

1/10

- TODAY I LEARN 🎁

- 모르는 점

리액트 라이프 사이클 메소드를 어렴풋하게 알고는 있지만 정확히 어떤 상황에 써야할지 잘 모르겠다.

스크롤 시 hide되는 navbar 기능을 구현하는데 스크롤에 스크롤값이 100으로 나누어 떨어질 경우에만 state가 바뀌게 조건을 걸었다. 하지만 규칙적으로 동작하지 않고, 랜덤하게 조건이 실행된다.

css translate, visibility가 아리까리하다. 다시 공부해야겠다.

- 배운점

react 프로젝트에서 img를 불러오는법

navbar를 scroll up/down시 hide 또는 display 하는 법

- 잘한 점과 개선할 점

잘한 점: 자료 검색을 빠르게 실행했다. 원하는 기능 구현할 때까지 끈질기게 시도했다.

개선할점: 늦게일어남 ㅠㅠ

- Tody I Met Error 🌡

크리티컬한 에러를 만나진 않았다. mainLogo 이미지를 local에서 불러오려는데, 불러와지지가 않았다. public 디렉토리 넣고 불러오면 된다고 했는데 30분 정도는 이것저것 시도해보았다. 아래의 img태그 안에 해당 svg파일은 잘 들어가있는 상황이다. 이미지는 여러 예시중에 하나를 골랐다.

- HOW TO FIX MY ERROR 💊

ERROR를 해결한 KEYWORD 🔑

public dir🗝 - public 디렉토리는 하위 디렉토리를 바로 입력해서 접근이 가능하다.

수정된 코드

<img
     className='mainLogo'
     src='/images/Nav/mainlogo/svg
     alt='main logo'
/>

public 디렉토리를 제외하고도 이미지 자체를 import 해서 쓰는 방법이 있었다.

import companyLogo from './path/to/logo.jpg';

function Home() {
  return (
    <div>
      <img src={companyLogo} alt="BigCo Inc. logo"/>
    </div>
  );
}

- 오늘 작성한 코드

Nav.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle } from '@fortawesome/free-solid-svg-icons';
import './Nav.scss';
class Nav extends Component {
  state = {
    isVisible: true,
    prevScrollPos: 0,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const { prevScrollPos } = this.state;
    const currentScrollPos = document.body.getBoundingClientRect().top;
    this.setState(state => {
      if (currentScrollPos % 50 === 0) {
        return {
          prevScrollPos: currentScrollPos,
          isVisible: currentScrollPos >= prevScrollPos,
        };
      }
    });
//  이렇게 입력시 스크롤 업다운 시 즉각적으로 반응한다.     
//    this.setState({
//		prevScrollPos: currentScrollPos,
//        isVisible: currentScrollPos >= prevScrollPos,
    })
  };

  render() {
    return (
      <nav className={this.state.isVisible ? 'Nav active' : 'Nav hidden'}>
        <ul className='productsNavMenu'>
          <Link>
            <li className='navMenuItem'>SHOP</li>
          </Link>
          <Link>
            <li className='navMenuItem'>TOP20</li>
          </Link>
          <Link>
            <li className='navMenuItem'>FEATURES</li>
          </Link>
          <Link>
            <li className='navMenuItem'>SEARCH</li>
          </Link>
        </ul>
        <div className='mainLogoContainer'>
          <img
            className='mainLogo'
            src='/images/Nav/mainlogo.svg'
            alt='main logo'
          />
        </div>
        <ul className='userNavMenu'>
          <Link>
            <li className='navMenuItem'>KOR / ₩</li>
          </Link>
          <Link>
            <li className='navMenuItem'>LOGIN</li>
          </Link>
          <Link>
            <li className='navMenuItem'>
              <span className='cartItem'>CART</span>
              <FontAwesomeIcon
                className='cartCountIcon'
                icon={faCircle}
                size='lg'
              />
              <span className='cartCountNum'>1</span>
            </li>
          </Link>
        </ul>
      </nav>
    );
  }
}

export default Nav;

Nav.scss

.Nav {
  font-family: Helvetica, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100vw;
  top: 0;
  background-color: white;
  .productsNavMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    margin-left: 40px;
  }
  .mainLogoContainer {
    margin-right: 80px;
    .mainLogo {
      width: 180px;
      height: 47px;
    }
  }
  .userNavMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
    margin-right: 40px;
    .navMenuItem {
      .cartItem {
        margin-right: 4px;
      }
      .cartCountIcon {
        position: relative;
      }
      .cartCountNum {
        position: absolute;
        color: white;
        top: 17px;
        right: 46px;
      }
    }
  }
}
.active {
  visibility: visible;
  transition: all 0.5s;
}
.hidden {
  visibility: hidden;
  transition: all 0.5s;
  transform: translateY(-100%);
}