오늘(프로젝트 8일차)은 오후 3시에 1차 프로젝트 중간발표가 있었다.
3기 모든 인원과 멘토이신 은우님, 예리님이 같이 참여하여 8일차 오전까지 진행했던
프로젝트를 서로 발표하고 피드백을 받는 시간을 가졌다.
팀은 총 3팀으로 각 팀마다 프론트엔드가 정말 깔끔하고 실제 웹같이 잘 만들어가고 있었다.
서론은 이쯤하고
우리 팀에서 프론트엔드가 받은 피드백은 좀 더 실제 웹처럼 보완하라는 것이었다.
기존에는 헤더 메뉴는 메인 페이지가 아닌 다른 페이지의 헤더 메뉴를 적용했고,
메인 페이지는 메인 헤더쪽에 이미지도 안넣었으며 이미지들도 크고 너무 이상해보였다.
그래서 발표가 끝난 후 바로 리뉴얼에 들어갔다.
메인 페이지에서 메인 헤더쪽에 이미지를 넣었으며 검색창도 헤더(메인 헤더x)에 있던 것을 없애고 메인 헤더에 넣었다.
기존 헤더(메뉴)에서는 css로 position을 fix로 고정시켜 화면을 위아래로 움직여도 고정되게 했는데…
이는 사용자 경험상 매우 좋지 못한것임을 알았다.
그래서 스크롤을 일정 기준 이상 밑으로 내렸을때 헤더(메뉴)를 고정되는 것처럼 보여주고 일정 기준 이상 위로 올라가면
헤더(메뉴)가 웹 화면 바탕에 떠있는 것으로 보이게 처리했다.
▼▼헤더(메뉴)가 웹 화면 바탕에 떠있어 보이는 이미지▼▼
▼▼스크롤을 일정 기준 이상 밑으로 내렸을때
헤더(메뉴)가 고정되는 것처럼 보이는 이미지▼▼
그리고 메인 페이지에 이미지 리스트쪽 이미지들도 사이즈를 자연스럽게 줄이고 뷰를 더 완성도있게 만들었다.
html 작성할때 header에 className을 2개로 준 상태이고, a className 일때는 헤더(메뉴)가 웹 하면 바탕에 떠있어
보이게 css적용, b className 일때는 헤더(메뉴)가 고정되는 것처럼 보이게 css적용하고 스크롤 일정 기준을 window의 scrollY를 기준으로 했고, scrollY의 값을 setState로 계속 변경해줬다.
그리고 scrollY의 값을 기준으로 className을 동적으로 변경해줬다.
이때 heaer라는 DOM에 접근하기 위해 ref를 사용했으며, react 최신 버전에 맞는 React.createRef()을 사용했다.
1 2 3 | this.myRef = React.createRef(); <header ref={this.myRef} className="header header--Transparent"></header> | cs |
1 2 3 4 5 6 7 8 9 10 | componentDidMount() { window.addEventListener('scroll', this.handleScroll, true); } handleScroll = () => { console.log(window.scrollY); this.setState({ scroll: window.scrollY, }); this.myRef.current.className = this.state.scroll >= 480 ? 'header' : 'header header--Transparent'; } | cs |
메인 페이지에서 스크롤을 내리니 내가 의도한대로 잘 작동한다.
하지만 문제점이 생겼다.
로그인 페이지나 회원가입 페이지로 이동해서 스크롤을 움직이면 에러가 발생한다.
로그인 페이지와 회원가입 페이지에서는 헤더 컴포넌트가 없어서이다.
헤더 컴포넌트가 없으니 해당 DOM에 접근할 수 없고 이로 인한 에러이다.
그래서 lifecycle 중에 componentWillUnmount()을 사용해서 해당 페이지의 생명주기가 끝나면 이벤트를 종료되게 해줬다.
계속 진행중인 부분은 로그인 페이지에서 로그인을하면 메인페이지에서 로그아웃이 뜨고 로그아웃하면 로그인이 뜨는 부분이다.
몇몇 실제 기능적인 부분은 프로젝트에서 구현하지 않지만 작동은 안하더라도 뷰를 더 완성도있게 하고싶어 빼놓지 않고
코딩했다.