TIL 20220627 - 49번

이번 주부터 본격적인 프로젝트가 시작 되었다.
솔직히 프로젝트 기간동안 TIL 조금 얕게 쓸 수 밖에 없을 것 같다.
물론 프로젝트를 진행하면서 새로 배우는 것들이 너무나 많지만.. 진짜 너무 많아서 프로젝트 시간을 쓰며 공부 정리 시간까진 힘들 것 같고..
프로젝트가 끝나고 내가 사용한 코드들을 다시 팀원들과 회고와 리뷰를 거치며 정리글을 차근차근 작성해 나가봐야겠다.

일단 프론트를 시작한 이후로 배워야 할 게 너무나도 많다.
특히 이번 프로젝트 때는 스크롤을 이용한 페이지 소개를 만드려고 하는데 와...
하나 만드는데 코드를 몇십줄은 쓰고 수학적 계산을 얼마나 한건지
이해하며 따라하는데도 오늘 하루를 다 쓴 것 같다.
다만 하나 좋은 점은 비슷한 동작들은 동작 함수를 잘 만들어 놓으면 나머진 그냥 노가다 작업이라 좋은 것 같다.
프론트 재밋기도 하고.. 이번 주 금요일 점검을 할 때 그래도 팀원들에게 뭔가 자신있게 내놓을 수 있는 조금이지만 사소한 거라도 만들 수 있으면 좋겠다.

-가장 어려웠던 함수-

function calcValues (values, currentYOffset) {
        let rv;
        //현재 씬(스크롤섹션)에서 스크롤 된 범위를 비율로 구하기
        const scrollHeight = sceneInfo[currentScene].scrollHeight;
        const scrollRatio = currentYOffset / scrollHeight;
        
        if (values.length === 3) {
            // start  ~ end 사이에 애니메이션 실행
            const partScrollStart = values[2].start * scrollHeight;
            const partScrollEnd = values[2].end * scrollHeight;
            const partScrollHeight = partScrollEnd - partScrollStart;

            if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd){
                rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1]-values[0]) +  values[0] ;
            } else if (currentYOffset < partScrollStart) {
                rv = values[0];
            }else if (currentYOffset > partScrollEnd) {
                rv = values[1];
            }
           
        } else{
            rv =scrollRatio * (values[1]-values[0]) +  values[0] ;
        }

        return rv;
    }

스크롤 동작을 사용할 때 계속 쓰이는 함수이니 나중에 다시 회고할 때 꼭 확인해보자.