본문 바로가기

전체 글33

[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.
웹페이지 어디에 배포 할까? (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.
[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.