Program/Front-end11 [tailwindcss] cookie darkmode with nextjs nextjs에서 cookie를 활용해서 darkmode를 적용 했다. 브라우저에서 먼가를 저장할수 있는 곳은 localstorage, sessionstorage, cookie, history를 활용 할 수 있다. 이중 쿠키를 사용한 이유는 다음과 같다. * localstorage를 사용할 경우 SSR에서는 localstorage에 접근 할 수 없다. client side로딩 시점에 localstorage를 로드해서 theme를 적용하면 로딩 딜레이가 있기 때문에, 화면이 깜빡이는 현상이 발생하게 된다. 화면이 깜빡임 없이 theme를 적용하기 위해 cookie는 좋은 방안이다. nextjs SSR에서 cookie에 접근이 가능하기 때문이다. import { cookies } from 'next/heade.. 2023. 1. 6. 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. 이전 1 2 3 다음
