개발을 진행하면서 느끼는 점은 정말 버그가 많다는 것이다. 내가 작성한 코드들에도 정말 많은 버그들이 있는데 벌써 7월이 다 지나간 버그도 발생했다.
성장하는 내가 보이는 것 같기도 해서 기분 좋게 7월을 보내주려고 한다. 가지마.. 짧게 느껴진 한 달 동안에 어떤 활동을 하면서 무엇을 얻었는지, 생각의 변화는 있었는지 알아보려고 한다.
7월에는 고양이 사진첩, CSS 클론 코딩을 진행했다.
주로 최적화에 대한 내용이었다. 더 나은 사용자 경험을 만들기 위해서? 라고 생각하면서 진행했다.
아쉬웠던 내용
정합성 검사
이상한 값이 들어왔다고 하면 다른 타입의 값이 들어왔다고 생각해서, 타입에 대한 검사만 진행했던 것이 아쉽다. 다른 분들의 코드에 대해 리뷰 하면서 정규 표현식을 검사하는 것도 보았는데, 다른 어떤 점을 더 검사해야 하는지 아직도 알아내지 못했다..
좋았던 내용
디버깅? 사용
같은 내용에 대해 다시 랜더 할 필요 없는 상황을 생각하면서 여러 상태 값을 비교해 보았다. 비교할 때 콘솔을 사용하지 않고 디버거를 사용해서 검사하면서 디버거에 익숙해 지려 노력했다.
코드 개선
내용의 틀이 거의 잡혀 있었지만 그 와중에도 그 동안의 코드 리뷰에 있었던 피드백들을 떠올리면서 코드를 작성해 나갔다. 특히 구조 분해 할당에 신경 썼다.
해당 과제의 코드 리뷰에서도 코드가 읽기 편해졌다는 의견과 일관성이 나아졌다는 의견이 있어서 인정 받은 기분이 들고, 너무 뿌듯했다.
네이버, 유튜브, 자신이 원하는 사이트 중 선택 해서 클론 코딩을 진행하게 되었다.
네이버 모바일 페이지를 클론하기로 결정했는데, 정갈하게 나열되어있는 것 같지만 보면 꽤 랜덤하게? 나열되는 컨텐츠 부분이 있었기 때문에 도움이 될 것 같아서 선택하게 되었다.
스크롤 이벤트
스크롤을 하면 내려오는 컴포넌트? 부분이 있다. 평소에는 가려져 있다가 어느 정도 스크롤을 내리면 컴포넌트 부분이 보이게 되는 것이다.
해당 내용을 CSS로 구현하기 위해서 다양한 이벤트를 뒤져보았고, animation-timeline을 사용하려고 했으나, 이해를 제대로 못 한 건지 실패했다.. 뭔가 될 듯한 느낌이 있는데 CSS로 구현을 못 하는 건지 아직도 궁금하고 미련이 남는다.
콘텐츠 부분
눈으로 보이는 구조는 아이템의 높이가 다른 grid 모양이다. 모양은 구현 했지만 화면의 넓이를 줄였을 때 세 번째 줄에 있던 컨텐츠들이 첫 번째와 두 번째 줄로 이동한다.
요소들을 미리 전부 그려 놓고 화면의 넓이에 따라 보여주거나 보여주지 않으면서 마치 이동한 것 처럼 보이게 하는 것도 생각해 보았지만 정답이 아닌 것 같아서 구현하지 않았다.
결국 숙제를 해결하지 못한 채 과제를 제출하고 다른 분의 과제를 보았는데 그리드의 높이를 잘게 쪼개서 구현한 것 같았다. 잘 구현된 것 같았지만 컨텐츠의 높이를 하나하나 설정해줘야 한다는 것이 맞는지 의문이 들었다.
전체적으로 계속 더 나은 방법은 없나 생각하게 되었는데 알맞은 답을 찾지 못해서 너무 아쉬움이 많았다.