cafe24로 제작되어 있던 페이지를 nextjs로 전환작업을 진행했다.
기대효과
사이즈 축소 , 속도 향상
기존 cafe24에서는 많은 이미지를 다운 받고 캐싱이 되지 않아서 사이트 접근 속도가 많이 느리고 무거웠지만 개선 이후 속도와 사이즈 측면에서 효과를 볼수 있었다.
메인 페이지
<기존 사이트>
<개선 사이트 >
옮김 작업이라서 디자인 측에서는 비슷하게 제작을 하였다. tailwind 를 사용하여 디자인 작업을 진행했다.
네트워크를 All로 해서 document 정보등의 시간을 체크했어야 했는데 fetch를 자주 보다보니 잘못 캡쳐를 했다.. 따흑ㅜ
지금은 DNS를 변경해서 이전 사이트에 접근할수가 없는데 기존 cafe24는 메인 페이지 접근에도 큰 이미지를 받아와야 해서 무겁고 로딩이 느린 단점이 있었다.
개선 사이트에서는 next js 로 static 페이지를 만들때 이미지를 미리 만들어서 배포가 되었기 때문에 금방금방 로딩이 되었다.
<로그인 페이지>
로그인을 개선하면서 애니메이션과 패스워드를 강화할수 있었다.
debounce 를 넣어서 키 input 이 끝날경우 validation체크 기능을 추가하였으며
opacity 애니메이션을 넣어서 부드럽게 전환이 일어나도록 기능을 개발했다.
암호 부분에서는 crypto를 사용해서 salt 해싱을 추가하여 몇천번의 해싱을 돌린후에 암호화 하는 방법으로 암호를 강화하였다.
<기사 페이지>
<기존 사이트 >
<개선사이트 >
기사 페이지에서는 all측정을 하도록 캡쳐를 했었다. dom의 사이즈를 비교해봤을때 기존 사이트(51.3kb/1.7s) 에서 개선 사이트(6kb/282ms)로 많은 개선이 있었다. 사이즈 측면에서는 88.3% 개선이 있었으며 속도측면에서는 83.41%로 개선 시킬수 있었다.
기사요청 fetch를 비교해봤을때 기존 사이트 (682B) size와 2.77s 의 속도에서 5.4kb 로 사이즈는 증대 되었지만 204ms 의 속도로 대폭 개선시킬수 있었다. 특히 개선을 하면서 react-query를 사용해 읽었던 기사들을 캐싱처리하여 다시한번 기사를 읽을 경우 더 빠른 속도로 기사에 접근할수 있었다.
글쓰기 에디터
기존 기사글을 편집하거나 포스팅 하기 위해서 cafe24에서 지원해주는 편집 페이지를 따로 이용해야 했었다.
기존 cafe24웹 은 어드민 페이지로 구성되어 있어서 다양한 기능들을 관리하고 있었는데 플러그인이 많이 설정되어 있다보니
무겁게 느껴지고 많은 메뉴들이 정확한 기능을 나타내지 못해서 접근성 부분에서 포스팅을 수정하기 어렵다는 단점을 가지고 있었다.
하지만 장점으로는 에디터 기능에서는 다양한 기능들을 넣어서 에디터 기능은 우수했다.
내가 개선한 페이지 에서는 어드민 계정일 경우
바로 포스팅 에디터에 접근하고 기사를 바로 수정할수 있는 기능을 추가하였다.
관리자의 경우 쉽게 기사를 수정하고 게시할수 있으며 접근성 측면에서 큰 도움이 되었다고 생각한다.
포스팅 에디터의 경우에도 필요한 기능만 추가하여 간소화 하여서 가볍게 포스팅 에디터를 사용할수 있다.
기존 cafe24에디터에서는 다양한 기능을 사용할수 있었는데 사용하다보니 사용하던 기능만 계속 사용해서 필요한 기능들만
가볍게 추가하고 안쓰는 기능들을 전부 빼버렸다.
작업을 하면서 미리 보기 기능을 통해 작성한 포스팅이 어떻게 게시될지 미리 볼수 있도록 기능을 추가하였다.
추후에는 커뮤니티 기능도 생성된다고 하니 확장성 측면에서 cafe24에서 nextjs로 옮긴 것은 잘한것이라고 생각이 든다.
물론 페이지를 cafe24에서 만들수 있었지만 코드로 디자인하는것이 훨씬 편했다.
