크루위키 개선 : React -> Next.js 마이그레이션 한 이유

작년 3월, 우테코 레벨 1 과정을 거치며 크루들과 조금씩 친해지던 시절, 크루들의 정보(논란)를 적고 공유하며 놀기 위해 몇 명의 크루를 모아 "크루위키"라는 서비스를 기획하고 레벨 1 방학식 때 서비스 런칭을 했었다.

 

이때 미션과 함께 병행하느라 여유가 많지 않았지만, 틈틈이 시간을 내어 기획하고 빠른 시간 내에 어떻게든 구현해서 겨우겨우 방학식 날 서비스 런칭을 할 수 있었던 생각이 난다. 그 덕분에 홍보효과는 좋았고, 크루들의 정보가 크루위키에 적히며 서로 더 친해질 수 있었던 것 같다. 그리고 레벨 3 팀 결성 때 같은 팀이 된 크루가 누구인지를 확인할 때도 쓰였던 것 같다.

 

이제 우테코 수료를 하고 시간의 여유가 생긴 지금, 코드를 유지보수하며 버그를 개선하고 7기 유저를 유치하기 위한 준비도 할 수 있을 것 같아서 시도했다. 그렇다면 개선을 하기 전 현재 어떤 문제가 있는지부터 분석해 보면

 

개선 전 사용자가 느낀 문제점

1. 다른 사람이 문서를 수정했을 때, 새로고침해도 내 화면에 바로 반영되지 않는다

2. 링크 공유를 했을 때 바로 누구의 문서인지 파악하기 힘들다

 

 

사용자들이 1번 문제를 가장 많이 불편해했다. 1번의 버그가 일어난 이유는 백엔드로 api 호출을 최대한 줄여보려고 시도한 것과 사용자들의 "새로고침" 버튼을 인지하지 못함이었다. 우리는 서버 상태 관리로 TanStack-Query 라이브러리를 활용했었다. 여기서 더 나아가 브라우저 새로고침이 될 때도 백엔드로 api를 호출하고 싶지 않아서 Persist-TanStack-Query를 사용해 브라우저 새로고침이 되어도 백엔드로 호출이 되지 않게 막았고, 명시적으로 새로고침을 하고 싶다면 아래 "새로고침" 버튼을 눌러서 데이터를 최신화하길 바랬다.

 

하지만 실제 사용자들은 새로고침 버튼을 인지하지 못했고, 옆 사람이 문서를 수정했을 때 보기 위해 시크릿 탭으로 접속해서 확인했다고 했다.

 

이 때는 캐시에 대한 개념이 미흡했었다. TanStack-Query는 브라우저가 캐시를 관리해서 무효화 요청을 하게 됐을 때 해당 브라우저에만 영향을 줄 수 있다는 점을 인지하지 못했었다. 그래서 이런 버그가 일어날지 예상하지 못했고, 런칭 후 이런 버그를 낳게 되었다. 그래서 이번 리팩터링을 하면서 이 문제는 확실히 잡고 가야겠다고 생각했다.

 

 

다음으로 2번의 문제를 보면 문서를 수정하고 슬랙으로 공유할 때 일어나는 문제인데, 아래 스크린샷을 보면 누구의 문서가 수정됐는지 바로 알 수가 없고, 링크를 접속해야만 누구의 문서가 수정됐는지 확인할 수 있는 문제이다. 우테코에서 공지와 잡담을 슬랙으로 하는 만큼 이 점도 개선이 되면 좋겠다는 생각이 들었다.

 

이 두 가지 문제를 해결하기 위한 좋은 방법이 무엇일지 생각해 봤다. 캐시 관리 문제와 페이지 별 다른 메타태그 적용...

여기서 Next.js를 떠올리게 됐다.

 

React는 SPA 방식으로 어느 페이지이든 접근점은 index.html이다. 그래서 페이지 별로 다른 메타태그를 설정하는 것이 번거롭다. (불가능한 것은 아니다. react-helmet-async라는 라이브러리를 사용하면 페이지 별로 다른 메타태그를 설정할 수 있다고 하지만 다른 해결방법을 찾고 싶었다) 그러나 Next.js는 페이지별로 다른 html을 만들어서 클라이언트에게 응답하는 방식이라 페이지별로 다른 메타태그를 설정하는 것이 간단하다.

 

또한 Next.js는 fetch 메서드 내에 캐시를 설정할 수 있는데 캐시를 관리하는 주체가 브라우저가 아니라 서버이다. 그렇다면 사용자의 변경 요청 후 서버에서 캐시를 무효화한다면 다른 클라이언트도 변경된 내용을 바로 확인할 수 있지 않을까 생각된다.

 

이러한 이유로 Next.js로 코드를 갈아엎게 되었다. (진짜 대공사와 수많은 삽질을 겪었다) 위 버그를 수정한 과정 및 개선효과는 다른 포스팅으로 작성해볼까 한다.

 

이제 7기 시작이 바로 내일인데, 7기 유저를 유치했을 때 7기는 어떻게 사용할지 어떤 점을 불편해할지 궁금해진다. 이 점들을 발견하고 개선해 나가며 더 안정적인 서비스가 되지 않을까..