[SP2] 메인 상단 Introduce QA #292
Conversation
| return () => { | ||
| unsubscribe(); | ||
| }; | ||
| }, [scrollValue, isMobileSize]); |
| const unsubscribe = scrollValue.on('change', (value) => { | ||
| const percentValue = Number(value.split('%')[0]); | ||
| const newStyle = isMobileSize | ||
| ? { opacity: (100 - percentValue) / 100 } |
There was a problem hiding this comment.
정말 사소한 것이긴 한데 1 - percentValue/100 하면 계산하는 숫자가 더 작아져서 좋을 것 같다는 생각이 듭니다!
G한테 물어보았어용
- 실행 속도: 현대의 컴파일러와 인터프리터는 최적화가 매우 잘 되어 있어, 이 두 식 사이에 실행 속도 차이는 거의 없거나 미미할 것입니다. 웹 환경에서는 JavaScript 엔진이 이러한 최적화를 처리합니다.
- 가독성: "1 - value/100"은 더 단순하고 직관적입니다. 이 식은 "원래 값에서 어떤 비율을 뺀다"는 개념을 직접적으로 표현합니다. 반면, "(100 - value)/100"은 두 단계의 계산을 거치는 것처럼 보일 수 있습니다.
- 오류 가능성: 더 간단한 식은 일반적으로 오류 발생 가능성이 낮습니다. "1 - value/100"은 단순화된 형태로, 잘못된 계산이나 오류 발생 가능성이 더 낮을 수 있습니다.
따라서, 특별한 상황이 아니라면 "1 - value/100"을 사용하는 것이 효율적인 선택이 될 수 있습니다. 이는 코드의 간결함과 가독성 측면에서 특히 웹 개발 환경에 적합합니다.
There was a problem hiding this comment.
식을 전개하면 GPT가 알려준대로 식이 나오겠네요! 전개하는게 더 깔끔한 것 같습니다!!
| }); | ||
|
|
||
| const scaleValue = useTransform(scrollYProgress, [1, 0.4], [0.9, 1]); | ||
| const content = '전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.'; | ||
|
|
||
| const [style, setStyle] = useState<{ opacity?: number; clipPath?: string }>(); | ||
| const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']); |
There was a problem hiding this comment.
여기서 %를 안 붙이면, 아래에서도 %를 통한 파싱을 하지 않아도 되는 건가요?
There was a problem hiding this comment.
처음에는 clipPath 속성에서 %값을 사용해 %를 붙인 코드로 작성했는데 opacity와 clipPath 스타일을 합쳐서 사용하는 경우에는 %를 지우면 되겠군요..! 아래 문제도 해결할 수 있을 것 같습니다!
|
|
||
| useEffect(() => { | ||
| const unsubscribe = scrollValue.on('change', (value) => { | ||
| const percentValue = Number(value.split('%')[0]); |
There was a problem hiding this comment.
value의 타입은 string인가용? 다른 방법으로 얻어올 방법은 없나요!??
%로 파싱하고 Number로 타입 바꾸지 않고 가져오는 방법은 없는 것인가요?!
There was a problem hiding this comment.
코드에서 value 타입은 string입니다!!
| left: 0; | ||
| opacity: 0; | ||
|
|
||
| :before { |
There was a problem hiding this comment.
가능하면 가상 요소는 ::로 작성하는 게 좋을 것 같습니다!! [참고]
Summary
close #291
Screenshot
Comment
폴더 구조 변경문제
로컬에서는 정상적으로 작동하는데 vercel 페이지의 개발자 도구로 확인한결과
로컬 - TextContainer, MotionTitle 모두 useScroll의 target이 contentRef 이기에 contentRef안에서 스크롤이 될때만 애니메이션
vercel - TextContainer만 로컬과 동일하게 작동, MotionTitle은 target이 전체(body)로 잡힘
-> MotionTitle만 정상적으로 작동되지 않음
해결
기존에는 MotionTitle를 컴포넌트로 분리하여 contentRef에 대한 정보를 넘겨주는 방식으로 되어있었습니다. 따라서 MotionTitle에서의 contentRef를 vercel에서 출력해봣는데 정상적으로 출력되었습니다...!
props로 넘어온 contentRef가 정상적으로 출력도 되는데, 왜 vercel에 배포만 하면... target 요소가 전체로 잡히는지... 잘 모르겠습니다...!😭
일단 하나의 폴더로 다시 합쳐보았는데 vercel에서는 정상적으로 코드가 실행되었습니다.
MotionTitle을 하나의 폴더로 합쳐도 코드량이 많지 않아 일단, 합쳐서 pr 올립니다!