안녕하세요 @realmankwon입니다.
3일동안 포스팅을 하지 못했네요 ㅜㅜ
시간이 없어서도 있지만 이번 건은 보기에는 엄청 쉬워 보이지만 실제로 해 보니 너무나 어려워서 3일동안에 걸쳐서 겨우 해냈습니다.
이제 글 한개 쓰는 것이 얼마나 어려운지 실감이 되네요.
코인에 대해서 잘 모르고 좋은 글을 쓸려면 많은 시간을 들려야 하는데 그 시간에 제가 좀 더 잘 하고 도움이 될 수 있는 글을 써야겠다는 생각에 기존에 잡글은 쓰지 않았습니다.
[IMAGE: https://cdn.steemitimages.com/DQmRqbPEH4gNTKrHcYSNuJRdaKazcVgxVQEDyMRfs6GFWUQ/image.png]
일단 오늘은 제목과 같이 보팅시에 간편하게 고정값을 추가했습니다.
Busy, Steempeak에서는 기본으로 되어있고 너무나 편하게 써서 저도 여러모로 불편했었습니다.
그래서 쉽겠거니라며 수정에 들어갔는데 이거 정말 어려웠습니다. ㅜㅜ
잘하시는 분들은 쉬웠을텐데 저는 잘 모르다보니 생각보다 분석도 많이해야했고 react 문법도 제법 많이 공부해야했습니다.
일단 slider와 관련된 소스를 찾아보았습니다.
이전과 마찬가지로 다음의 Voting.jsx 파일에 있었습니다.
>src/app/components/elements/Voting.jsx
[IMAGE: https://cdn.steemitimages.com/DQmSvDz84ktfifJJL8hcnUHZBu7zw5LEephnhyEB5fumz3e/image.png]
위의 소스에서
{s + b / 100}% 이 보팅 비율이고
<
Slider
min={100}
max={MAX_WEIGHT}
step={100}
value={b}
onChange={this.handleWeightChange(up)}
onChangeComplete={this.storeSliderWeight(up)}
tooltip={false}
/>
이 보팅바 부분입니다.
보팅바 부분의 소스에서 보팅바를 변경하면 this.handleWeightChange(up) 이 호출되고 보팅바 변경 후 마우스를 놓으면 this.storeSliderWeight(up) 이 호출됨을 알 수 있습니다.
이때 이 함수를 이용해서 뭔가를 해 볼려고 했었는데 저 함수를 어떻게 사용하는지 react의 문법을 모르니 알 수가 없었습니다.
그래서 react에서 함수를 어떻게 선언하는지 며칠동안 공부를 했습니다만 실제 소스에 있는 모습대로 사용된 것은 볼 수가 없었습니다.
this.handleWeightChange = up => weight => {
let w;
if (up) {
w = {
up: weight,
down: this.state.sliderWeight.down,
};
} else {
w = {
up: this.state.sliderWeight.up,
down: weight,
};
}
this.setState({ sliderWeight: w });
};
여기서 이 부분
>this.handleWeightChange = up => weight => {
선언될 때 = 뒷부분은 인자 => 뒷부분은 함수 선언이라고 했는데 여기서는 => 뒤에 변수가 나오고 다시 => 이 나오는 것입니다. ㅜㅜ
그래서 소스를 더 밑에 까지 까보았습니다.
다음과 같이 되어 있더군요.
[IMAGE: https://cdn.steemitimages.com/DQmYfGGg6ucaMF9wnZiGdwvyuDr6HtD6HK6iqgRpwSJtC4J/image.png]
저기서 보면 onChange 함수는 value : number 값을 받는다고 되어 있습니다.
음....
며칠동안 고생했었는데 오늘 유추를 해 보았습니다.
함수 연결시에 () 안의 인수는 = 바로 뒤의 변수에 입력이 되고 => 뒤에 변수에는 기본 value : number 값을 받는다고...
그 후에 다음과 같이 소스를 변경하였습니다.
radio 버튼으로 값을 입력받도록 하고 위의 onChange, onChangeComplete 함수를 합쳐서 handleButtonWeightChange 함수를 만들었습니다.
const slider = up => {
const b = up
? this.state.sliderWeight.up
: this.state.sliderWeight.down;
const s = up ? '' : '-';
return (
{s + b / 100}%
// 보팅 고정값 추가 버튼
25%
50%
75%
100%
);
};
// 버튼 클릭시 보팅바와 보팅비율 변경하는 함수 생성
this.handleButtonWeightChange=(up, weight)=>e => {
let w;
if (up) {
w = {
up: weight,
down: this.state.sliderWeight.down,
};
} else {
w = {
up: this.state.sliderWeight.up,
down: weight,
};
}
this.setState({ sliderWeight: w });
const { username, is_comment } = this.props;
console.log(username);
localStorage.setItem(
'voteWeight' +
(up ? '' : 'Down') +
'-' +
username +
(is_comment ? '-comment' : ''),
weight
);
};
그 이후 실행을 하였더니 정상적으로 동작을 하였습니다.
고정값 클릭도 잘 되고 보팅까지 잘 되었습니다.
마지막에 보팅된 것이 깔끔하게 캡쳐가 안 되었지만요 ^^
암튼 이번에 react에 대해서 좀 더 많이 공부할 수 있는 계기가 되었네요.
앞으로 점점 더 어려운 것들을 하게 될텐데 글을 얼마만에 한번씩 쓸 수 있을지 모르겠네요ㅜㅜ
차라리 코인을 더 공부해서 쓰는 것이 더 나을 것 같기도 하다는 생각이 불쑥드네요.
암튼 이 소스도 적용이 되길 바래봅니다. ^^
다들 남은 휴일 잘 보내세요!!!
* 이전글
Intro 내 컴퓨터에서 나만의 sct를 실행해 보자
1. [나만의 SCT #1] 보팅 비율 보기
2. [나만의 SCT #2] SCT 보상액과 Steem 보상액 함께 보기
3. [나만의 SCT #3] 보팅 금액 (SCT), 글 리스트에서 보팅자 확인, 보팅자 Limit 풀기