[✍️ Dev Log] 이우성 / 2021-05-19

### 오늘은 어떻게 프로젝트에 기여했나요?

- #101 Landing Part-2 애니메이션 Position Fixed 효과 추가
- #108 Landing Part-4 애니메이션 더 부드럽게 조정
- #117 Landing Part-6 디자인 및 애니메이션 추가

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

안그래도 svg는 처음 접해보는데 타입스크립트까지 적용시키려니 처음에 정말 애를 먹었다.

dom을 사용했는데, svg에 `getElementByid`로 접근해서 `getTotalLength()`를 쓸 때는 아무 문제 없었지만, 여러개를 적용시키기 위해 `id`를 `className`으로 바꾸고 접근했을 때는 `getTotalLength()`가 적용되지 않았다. 그래서 조건문을 걸어주니 드디어 해결할 수 있었다.

```js
const svg: HTMLCollectionOf =
document.getElementsByClassName("rainbowLine");

Array.from(svg).forEach((line) => {
if (line instanceof SVGPathElement) {
const length = line.getTotalLength();
}
});
// ..생략
```

여기까지 오는데도 고생했지만 지금부터 시작이였다. 지금은 svg의 path에 접근을 한 것 뿐이다. line이 path 태그에 해당한다.

처음 스크롤 위치에 따른 view 거리 계산을 했을 때는,

```js
scrollPercent =
(document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight);

strokeDashoffset = length * scrollPercent;
```

(현재 스크롤위치) / scrollHeight - clientHeight 를 해주고 이 값을 svg 길이에 곱을 해주었다.

이 값은 후에 strokeDashoffest에 할당해주었는데, 내 생각대로 전~~혀 움직이지 않았다.

이때 정말 고민 많이 했던 것 같다... 도저히 감을 못잡고 있을 때였다.

그러다가 조금 더 생각해본 결과, 현재 내가 보여주고 싶은 위치만 필요한거 아닌가? 생각해서 scrollHeight를 빼버리고 퍼센트니까 1을 빼주었다.

```js
height = document.documentElement.clientHeight;
scrollPercent = document.documentElement.scrollTop / height;

strokeDashoffset = length * (1 - scrollPercent);
```

이렇게 하니 해결이 되었다!!

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] Landing Part-7 디자인 및 애니메이션 추가