계기
메인에서 oauth 로그인을 하는데 순간적으로 레이아웃이 무너지는 것을 확인하였다
성능 탭을 이용하여서 확인해보았더니,
Callback 화면
메인 로딩 화면
순간 loading이란 말이 나오면서 무너지는 것이었다.
Oauth 로그인을 할 때, token을 메인이 아닌 다른 callback 으로 보내는데,
이때 UI가 무너지는 것이었다.
짧은 순간이었지만 dolpick -> oauth -> dolpick으로 돌아오면서
Page load와 함께 마운트가 다시 되는데 이때 레이아웃 변하는 게 보여서 신경 쓰였다.
skeleton 추가
skeleton추가 화면
메인 로딩 화면
스켈레톤만 추가했는데 실제 화면과 달라서 이것도 맘에 들지 않았다.
그래서 바와 버튼을 추가하려고 했는데 문제가 생겼다.
2가지 고민
useState 값을 props로 받는데 단순히 UI만 보여주는데 코드를 수정하기 번거로웠다.
어차피 클릭이 안 되게 막을 거라서 단순히 state값만 추가하면 되었는데
여기서 고민이 되었다.
(pointer-events-none으로 로딩중 클릭 막음)
- 커스텀 훅으로 필요한 값만 내려주기
- useState를 만들어서 넣어주기
결과부터 말하면 2번으로 결정하였다.
1번의 장점은 import cost를 줄여줄 수 있다.
왜냐하면 Callback 페이지에서 useState를 import해서 안 쓰기 때문에
줄여줄 수 있다.
하지만 2번을 선택한 이유는
유지보수를 고려하였다.
import 하는 양이 적어서 차이가 미미하기도 하고,
훅을 쓴다면 여기서 이 값을 사용하는건가...?
라는 착각이 생길 거 같아서
forOnlyUI라는 상태 값을 만들어서 넣어주었다.
결과
메인에서는 처음 마운트 될 때 레이아웃이 조정되는 과정이 한번 생긴 이후 잡히는데
callback UI도 마찬가지로 같은 과정을 가지고 있다.
수정 전
수정 이후
그래서 oauth -> dolpick callback -> dolpick main으로 이동할 때
callback에서 레이아웃 조정 전 모습만 나타나고
main으로 넘어가는데
main에서도 레이아웃 조정 전 모습이 보이면서 자연스럽게 넘어갔다.
(callback 페이지를 눈으로 구분할 수 없다.)
결과는 만족스러웠다.
callback UI 레이아웃 잡히고 다음 화면으로 넘어가는 것이 자연스럽게 떨어졌지만 이것은 운이었다.
그래서 CPU 성능을 감속하고 촬영해보았다.
생각처럼 잘 나왔고, 네트워크까지 느린 3G를 추가해도 자연스럽게 잘 나왔다.
(네트워크 느리게 한 것은 시간이 길어서 영상을 넣지 않음)
같은 컴포넌트를 활용하여서 그런지 페이지 이동에도 새롭게 마운트 하지 않고,
기존의 그림에서 이어지는 것이 신기했다.
끗!!!
같은 컴포넌트를 활용하여서 그런지 페이지 이동에도 새롭게 마운트 하지 않고,
기존의 그림에서 이어지는 것이 신기했다.
내가 위 내용의 원리를 이해하지 못해서 추가적으로 더 찾아보았다.
SPA의 장점
callback -> main으로 넘어갈 때 레이아웃을 잡는 과정이 있는지 확인하고 싶어서 개발자 도구를 활용해서 디버깅을 해보았다.
위처럼 callback url에서는 자리를 잡을 때 레이아웃 과정이 들어가는데, 메인페이지에서는 위와 같은 과정이 생략되는 것을 확인할 수 있었다.
굵은 파란색으로 실선이 있는 부분부터 메인 페이지이다.
이전 callback 페이지에서 보라색으로 레이아웃을 잡는 것을 확인할 수 있는데,
main 페이지에서 안 보이는 것을 보아하여 next.js에서 같은 컴포넌트를 불러올 때 재사용한다는 것을 확인하였다.
더 조사하여서 찾아보니 이는 SPA의 주요 기능중 하나였다.
Next.js는 Single Page Application (SPA) 아키텍처를 사용하여 클라이언트 사이드에서 페이지 전환을 처리합니다. 이 경우, 브라우저는 전체 페이지를 새로고침하지 않고, 변경되는 부분만 새로 렌더링합니다. 따라서, 동일한 UI 컴포넌트가 재사용되면 레이아웃이 유지될 수 있다.
주요 이유
Single Page Application (SPA)는 초기 페이지 로드 이후에는 필요한 부분만 동적으로 업데이트합니다. 전체 페이지를 새로고침하지 않고, 변경된 부분만 실시간으로 업데이트하여 사용자에게 보여줍니다.
이론으로 배웠던 것을 다시 한번 확인하고 배울 수 있었다.
또한 개발자 도구를 활용한 디버깅으로 사실확인하고 넘어간 부분이 좋았고,
이해하지 못한 부분이 있는데 이걸 넘어가지 않고 해결하여서 만족스럽다. !!!
