~ZeroToOne 프로젝트 트러블 슈팅~ 이번 프로젝트의 1차 MVP에서 로그인 파트를 제외한 나머지 부분을 담당하면서 페이지 이동 흐름을 구현하는 과정을 진행했습니다. 이 과정에서 여러 라우팅 방식과 CSR/SSR에 따른 쿠키 처리의 차이 등을 겪으며 정말 많은 오류를 경험했습니다.그 과정에서 겪은 시행착오와 각 페이지 이동 방식의 특성을 한 번 정리하며 모르는 부분을 짚고 넘어가기 위해 작성하였습니다. 1. 페이지 이동 방식Next.js에서 페이지 이동을 구현할 때 사용할 수 있는 방법은 여러 가지가 존재합니다.그중 가장 많이 사용하는 방식으로는 다음 세 가지 방식을 꼽을 수 있습니다. Router.push()Next.js가 제공하는 useRouter() 훅을 사용해 페이지 이동을 처리하는 방식..

들어가기에 앞서요즘 들어 프론트엔드 개발에서 성능 개선 쪽에 조금 관심이 생기면서 '사용자는 우리가 생각한 타이밍보다 훨씬 빠르게 반응을 기대한다'는 걸 자주 느낍니다.저도 그렇지만, 클릭을 통해 페이지 이동을 기다리는데 기대했던 데이터 대신 비어있는 화면이 잠깐이라도 나타나는 걸 참지 못하는 사용자가 꽤 많습니다. UX 관점에서야 당연한 이야기지만, 실제 구현에서 이와 같은 부분을 해결하려면 꽤 신경 써야 하는 부분이 많죠. 이런 고민을 가지고, 최근에는 Tanstack query와 Next.js 관련을 좀 더 공부하다보니 자연스럽게 'prepatching'이라는 키워드에 관심이 생겼습니다.prepatching은 데이터를 필요로 하기 전에 미리 불러오는 전략으로, 단순히 API를 일찍 호출하는 게 아니..

2024년 7월. 싸피의 공통 프로젝트를 시작하며 기술 스택을 결정하던 그때, 한 팀원이 말했다."우리 커뮤니티 사이트잖아. 근데 Next.js가 SEO에 좋대."그 한 마디를 듣고 우리는 "그래, 새로운 기술도 써볼 수 있고 좋다!" 하며 Next.js를 채택했다.솔직히 말하자면, Next.js가 왜 SEO에 좋은지 제대로 알아보지도 않고 결정한 것에 가까웠다. 제한된 시간과 자원 속에서 프로젝트를 끝마치고 되돌아보니 정작 SEO를 제대로 활용하지 못했다는 것을 깨달았다.이 글에서는 그때의 경험을 되돌아보며 SEO가 대체 어떻게 돌아가는 녀석이기에 Next.js가 유리한 것인지 하나씩 정리해보고자 한다.과거의 나에게, 그리고 팀에게 이 글이 작은 위로와 교훈이 되기를 바라며 SEO블로그를 운영하게 되는..

때는 2024년 7월경. 처음으로 Next.js를 사용한 프로젝트를 진행했습니다.SSAFY에서 진행한 첫 프로젝트로 팀원들과 함께 포부를 갖고 Next.js에 뛰어들었고.. 결론적으로,결과는 좋았지만..내 머릿속에서 완전히 이해하여 사용했는가? 를 질문하면 곧바로 "아니"라고 대답하는 결과를 맞았다고 생각합니다ㅜ.팀원들과도 프로젝트가 끝난 뒤 회고하면서 가장 많이 했던 이야기가 "우리가 Next.js를 제대로 쓴 게 맞을까?"였으니 더 이상 말을 얹지는 않겠습니다..... 그런 과거의 나 자신을 회고하면서, 'Next.js에 대해 다시 한번 되짚어보고 내 코드를 제대로 된 지식을 갖고 살펴보자'라는 목표를 가지고  Next.js에 대한 공부를 진행하려고 합니다.다만 먼저 코드를 보기보다는 Next.js가..