이 블로그는 스크롤을 통하여 컨트롤되는 방식으로 구현되어있다.
흔히 말하는 infinite scrolling으로 ...

일반적인  SNS들은 위가 최신이고, 아래로 갈수록 예전것들인데, 기존에 만들었던 블로그에서는 우로갈수록 최신 좌로갈수록 예전것이었다.

개인적으로 글이 긴 블로그의 특성상 아래로 스크롤링 하며 글을 읽다가 다음 글을 읽기 위해 위로 다시 스크롤해야 한다는것이 좋은 방향이 아니라고 생각했다.

그래서 채팅과 비슷하게 아래로 갈수록 최신 위로갈수록 오래전 것인 방향으로 방향을 잡았다. 특정 테그에 글을 모두 읽고 싶으면 왼쪽 메뉴에서 테그를 클릭하고 탑버튼으로 처음 글로 이동하여 아래로 쭉 읽어 갈수 있도록..

검색을 통해 중간부에 짐입할 수 있기 때문에 어짜피 위 아래로 컨텐츠를 추가하는 기능이 필요하기 때문에 어짜피 양방향 다 구현이 필요하다고 생각했다.

그런데 위로 컨텐츠를 붙이는것이 생각보다 까다롭더라 위에 컨텐츠가 붙여지더라도 사용자가 현제 보고있는 위치를 계속 보고 있게 하는것이...

위에 컨텐츠를 붙였을때에는 새로 붙여진 컨텐츠의 높이만큼 사용자 스크롤을 내려주면 되겠지라고 간단하게 생각하였고 그렇게 구현하였는데, 자잘한 문제들이 계속해서 발견되었다.

위와같이 가능하게 하기위한 기본적인 전제는 각 글들의 컨텐츠의 높이가 동적으로 변하지 말아야 한다는것, 만약 높이를 동적으로 바뀌는 경우가 생긴다면 다시 변경된 높이 만큼 사용자의 스크롤을 조정할것..

그런데 이 블로그에서는 각 글들이 클라이언트 높이 만큼이 min height로 설정이 되었는데 (짧은 글로 진입하였을때 다을글이 같은 화면에 보여지지 않도록 하기 위하여) 이 때문에 리사이즈가 발생하는 경우 컨텐츠의 높이가 지속적으로 바뀌었다.

모바일에서는 스크롤을 올리거나 내릴때 주소창이 감춰지며 스크린 높이가 변했고 이 때문에 프로그램이 스크롤을 조정하게 되고, 사용자의 스크롤과 프로그램의 스크롤이 겹쳐서 부자연스럽게 보여졌다.

그래서 윈도우에 스크롤이 되던부분을 내부컨텐츠에서만 스크롤링 되게 바꾸었다. 윈도우의 크기는 처음 그대로가 max이어서 스크롤링에 의해 주소창이 가려지지 않도록...

또 컨텐츠의 길이에 따라 스크롤바가 생겼다가 없어졌다 하면, 스크롤바의 폭만큼 컨텐츠의 폭이 좁아져 줄바꿈이 일어나거나 하게 되었을때 높이가 바뀌었다. 그래서 스크롤바는 항상 나오도록 하였고,(페이스북에서는 안나온다 'ㅁ';'ㅁ';)

컨텐츠가 붙여지는 중에 사용자가 스크롤하게 되었을때 스크롤이 바뀌게되어 변경후 이동해야할 스크롤 위치가 잘못 계산되는 부분이 있었는데, 컨텐츠가 업데이트될때, 컨텐츠를 스크롤 불가 하게 바꿔 사용자 스크롤을 막고 풀고 하도록 바꾸었다.

또 이상한 점은 더이상 스크롤이 이동할수 없는 지점에서 스크롤을 계속 이동하려 할때, 실제 컨텐츠를 받아오는 시간은 짧은데, 컨텐츠가 반영되는데 걸리는 시간이 길었다(2~3초). 게다가 스크립트를 minify하지 않았을때에는 발생하지 않는다.(뭐가 다르기에 그러는거야) 아직도 원인을 못찾았다.

잠시동안 setState 하는 큐가 밀리는것으로 보이는데, 타임아웃 이벤트도 안되고, 좀더 찾아봐야겠다.

일단은 컨텐츠 상위에 도착하기전에 미리 내용을 프리페치 하게 바꿔서 눈에 띄지 않게 했는데, 근본적인 해결책은 아니어서,,, 여전히 무지 빠르게 스크롤하면 해당문제가 발생한다.

대부분 기술적인 문제나 해결은 아니고, 작은 디테일을 잡기 위한 꼼수 들이어서,  들어간 노력대비 만족도가 좋지않아.. 다른사람들은 어떻게 하고 있는지 궁금하기도하고...(중간으로 진입하여 위아래로 페칭하며 스크롤하는것이 없는것 인가..) 다른 훌륭한 방안이 있을거 같아서 마음에 들지 않아...

이번에는 이렇게 한다만. 다음에 할때는 꼭 상단 최신으로 하거나, 좌우로 한글씩 이동하도록 해야지...