프로젝트 #1 | Motivation_Diary #2
- TODAY I LEARN ERROR 🦠
- 오늘 마주한 문제점
이번 프로젝트에서 우리 팀이 맡은 사이트는 https://thisisneverthat.com/ 이다. 나는 그 중에서 메인 페이지를 담당하게 되었고, 호기롭게 코딩을 시작하여서 기본형태까지는 비교적 빠르게 만들었다. 그다음에 구현해야할 부분은 이미지들이 스크롤 위치에 따라 변화하는 부분이었다.
- HOW TO FIX MY ERROR 💊
- ERROR를 해결한 KEYWORD 🔑
일단 최대한 자신의 힘으로 이 부분을 구현해보려고 2일째에 노력하였으나, 아직 내 실력으로는 구현하기 힘들다고 판단했다. 3일째인 오늘 멘토님의 조언을 새겨듣고 전략을 수정하여 슬라이드를 구현하기로 계획을 변경하였다.
- 내가 구현한 부분
- 배운점
구현하는 방법
class ImageSlide extends Component {
constructor() {
super();
this.state = {
imagePosition: 0,
};
}
changeImageToLeft = position => {
const slideLength = this.props.images.length;
let newPosition = position - 1;
let maxPosition;
if (window.innerWidth > 1140) {
maxPosition = Math.ceil((slideLength - 4) / 2); // 큰 화면용
} else {
maxPosition = Math.ceil(slideLength - 2); // 작은 화면용
}
if (newPosition < 0) newPosition = maxPosition; // 오른쪽 최대치 넘어가면 제일 왼쪽으로 되돌림
this.setState({
imagePosition: newPosition,
});
};
// changeImageToRight 생략
render() {
const { products } = this.props;
return (
<div
style={{transform:`translate3d(${this.state.imagePosition * -50}vw, 0px, 0px`,}}
> // position*50 만큼 왼쪽으로 슬라이드를 민다
<img />
</div>
);
}
}
- 개선할 점
- 아래쪽 텍스트 링크들이 반응형으로 작아졌을때 border 선이 겹치는 문제
- 반응형으로 작아졌을 때 슬라이드가 마지막 이미지까지 보여주지 못하는 문제
- 목표와 마감기한: 2021-10-06
- 위 두 문제점과 리팩토링까지 수요일까지 완료해보기
Author And Source
이 문제에 관하여(프로젝트 #1 | Motivation_Diary #2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ktg6360/프로젝트-3일차-MotivationDiary저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)