react7 react 상세 페이지 이동 후 이전 목록으로 돌아가기 item 목록에서 , 상세 페이지로 이동후에 뒤로 가기를 하면 이전 목록이 유지되어야 한다 * item 리스트가 그대로 있어야 한다. * 스크롤이 이전 진입 시점 이어야 한다. * 빠르게 로딩이 되어야 한다. 위 기능을 어떻게 구현할까? 개발자가 아니라면 당연히 되어야 할거 같은게 당연히 지원되지 않는다. 서버사이드 렌더링 페이지 라면, 더욱이 까다로울 수 있다. 현재 delog.io는 nextjs 를 사용해 서버사이드 페이지가 기본으로 동작하고 있다. 내가 구현한방법은 history 객체를 사용 하였다. history 객체는 새로 고침을 하기 전까지 상태 유지가 된다. 페이지 이동이 필요할때 사용하기에 적합하다. 1. 목록을 로드한다. * 목록을 히스토리에 저장한다. 2. 아이템을 선택시에 스크롤위치를.. 2023. 1. 4. 웹페이지 어디에 배포 할까? (SSR, SPA) React를 기준으로 웹페이지를 어디에 배포 하는게 좋을까? 내 서버에 배포를 하는 것은 추천하지 않는다. 플랫폼을 활용 하는것이, 비용이나 유지보수 면에서 이점이 많다. 싱글 페이지 애플리케이션(Single Page Application, SPA) Github pages (https://pages.github.com/) 먼저 깃헙 페이지이다. 깃헙은 코드 저장소로 이미 익숙해서 인지, 깃헙 페이지에 블로그를 운영하는 분들을 많이 볼 수 있다. 먼저 리밋을 살펴보면 아래와 같다. bandwidth limit of 100 GB per month. 토이 프로젝트로 사용하기에 bandwidth 100GB면 충분하다. Usage limits GitHub Pages sites are subject to the f.. 2022. 12. 27. listitem [Markdown 다루기 with Marked, Tailwind CSS] 사용 라이브러리 https://marked.js.org/ https://tailwindcss.com/ itemlist itemlist 예를 들면 li 같은 태그에서 이렇게 동그라미가 나와야 하는데 나오지 않는다면, marked에서 지원하는 use를 사용해 custom class를 적용 할 수 있다. Marked + Tailwind CSS에서 사용 예제이다. const renderer = { listitem(text, task, checked) { return `${text}`; }, }; marked.use({ renderer }); const parse = marked.parse(body); 위의 예제와 같이 listitem의 li에 tailwind css를 적용해주는 예제이다. 위처럼 적용하면 li태.. 2022. 12. 22. react-intersection-observer for loading more data(스크롤 데이터 로딩) https://github.com/thebuilder/react-intersection-observer#readme GitHub - thebuilder/react-intersection-observer: React implementation of the Intersection Observer API to tell you when an eleme React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. - GitHub - thebuilder/react-intersection-observer: React implementation of the Inter... git.. 2022. 12. 22. 이전 1 2 다음
