이 글을 1차 프로젝트를 마치며 개인적으로 담당했던 부분에 대하여 자세하게 남기고자 씁니다.
프로젝트 구현 영상 : https://www.youtube.com/watch?v=vfKG_wyZkGc
mainPage
-
이번 프로젝트에서 main페이지로 만든 페이지는 원래 오설록 페이지에서 brandStory라는 페이지이다.
-
구현된 페이지 동영상 : https://www.youtube.com/watch?v=7YvNXK2OYkg
-
해당페이지는 스크롤 값에 따른 요소의 위치가 변하거나 다른 요소로 변하거나 하는 interactive한 페이지이다.
-
리액트와는 별개로 해당 페이지는 평소 내가 생각하는 프론트엔드 개발자로써 좋아하고 해보고 싶었기에 이렇게 진행하게 되었다.
코드1
componentDidMount() {
// Step1. scroll 이벤트 add //
// javascript 윈도우 객체의 scroll 이벤트 가져와서 준비 //
window.addEventListener("scroll", this.addScrollFunc.bind(this)); //"scroll"이 내장이벤트 default이름임- 리엑트에서 스크롤 이벤트를 할 방법을 알아야 했다. 그러나 리엑트에서 쉽게 제공하는 것이 아니라는 것을 알았고 javascript로 하듯이 직접 window객체 접근을 하는 법을 알아야 했다.
코드2
// Step2. scroll 좌표값 출력되는지 확인 //
// 스크롤이 발생되면 값 확인하고 저장할 함수 //
addScrollFunc(event) {
//.scrollTop이 Y축 scroll좌표값을 위한 보기 위한 프로퍼티임 //
// X축은 .scrollLeft임 //
const scrolling = event.srcElement.scrollingElement.scrollTop;
// 스크롤 값이 변경되면 그 값에 맞는 background 변경 함수 콜백으로 실행 //
this.setState({ scrollPoint: scrolling }, this.changeImageFunc.bind(this));
}- 현재의 스크롤값을 가지고 올 빙밥을 알아야 했다. window객체에서 프로퍼티를 통해 입력된 현재의 스크롤값을 알 수 있게 해주었다.
코드4
// Step3. 좌표값을 받아 사용 //
// state의 값을 받아 스크롤을 이동시킬 함수 //
scrollMoveFunc() {
document.documentElement.scrollTop = this.state.scrollPoint;
}
// Step4. state 및 스크롤 이동함수 실행 //
// 스크롤 좌표값 증가 시키고 이동시킬 함수 //
lastPoint = 10000; // 변수관리 : 스크롤 최종 좌표값
addPoint = 2; // 변수관리 : 스크롤 움직일 추가값
scrollPointAddFunc() {
if (this.state.scrollPoint < this.lastPoint) {
this.setState({ scrollPoint: this.state.scrollPoint + this.addPoint });
} else {
this.setState({ moveTurnKey: false });
}
this.scrollMoveFunc();
}- 이제 스크롤값을 알 수 있게 됬고 사용할 수 있게되었다. 사실 여기까지 되었으면 응용하는 것은 큰 문제가 없다. 그래도 리액트게 맞게 state에 담아 변하는 스크롤값을 계속 저장하였고 원하는 이벤트에서 적절히 사용하게 하였다.
- 그 뒤로 스크롤값에 따른 transform을 추가하여 스크롤값에 따라 움직이는 이미지를 구현하거나 스크롤에 따라 변하는 이미지를 구현하게 되었다.
commentInput
- 원래 사이트에서는 제공되는 기능은 아니다.
그런데 평소 보통 사이트에서 본적있는 기능일 것이다. 점수를 매길 때 직접 숫자를 입력하는 것이 아니라 별을 클릭하여 별갯수의 점수를 입력하고 받은 데이터도 숫자로 받은 데이터를 이미지로 나타내는 것이다. - 구현된 기능 동영상 : https://www.youtube.com/watch?v=5CYRQCjvgGw
코드1
render() {
const starColor = {
width: `${this.props.score * 20}%`,
};
return (
<div className="commentScore">
<div className="tipWrap">
<div className={this.state.tip ? "tip tipOn" : "tip tipOff"}>
<span>별을 눌러 평점을 남겨주세요 ↓ ↓ </span>
</div>
</div>
<div className="starWrap">
<div
className="star"
onMouseEnter={() => this.setState({ tip: true })}
onMouseLeave={() => this.setState({ tip: false })}
>
<div
className={
this.state.tip ? "scoreText scoreTextAction" : "scoreText"
}
>
<span>{this.props.score}</span>
</div>
<div className="selector">
<div className="selectorChild">
<div
className="score 1p"
onClick={() => this.props.scoreHandler(0.5)}
></div>
<div
className="score 2p"
onClick={() => this.props.scoreHandler(1)}
></div>
<div
className="score 3p"
onClick={() => this.props.scoreHandler(1.5)}
></div>
<div
className="score 4p"
onClick={() => this.props.scoreHandler(2)}
></div>
<div
className="score 5p"
onClick={() => this.props.scoreHandler(2.5)}
></div>
<div
className="score 6p"
onClick={() => this.props.scoreHandler(3)}
></div>
<div
className="score 7p"
onClick={() => this.props.scoreHandler(3.5)}
></div>
<div
className="score 8p"
onClick={() => this.props.scoreHandler(4)}
></div>
<div
className="score 9p"
onClick={() => this.props.scoreHandler(4.5)}
></div>
<div
className="score 10p"
onClick={() => this.props.scoreHandler(5)}
></div>
</div>
<div className="backgroundStar"></div>
<div className="movingStar" style={starColor}></div>
</div>
</div>
</div>
</div>
);
}
}
export default CommentStar;
}- 0.5단위로 10칸의 칸이 클릭할 수 있다. 그러면 10칸의 이벤트 핸들러를 달아줘서 그 값을 핸들러로 관리하며 변하는 그 값을 표현하면 되겠구나라고 생각하였다.
- 보기는 많이 본 기능이지만 아무 참고없이 그냥 생각대로 코드를 구현해보았다.
- 쉽지는 않았지만 다행히 생각처럼 구현이 되었다.
- 클릭이벤트가 발생할때마다 state의 값이 변하고 그 값을 받아 transform되는 어떠한 요소가 있고 그걸 표현만 잘 하면 되는 것이었다.
한계...
그러나 한계를 느낀점도 있다. 결국은 순수 javascript의 깊이나 더 나아가 브라우저에 대한 이해가 필요하다는점.. 예를 들면 스크롤 이벤트시 더 부드러운 스크롤이동이나 한번의 스크롤시의 이동량을 바꾸는 기능의 경우 javascirpt의 경우 jquery등의 라이브러리를 사용하는 것이 아닌이상 직접 구현하는 것은 너무 힘들어 할 수가 없었다.
또한 댓글이 달리는 기능의 경우 만약 내부에 있는 어떤 요소에 스크롤이 달리고 만약 전체 브라우저가 아닌 그런 내부요소의 스크롤값을 움직이고자 한다면. 결국 직접적으로 그 요소에 접근해야해서 리액트같은 경우는 ref를 사용해야 될거승로 판단되나 이번 프로젝트에서는 ref는 아직 학습하지 못하여 못해보았다..
만약 다음 프로젝트에서는 기회가 된다면 더 나은 기능을 위해 좀더 깊이있게 다가가 보고 싶다.
jongsunPark.js