분류 전체보기79 react 상세 페이지 이동 후 이전 목록으로 돌아가기 item 목록에서 , 상세 페이지로 이동후에 뒤로 가기를 하면 이전 목록이 유지되어야 한다 * item 리스트가 그대로 있어야 한다. * 스크롤이 이전 진입 시점 이어야 한다. * 빠르게 로딩이 되어야 한다. 위 기능을 어떻게 구현할까? 개발자가 아니라면 당연히 되어야 할거 같은게 당연히 지원되지 않는다. 서버사이드 렌더링 페이지 라면, 더욱이 까다로울 수 있다. 현재 delog.io는 nextjs 를 사용해 서버사이드 페이지가 기본으로 동작하고 있다. 내가 구현한방법은 history 객체를 사용 하였다. history 객체는 새로 고침을 하기 전까지 상태 유지가 된다. 페이지 이동이 필요할때 사용하기에 적합하다. 1. 목록을 로드한다. * 목록을 히스토리에 저장한다. 2. 아이템을 선택시에 스크롤위치를.. 2023. 1. 4. [next.js] version 13, head.js In the pages directory, the next/head React component is used to manage ) } After: app/head.tsx export default function Head() { return ( My Page Title ) } 2023. 1. 2. [next.js]An error occurred in the Server Components render. An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. 위의 에러가 발생했다. 해경방법 나의 경우에는 async로 data를 가져올때 로드전에 html에 데이터를 뿌려주면서 에러가 발생한것 같다. dev환경에서는 에러가 없었지만, vercel에서 배포시에 에러가 발생했다. 해결방법은 fetch한 da.. 2023. 1. 2. twitter card with csr Twitter card twitter나, sns, 메신저에 post를 공유할때 대표사진과 함께 타이틀이 보여지게 된다. 이게 CSR(SPA)에서 가능할까? CSR에서는 react-helmet이나, document를 사용해 html header의 meta tag등을 변경하게 된다. Javascript bot CSR에서 업데이트된 meta 태그를 읽을려면, sns플랫폼에서 javascript 로딩을 지원해야 한다. 하지만, 대부분 javascript로딩을 지원하지 않고 있다. CSR에서 react-helmet을 사용해 twitter card를 적용 했다는 댓글을 보고, 하루 동안 삽질한 결론이다. SSR 결론은 SSR로 적용이다. twitter card에서 CSR로 적용이 되었다고 해도, 다른 메신저나 플랫.. 2022. 12. 29. 이전 1 ··· 10 11 12 13 14 15 16 ··· 20 다음
