Program/Front-end14 react 상세 페이지 이동 후 이전 목록으로 돌아가기 item 목록에서 , 상세 페이지로 이동후에 뒤로 가기를 하면 이전 목록이 유지되어야 한다 * item 리스트가 그대로 있어야 한다. * 스크롤이 이전 진입 시점 이어야 한다. * 빠르게 로딩이 되어야 한다. 위 기능을 어떻게 구현할까? 개발자가 아니라면 당연히 되어야 할거 같은게 당연히 지원되지 않는다. 서버사이드 렌더링 페이지 라면, 더욱이 까다로울 수 있다. 현재 delog.io는 nextjs 를 사용해 서버사이드 페이지가 기본으로 동작하고 있다. 내가 구현한방법은 history 객체를 사용 하였다. history 객체는 새로 고침을 하기 전까지 상태 유지가 된다. 페이지 이동이 필요할때 사용하기에 적합하다. 1. 목록을 로드한다. * 목록을 히스토리에 저장한다. 2. 아이템을 선택시에 스크롤위치를.. 2023. 1. 4. 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. [Marked] html안에 image가 있을 경우 사용 라이브러리 : https://marked.js.org/ mark down을 케이스 중에 html tag 안에 image가 있을 경우에 대한 응급 처리. (미정제 코드, 좋은 방법 있으면 댓글 로 공유 부탁드려요) Sample 먼저 샘플 케이스를 살펴보자. mark down은 아래와 같이 작성되어 있고, 이를 그려내면 아래 Image와 같이 나와야 한다. mark down https://images.hive.blog/DQmWwFSXs6264npQxbEnBmYkjHCXDi8CGhUKY1DDJ8xBXYy/DSC_1973.JPG https://images.hive.blog/DQmQRExbzza6Mv2dbtDfETtKMEDH9ozy9zk8vEQuTWiC3Gk/DSC_1974.JPG markdown 정상 렌더.. 2022. 12. 26. [Tailwind CSS] dark mode 적용 Tailwind css dark mode Tailwind CSS에서 dark모드 적용은 너무나 매끄럽다. 기존에 디폴트 모드에서 다크모드 적용을 해보았다. 아래내용은 정석은 아니고, 머리속 생각으로 적용한 방법이다. index.html index.js (global settings) if (localStorage.theme === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } darkModeController.jsx function handleChange() { const checked = !isChecked; if (checked) { .. 2022. 12. 26. 이전 1 2 3 4 다음
