혹시 next.js에서 스크롤 유지 (뒤로가기 시, 전 페이지의 스크롤 유지) 기능을 구현해보신 분 계신가요?

next.js에서 실험적으로 설정을 켜면 되는 것 같긴한데 (https://mmazzarolo.com/blog/2021-04-10-nextjs-scroll-restoration/), 뭔가 실험적인 기능인 것 같아서 써도 되는지 잘 모르겠어서요.

혹시 깡(?) js로 구현해보신 능력자분 있으시면 지나가면서 아이디어 한번씩 부탁드립니다.
(보통 이렇게 깡?으로 구현하는게 좋은건가요? 아니면 지양해야할까요?)

비슷한 기능을 구현해본 적이 있긴하지만, 질문자님의 웹 사이트 동작 방식이 어떤지 몰라서 명확한 답을 드릴 순 없을 것 같네요 😟

일단 질문자님이 공유해주신 링크의 원문 중 참조한 링크(https://github.com/vercel/next.js/commit/38bd1a024cb25923d8ea15f269a7294d073684d8)를 보시면 next.js에서 해당 기능을 어떻게 구현했는지 볼 수 있네요. 저라면 요거 좀 더 살펴보고 현재 웹 사이트에 적용했을때 문제 없는지 파악하는데부터 시작할 것 같아요.

일단 막연하게 생각해보면, next.js를 어떻게 사용하는지에 따라서 기능 구현 방법이 달라질 수 있습니다. 

예를 들면, 인피니트 스크롤 형식의 페이지에 react-query와 pagination을 적용해서 데이터를 불러오는 페이지의 경우, 뒤로가기를 통해 재방문했을 때 전에 요청했던 pagination page의 데이터까지 보존하고 있어야 DOM의 크기도 그만큼 커질 수 있고 스크롤이 내려갈 수 있겠죠? 
react-query와 SSR을 사용하신다면 요청한 key의 데이터가 의도치않게 갱신되는 것도 신경 쓰셔야할거구요.

질문자님의 웹 사이트가 어떤 방식으로 돌아가는지 구체적이지 않아서 명확한 답을 드리기는 어렵지만, 시간이 되신다면 공식 문서, 다른 기술 블로그, 스택오버플로우를 찾아보시면서 생각해보시면 좋을 것 같습니다.

개인적으로는 깡으로 구현하는 것보다 라이브러리가 있다면 쓰자 주의긴한데, 이건 상황에 따라 다를 것 같아요

참고로 "커리어리 사이드 프로젝트 페이지" (https://careerly.co.kr/lounge/side-projects)에 스크롤 유지가 적용되어 있는데 CSR과 next.js의 스크롤 유지 기능을 살짝 손봐서 만들었습니다 🙂

퍼블리 소프트웨어 엔지니어

손정현

nextjs scroll restoration (스크롤 유지)

최근 많은 컨퍼런스와 기술블로그에서 redux와 saga를 리액트 쿼리로 전환한 경험을 공유하고 있는데요. redux와 saga의 불편함과 복잡함에 비하면 리액트 쿼리는 훨씬 사용이 간편하고 캐싱과 같은 편리한 기능 때문에 그러한 내용들에 공감이 많이 됩니다. 

하지만 리액트와 nextjs의 최신 버전을 보면 서버 사이드에서 데이터를 가져오는 방향으로 컴포넌트가 발전하고 있고 데이터 호출에 대한 캐싱도 제공하고 있습니다. 앞으로 이러한 기능이 점점 안정화가 된다면 유저정보와 같은 사용자만의 데이터 외에는 클라이언트 사이드에서 데이터 호출은 많이 줄어들 것으로 보이고 이 마저도 새롭게 나오는 use() 훅을 사용해볼 수 있을 것 같아서요

분명 서버데이터에 대한 상태관리 도구로 redux와 saga의 대안이 필요한건 맞지만 지금 시점에서 리액트 쿼리를 도입하는게 맞을지 고민이 되기도 합니다. 다른 개발자 분들은 어떻게 생각하시는지 궁금합니다!

리액트 쿼리는 앞으로 어떻게 될까요?

현재 파이어베이스와 리액트를 사용해서 
혼자 파이어베이스 서버를 사용해 
포트폴리오를 만드려합니다.

코드에서 에러문제는아니고

파이어베이스는 백엔드없이 서버를 쉽게 사용할 수 있게 해주는 서비스인데

현업에서나 프로젝트에서 백엔드와 작업하는것과 비슷하게 이루어지는지 궁금합니다.

코드상에서 데이터베이스의 데이터를 가져오고 로그인을 시켜주고 회원가입을하고 등등
여러 코드들이 실제 협업하는 코드들과 유사한지가 궁금합니다.

알려주실분 계실까요?

독학중이라 이러한것들을 알수있는 방법이 없네요..ㅠ

또는 혼자서 협업느낌의 작업을 해볼 수 있는 방법이 있을까요?

파이어베이스로 작업하면 협업의 느낌이있나요?

프로젝트에서 사용하는 이미지를 어디에 저장해야 할지 고민입니다. 
지금까지는 public폴더를 만들어서 제 로컬에 저장했는데, S3같은 외부 스토리지에 파일을 저장 한 뒤 링크로 접속하는 방법도 있는 것 같아서 어떤 방식으로 해야하는지 고민됩니다.

두 방법의 장단점이나, 다른 분들은 주로 어떻게 저장하는지 의견을 듣고싶습니다.  

react 프로젝트에서 image 파일을 보통 어디에 저장하시나요?

생각보다 고려해야될게 많네요. 역시 쉽지는 않군요. 참고자료 열심히 찾아볼게요. 답변 감사드립니다!