[Je-chan] 5일차, "CSS 에러 핸들링의 어려움"

## 오늘은 어떻게 프로젝트에 기여했나요?
- 메인페이지 애니메이션 구현된 것을 모바일에서도 정상 작동할 수 있도록 수정했다
- 메인페이지가 모바일 화면으로 출력됐을 경우 통일되지 않은 UI 모습이 보여 그 부분을 수정했다
- 메인페이지에 SVG 태그를 생성하고 스크롤 이벤트가 발생했을 때 SVG 태그에 애니메이션이 작동하도록 코드를 작성했다
- NavBar, Footer 가 모바일 환경일 때 기본적인 레이아웃을 구성했다
- Footer 의 경우, 모바일 환경일 때 변화되는 UI 까지 모두 작성했다

## 오늘 프로젝트에서 힘들었던 점은 무엇인가요?
1. **CSS 에서 에러가 나면 이게 무엇때문에 발생한 에러인지 확인하기 어려웠다.**
- CSS 코드를 작성하면 바로 웹앱에서 어떻게 렌더링이 되는지를 감시하며 보고 있지만 그럼에도 이게 왜 이렇게 나타나지? 라는 생각이 종종 든다.

2. **모바일 환경과 웹 환경은 매우 다르다.**
- 모바일 환경일 때는 전체 vh 의 길이도 달라진다. 그래서 우리가 평소에 웹앱에서 애니메이션을 동작시킬 때와는 다른 로직으로 작성해야만 했다
- 또, 웹 앱으로 보는 환경과 모바일에서 보는 환경에서 태그의 위치가 달라져야할 때가 있었다. 태그의 위치가 동일하면 모바일 쪽에서 UI 가 통일성을 보이지 못했다. 이 부분을 수정하는데 많은 어려움을 겪었다

3. **SVG 태그를 처음 사용하다 보니 태그의 속성에 대한 이해가 부족했다.**
- 공부는 철저히 했다고 생각했지만 생각보다 많은 오류를 겪어 구현에 시간이 많이 걸렸다

## 오늘 프로젝트에서 아쉬웠던 점은 무엇인가요?
1. SVG 태그 애니메이션을 구현했으나, 에러 사항이 있다.
- 한 템포 늦게 애니메이션이 구현된다. 스크롤을 한 번 내렸을 때 바로 애니메이션이 동작해야 하는데 이전 스크롤 이벤트에 애니메이션이 동작한다. 이 부분을 어떻게든 수정해야 완성도 높은 SVG 애니메이션이 될 것 같다

## 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- 메인 페이지와 navBar 모바일 화면 구축까지 모두 완료하고 싶다.
- 어떻게든 그렇게 구축을 완료하고 바로 Socket.io, WebSocket 에 대한 공부로 넘어가야할 것 같다

## 오늘 작성한 블로그 링크를 올려주세요
- https://je-developing.tistory.com/163